hhkp

Thanks, Zach. I'm gonna try to apply your option. The problem is to move to the next section because the section position in the fixed position and the sections are not lined up in a column.

Hey, guys. I'm trying to do an animation using scrollTrigger. I'm trying to create an animation of several identical sections that have their own scrolling so that when one section finishes the animation then the scrolling page will go to the next section and play the same animation, etc. I really wanted to try out the scrollTrigger, but I'm afraid I don't have enough experience with it. Any help ... Thanks https://codepen.io/hhkp12/pen/vYLKXzr

The main sections look like this.

Hey, guys. Thanks to everyone who created this wonderful scrollTrigger. How about a few scrolls... scrolling in another scrolls ...there are three sections, and there are three more sections in the skin that need to be animated for the scroll. I'm sure ScrollTrigger can handle that, but what tips will be at the start... ? here's a example. ↓ example.mp4 ↓↓

https://codepen.io/hhkp12/pen/MWWQOOW 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 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 } ],

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.

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.