Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hhkp

Start of Animation when an element has an active class

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

  • Like 2
  • Thanks 1

Share this post


Link to post
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
    } ],

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

 

 


 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×