заблокировать эффект прокрутки на анимации GSAP без ScrollMagic - PullRequest
Новая
       9

заблокировать эффект прокрутки на анимации GSAP без ScrollMagic

0 голосов
/ 04 ноября 2019

Внутри моего элемента ".bike_image_wrapper", который становится активным во время прокрутки, является SVG, и я пытаюсь, в тот момент, когда у него есть активный класс, анимировать SVG. Как мне сообщить GSAP, когда начинать анимацию? поскольку активный класс появляется при прокрутке, он влияет на анимацию при каждой прокрутке. но мне нужна анимация, чтобы играть один раз с активным классом. Я не использую ScrollMagic

Вот код моей функции, возможно, это поможет понять, что я делаю неправильно. и каждый раз, когда я прокручиваю, он влияет на элемент SVG, запускает анимацию, не теряет ее один раз и ждет 

[ 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
    } ],```
...