Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jh3y

Resetting ScrollTrigger + FLIP on window resize 🤔

Recommended Posts

Hey y'all!

 

Quick one with this pen. Using ScrollTrigger to scrub a timeline that uses FLIP to shift in and out the different sections. On window resize, how can you reset the `FLIP` positions?

 

I've tried a couple of different things but can't seem to find the one that should work and have left it as is with broken resizing 😅

 

- The `resize` handling is at the bottom. 

- `MAIN` is the timeline used for the FLIP transitions.

- `li` are all the list items being FLIPped.

 

I did think this was something with the ScrollTrigger. But, I think somewhere the FLIP settings get cached perhaps and I'm looking for some way to flush them perhaps?

 

Timing and snapping are out of scope here. But, I did have a bit of an issue getting them nailed but I don't think I'm quite sure how I wanted this one to feel on scroll. It was purely an idea I wanted to see working with FLIP 😁

 

See the Pen XWpvyxr by jh3y (@jh3y) on CodePen

Link to comment
Share on other sites

Howdy, @jh3y! I always love seeing your ambitious endeavors. 

 

Yeah, Flip.fit() instantly does its measurements - it's not as if it re-measures everything each time the tween plays or something. That'd kinda suck for performance, plus it wouldn't be a "true" replay if timelines shifted around their values and animated to new things each time they ran, you know? 

 

You could, of course, rework your animation logic so that it's literally calling functions that run the Flip.fit() stuff at the right times (like in a timeline or whatever). Or (better yet) you could drop all your timeline-creation stuff into a simple function that runs on "resize" events, and basically reverts everything and re-creates all those Flip.fit() calls at that time. You could store the current progress() of the animation, then revert, rebuild, and jump to that recorded progress value all in the "resize" event handler. 

 

If you still need some help, it'd be super duper amazingly helpful if you provided a minimal demo that only focuses on the particular challenge you're facing (the demo you provided has like 60+ flip calls, ScrollTrigger, and lots of other things going on). :)

 

Happy tweening!

Link to comment
Share on other sites

11 minutes ago, GreenSock said:

Howdy, @jh3y! I always love seeing your ambitious endeavors. 

 

Yeah, Flip.fit() instantly does its measurements - it's not as if it re-measures everything each time the tween plays or something. That'd kinda suck for performance, plus it wouldn't be a "true" replay if timelines shifted around their values and animated to new things each time they ran, you know? 

 

You could, of course, rework your animation logic so that it's literally calling functions that run the Flip.fit() stuff at the right times (like in a timeline or whatever). Or (better yet) you could drop all your timeline-creation stuff into a simple function that runs on "resize" events, and basically reverts everything and re-creates all those Flip.fit() calls at that time. You could store the current progress() of the animation, then revert, rebuild, and jump to that recorded progress value all in the "resize" event handler. 

 

If you still need some help, it'd be super duper amazingly helpful if you provided a minimal demo that only focuses on the particular challenge you're facing (the demo you provided has like 60+ flip calls, ScrollTrigger, and lots of other things going on). :)

 

Happy tweening!

 

Hey Jack @GreenSock

 

Yep, I never assumed it would be recalculating on each replay 😅 It would work similar to other plugins, etc.

 

My timelines were being generated in a function as were my flips 👍

 

But, that's the part that had tripped me up. The window resizes, I kill the timeline, and regenerate it within a debounced handler.

 

debounce(() => {
    // Timeline that was generated with a function
    MAIN.kill()
    // Clear all the Flip setting of initial positions
    gsap.set('li', { clearProps: 'all' })
    // Set them all again to the new positions of the things to Flip to.
    setFlips()
  	// Regenerate the timeline.
    MAIN = genFlips()
    // ScrollTrigger stuffz
    window.scrollTo(0, 0)
    TRIGGER.disable()
    gsap.delayedCall(1, TRIGGER.enable)
}, 250)

Storing the progress wouldn't be necessary as ScrollTrigger's refresh would assign the scrub to the correct position on the timeline 👍

 

But, what was missing was regenerating the loop head for ScrollTrigger to scrub the time. All I needed was to kill the loop head and regenerate it 👍

 

Fixed.

 

See the Pen XWpvyxr by jh3y (@jh3y) on CodePen

  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×