[Sections with internal scroll]

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. 

[Sections with internal scroll]

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

 

See the Pen vYLKXzr by hhkp12 (@hhkp12) on CodePen

[Sections with internal scroll]

The main sections look like this.

[Sections with internal scroll]

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.

↓

↓↓

[Start of Animation when an element has an active class]

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.

 

 

[Start of Animation when an element has an active class]

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

[Start of Animation when an element has an active class]

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.

[Start of Animation when an element has 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.