Resizing A ScrollTrigger Animation

[IfThen]

Having some trouble getting a Scrolltrigger animation adapting to screen size changes. 

 

• There are four icons equally spaced across the top of the page using flexbox, which are part of the site's nav.
• When the page loads, these icons start out scaled up and placed at four corners of the viewport.
• As the user scrolls down, each icon scales down and moves into place where flexbox has positioned them.

 

This demo I've put together is only a part of the full animation (which also includes photos scrolling by), but is pretty much doing what it should...except that it breaks on viewport resize. 

 

I had originally built this with just Scrolltrigger and a regular GSAP timeline, but was struggling with getting the positioning right, due to needing the final position to be dictated by flexbox. So when I learned about Flip, it seemed like a good solution. And I think I'm on the right track, but willing to accept that I'm going about it all wrong. 

 

I've tried solutions like this one but just couldn't get it worked out. Appreciate any thoughts anyone has!

 

-- Andrew

 

PS: There is also an animatic that shows what the final animation should do, just to help visualize it.

 

See the Pen b9777f50d18f05ab640971960483b152 by AtlantaJones (@AtlantaJones) on CodePen

[Rodrigo]

Hi @IfThen and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

Maybe you're looking for something like this example:

See the Pen bGxOjeP by GreenSock (@GreenSock) on CodePen

 

Here is the explanation from a similar thread:

 

Hopefully this helps.

Happy Tweening!

[IfThen]

2 hours ago, Rodrigo said:

First thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

Maybe you're looking for something like this example:

 

Funnily enough, I'd seen that post and tried something similar. I'll read up on what gsap.context does and try it again. Will report back in the morning.

 

Thanks!

--Andrew

 

PS: And joining Club GreenSock was a no-brainer for us  

[IfThen]

Okay, I finally got it sorted out, using that post for reference. I'm still not sure why resetting props and re-attaching that .initial class was necessary, but I'm not going to question it at this point. Any additional thoughts or advice are welcome. 

 

See the Pen 25f44d5fff94a234b941f4ef60a862d7 by AtlantaJones (@AtlantaJones) on CodePen

 

Thanks!

--Andrew

 

[Rodrigo]

Hi Andrew,

 

Great to hear that you got it working, looks really nice!

 

The reason for that particular approach is that when you first create the animation you record the state of the icons at a specific screen size using Flip.getState(), then the animation is controlled using ScrollTrigger. What happens when the screen size changes? Do you record the state again? Nope, that's when everything goes wrong. While ScrollTrigger runs all the calculations again the state you have based on Flip.getState() has the values for the icons for the previous size of the screen, not the current one, hence everything goes bananas. So basically you need to do everything again from scratch in order to have an animation that works according to the new screen size.

 

Hopefully this clear things up.

Happy Tweening!

[IfThen]

On 5/12/2023 at 6:23 PM, Rodrigo said:

Hopefully this clear things up.

Happy Tweening!

 

Makes total sense (now)! Thanks again.

--Andrew