Stop content moving out of alignment on window resize

[Jake Snellin]

https://stackblitzstartersnkxswz-m4jx--3000--09144545.local-corp.webcontainer.io/

 

Hi there! I have made a minimal demo demonstrating the issue I'm having. I'm attempting to move a circle from its position at the top of the page to the position of a square further down below some text. The circle reaches the target fine, however whenever I resize the window the main containers height changes  causing the circle to jump out of alignment. How can I prevent the circle from moving up and down during the animation on window resize? I've tried using invalidateOnRefresh and functional values hoping these would help reset the circles position. Using these does update the scrolltrigger end marker, however the content still moves. I'm wondering if this due to the way I have structured the code and the css using absolutely positioned divs? I want to keep the text responsive, without resorting to a fixed width container. I'm new to gsap and loving it so far. Any help would be greatly appreciated! Look forward to hearing from you. 

[Rodrigo]

Hi @Jake Snellin and welcome to the GSAP forums!

 

The demo URL you provided is throwing a connect error so please review it and provide a link to the editable Stackblitz, those are the ones that are actually useful for us.

 

Finally based on what I can get from the context of your question, maybe using the Flip Plugin in combination with ScrollTrigger could be what you're looking for. Take a look at these demos:

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

 

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

 

And also look at this thread and the codepen in it:

 

Hopefully this helps.

Happy Tweening!

[Jake Snellin]

https://stackblitz.com/edit/stackblitz-starters-bp9wad?file=app%2Fpage.tsx

 

Hi Rodrigo. Thanks for your reply and the helpful demos. I have provided the editor link above. I hope this works. The animation is a little more elaborate than before, with the circle exiting the viewport and then remerging further down when it meets an animated svg. The screen resizing is still the issue here with the circle moving after reaching it's target. Would you recommend flip still as the correct approach given the animation is a little more complex? Thanks for your help! Jake

[Rodrigo]

Hi Jake and sorry for the delay in answering, this one slipped through the cracks.

 

I don't have the time to create a fully working react app of this but I created this codepen demo using the approach Jack created in the link I posted in my previous post:

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

 

As you can see is far simpler and it works quite fine with resizes.

 

Hopefully this is enough to get you started.

Happy Tweening!

[Rodrigo]

Hey Jake!

 

@GreenSock came up with another way to achieve the same effect that is simpler and the code doesn't need the two set() instances I came up with:

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

 

Happy Tweening!

[Jake Snellin]

Thanks @Rodrigo & @GreenSock The demos have been a great help. Everything is running smoothly now. All the best!