我的“ .bike_image_wrapper”元素在滚动过程中变为活动状态，里面是SVG，我尝试在具有活动类的那一刻为SVG设置动画。 如何告诉GSAP何时开始动画？ 由于活动类在滚动时出现，因此每次滚动都会影响动画。但我需要动画才能与活动班级一起播放一次。 我不使用ScrollMagic

这是我的函数的代码，也许这将有助于了解我在做什么错。 每次滚动时，它都会影响SVG元素，启动动画，并且不会丢失并等待

[ function (a,b,c) {
    var d = a ( "./utils/isInViewport" ),e = a ( "./utils/throttle" );
    a ( "./variables" ).init ();
    var f = $ ( ".section" ),g = $ ( ".trigger" ),h = $ ( ".viewport_animate" ),z = $ ( ".tech_specs" ),i = function () {
        h.filter ( function () {
            return !$ ( this ).hasClass ( "animated" );
        } ).each ( function (a,b) {
            d ( b ) && $ ( b ).addClass ( "animated" );
        } )
    },j = e ( function () {
        winHeight = window.innerHeight,f.each ( function (a,b) {
                var c = b.getBoundingClientRect ();
                c.top > winHeight ? ($(b).find(".scene").removeclass("active"),$(b).find(".scene").removeclass("ended"))
                    : c.bottom < 0 ? ($(b).find(".scene").addClass("ended"),$(b).find(".scene").removeclass("active"))
                    : (c.top <= 0 && ($(b).find(".scene").addClass("active")),c.top > 0 && $(b).find(".scene").removeclass("active"),c.bottom <= winHeight && $(b).find(".scene").addClass("ended"),c.bottom > winHeight && $(b).find(".scene").removeclass("ended"))
            }),s = (function(){
                var w = document.querySelector('#btn_big');
                var tlz = new TimelineMax({paused:true})
                    .fromTo(w,2,{
                        y: -50,opacity: 0,ease: Power3.easeOut
                    },{y: 200,opacity: 1,ease: Power2.easeOut},'+=3');
                if ($(".bike_image_wrapper").hasClass("active")) {
                    tlz.play();
                }
                else{
                    tlz.invalidate();
                }
                z.each ( function (a,b) {
                    var c = b.getBoundingClientRect ();
                    c.top > winHeight ? $ ( b ).find ( ".bike_image_wrapper" ).removeclass ( "active" ) : (c.top <= 0 && ($ ( b ).find ( ".bike_image_wrapper" ).addClass ( "active" )),c.top > 0 && $ ( b ).find ( ".bike_image_wrapper" ).removeclass ( "active" ))

                })
            }),g.each ( function (a,b) {
                $ ( window ).scrollTop () >= $ ( b ).offset ().top ? $ ( b ).data ( "selector" ) ? (section = "." + $ ( this ).data ( "selector" ),$ ( section ).addClass ( "active" )) : $ ( b ).parent ().addClass ( $ ( b ).data ( "class" ) ) : d ( b ) ? $ ( b ).data ( "selector" ) ? (section = "." + $ ( this ).data ( "selector" ),$ ( section ).addClass ( "active" )) : $ ( b ).parent ().addClass ( $ ( b ).data ( "class" ) ) : $ ( b ).data ( "selector" ) ? (section = "." + $ ( this ).data ( "selector" ),$ ( section ).removeclass ( "active" )) : $ ( b ).parent ().removeclass ( $ ( b ).data ( "class" ) )

            } )
    },1e3 / 60 ),k = {
        init: function () {
            $ ( window ).on ( "scroll",i ),i (),$ ( window ).on ( "scroll",j ),j (),$ ( window ).on("scroll",s ),s ()
        }
    };
    b.exports = k
},{
        "./utils/isInViewport": 18,"./utils/throttle": 20,"./variables": 22
    } ],```