difficulty refreshing scrolltrigger

[Astroboy]

Hi, I'm trying to figure out what I'm doing wrong in my attempts to "refresh" my gsap scrollTrigger. 

 

This scrollTrigger is set up to animate some titles on my page, but I'm having difficulties attaching a "refresh" function to an event listnener.

 

I've tried both both methods found here https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh() with no luck.. (the animations to not refresh and I notice no changes at all)

 

I'd greatly appreciate any help

 

    let gltl = gsap.timeline({
        scrollTrigger: {
          trigger: "#title1trig",
          onEnter: animate,
          once: true
        }
    });


    function animate() {    
    
        gsap.set('.title1Char', {
            transformOrigin: "center center 10px"
        });
        
        gsap.set('.title2Char', {
            transformOrigin: "center center 10px"
        });


        gltl.from('.title1Char', {
            rotationX: 190,
            y: 20,
            stagger: .05,
            duration: 3,
            ease: 'elastic(1.8, 110)'
        })
        
        gltl.from('.title2Char', {
            rotationX: 190,
            y: 20,
            stagger: .05,
            duration: 3.5,
            delay: -3,
            ease: 'elastic(1.8, 110)'
        })
    
    }

    refresh.addEventListener('click', () => {
    
        gltl.scrollTrigger.refresh();
    })

 

[GreenSock]

Welcome to the forums, @Astroboy!

 

13 minutes ago, Astroboy said:

I've tried both both methods found here https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh() with no luck.. (the animations to not refresh and I notice no changes at all)

 

Can you explain what you mean by "refresh"? ScrollTrigger.refresh() simply calculates the start/end positions of all the ScrollTriggers. Are you hoping to restart your animations or something? 

 

A minimal demo would significantly increase your chances of getting a solid answer  - we'd love to help.

[Astroboy]

4 minutes ago, GreenSock said:

Can you explain what you mean by "refresh"? ScrollTrigger.refresh() simply calculates the start/end positions of all the ScrollTriggers. Are you hoping to restart your animations or something? 

 

A minimal demo would significantly increase your chances of getting a solid answer  - we'd love to help.

Hi thanks for the reply. Sorry for the lack of detail.

 

 

By "refresh" I mean; say I scroll down through my page, and the scrollTrigger animates my titles in.. if I scroll back up to the top of the page and click a button, I want to attach a function to said button to 'restart' or 'refresh' or 'reset' my timeline... essentially have the scrollTrigger start from the beginning.. it would give the same effect as 'once: false' but unfortunately that is not an option for me.. The issue I have with restart() is it plays the animation right away, but I want it to wait until I hit the 'trigger' again

 

Sorry for the poor explanation.. I'm using swup.js and it causes a bunch of confusion and issues, I will work on creating a demo.. Thank you!

 

 

 

 

[GreenSock]

If I understood you correctly, this should work:

ScrollTrigger.create({
    trigger: "#title1trig",
    onEnter: animate
});

let gltl;

function animate() {
    if (!gltl) { // only run if there's no timeline defined.
        gsap.set('.title1Char, .title2Char', {
            transformOrigin: "center center 10px"
        });

        gltl = gsap.timeline()
        gltl.from('.title1Char', {
            rotationX: 190,
            y: 20,
            stagger: .05,
            duration: 3,
            ease: 'elastic(1.8, 110)'
        })

        gltl.from('.title2Char', {
            rotationX: 190,
            y: 20,
            stagger: .05,
            duration: 3.5,
            delay: -3,
            ease: 'elastic(1.8, 110)'
        });
    }
}

refresh.addEventListener('click', () => {
    if (gltl) { // if there's already a timeline defined, rewind it and kill it.
        gltl.progress(0).kill();
        gltl = null;
    }
    animate();
});

I assume you already know about toggleActions, right? If your goal is to just have it play when you scroll down, and then reset itself if the user scrolls backward past it, that's super simple to accomplish with toggleActions.

[Astroboy]

On 5/10/2021 at 4:36 PM, GreenSock said:

I assume you already know about toggleActions, right? If your goal is to just have it play when you scroll down, and then reset itself if the user scrolls backward past it, that's super simple to accomplish with toggleActions.

 

I didn't know about toggleActions.. thank you this works perfectly!