Jump to content
Search Community

Start of Animation when an element has an active class

hhkp test
Moderator Tag

Recommended Posts

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.

Link to comment
Share on other sites

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:

 

  • Thanks 1
Link to comment
Share on other sites

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
    } ],
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...