hhkp Posted November 1, 2019 Share Posted November 1, 2019 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 More sharing options...
ZachSaucier Posted November 1, 2019 Share Posted November 1, 2019 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: 1 Link to comment Share on other sites More sharing options...
hhkp Posted November 2, 2019 Author Share Posted November 2, 2019 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. Link to comment Share on other sites More sharing options...
mikel Posted November 2, 2019 Share Posted November 2, 2019 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 2 1 Link to comment Share on other sites More sharing options...
hhkp Posted November 3, 2019 Author Share Posted November 3, 2019 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 More sharing options...
ZachSaucier Posted November 4, 2019 Share Posted November 4, 2019 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 More sharing options...
hhkp Posted November 4, 2019 Author Share Posted November 4, 2019 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 4, 2019 Share Posted November 4, 2019 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 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now