Start of Animation when an element has an active class

[hhkp]

Hello, friends
don't take my funny question strictly, I'm just a green newbie.
Inside My element, which becomes active during scrolling, is SVG, and I try at the moment when it has an active class to animate SVG.
How do I tell GSAP when to start an animation?
Thanks in advance to all V.

[ZachSaucier]

Hey hhkp and welcome to the GreenSock forums.

 

You should be able to fire off your GSAP animation inside of the same function where you add the active class. Maybe the getting started post below can help you:

 

Besides that, it would be helpful if you posted a minimal demo of your project so far including what you're having trouble with. The thread below provides more info on how to do that:

 

[hhkp]

everything is correct, since the active class appears by scrolling, it affects the animation every time you scroll. but I need the animation to lose once with an active class.

[mikel]

Hey @hhkp,

 

Since you do not show your case live in a CodePen, I guess:
If you use ScrollMagic - uncomment line 19.
The magic code is reverse: false.

 

See the Pen NmVNpd by mikeK (@mikeK) on CodePen.

 

Or if its this constellation - just invalidate the timeline

 

See the Pen bRByJQ by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

[hhkp]

I do not use ScrollMagic

Unfortunately I can’t demonstrate this in codpen.
here is the code of my function, maybe this will help to understand what I'm doing wrong.

 

 

and every time I scroll the SVG element starting animation instead of losing once and waiting

 

 

[ 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
    } ],

[ZachSaucier]

On 11/3/2019 at 7:54 AM, hhkp said:

Unfortunately I can’t demonstrate this in codpen.

How about you make a minimal recreation of the situation in CodePen? That way you're not breaking any NDAs or anything like that. It's pretty difficult for us to understand the situation and help with just the code and description that you have provided thus far.

[hhkp]

See the Pen MWWQOOW by hhkp12 (@hhkp12) on CodePen.

This is an example of the animation that I need, but on the site it works twice in a row, and every time I scroll it, it starts again.
maybe I'm calling GSAP in the wrong place.

 

 

[ZachSaucier]

34 minutes ago, hhkp said:

This is an example of the animation that I need, but on the site it works twice in a row, and every time I scroll it, it starts again.
maybe I'm calling GSAP in the wrong place.

I'm not sure what you're trying to accomplish. Can you try rephrasing your goal? 

Are you wanting something like this?

See the Pen zYYRjpp?editors=0010 by GreenSock (@GreenSock) on CodePen.