Problem recalculating scrollTriger values on resize window

[angelokeirsebilck]

Hi,

 

So basically I have this animation that moves a rectangle alongside text from left to right and vice versa. The space between the text blocks are 'ghost' divs so the rectangle has space to move to the other side without overlapping the text.

The code might seem abit much to understand at first so here is a little explanation:

At start in the useEffect hook i set the height for the ghost divs by calculating the projects container width and deviding by 2. So these ghost divs can be recalculated later when resizing window.

After I init the timeline function where I loop over the projects and check wether its the first, even, odd or last project.
In each part I set different start and end trigger properties on the scrollTrigger. Example: for the first project i set the start trigger on the bottom of the project and end trigger on the bottom of the first ghost divs. The y value here is the top of the first ghost div (calculated from <ProjectsContainer>)

When the animation is finished, i run the goRight function where i move the rectangle to right and on EnterBack i run goLeft function.

This all seems to work but problems start when I resize the window. When resize triggers i run reCalclate function where i set the timelines array to zero and recalculate the ghost divs height + run timeline again. This is the moment where it bugs. Can't seem to find how to fix this.

Does anyone have a idea of how to do this? Or a different approach for this kind of animation?

Thanks in advance

 

See the Pen MWbbvMO by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

[ZachSaucier]

Hey angelokeirsebilck. You've got quite a bit of code and React-y-ness in your demo. My guess is that you need to use functional values for your timeline properties that change on resize and then use invalidateOnRefresh: true on your ScrollTriggers. You might also need to be careful about when you're sizing your spacer elements. Maybe it'd help to resize them on refreshInit instead? The React-y-ness of your code makes it a bit harder to wrap my mind around. 

 

Here's how I'd approach this sort of thing in case it's helpful:

• Don't use spacer divs. I'd just increase the height of the sections/containers instead. And optimally I wouldn't touch the height with JS - it'd just be set by CSS.
• Have one ScrollTrigger and timeline that controls all of the positioning of the squircle. To do that, you need to calculate:
  • The distance the squircle needs to travel in each section (end position minus start position) and
  • The proportion of each section compared to the total duration of the timeline. This is simply the total scroll distance of each section divided by the total scroll distance of your ScrollTrigger.
• You also need tweens to transition between left and right sides. 

Another option instead of animating x and y would be to create an SVG path and use that as a MotionPath. That'd make it easier to add some little curves and you could be more precise in how the squircle is moved between sections.

 

Minor note: Instead of rotate: '3deg' you could just say rotate: 3.

[angelokeirsebilck]

Hi Zach,

 

Thanks for the fast reply!

 

With your tips I kinda got it semi-working.

Things I did: 

• Removed window on resize function and replaced with initRefresh
• Removed calling the timeline() function again in this initRefresh
• Added invalidateOnRefresh: true in all scrollTriggers
• Added functional values for y and x

Most important part I think here was removing calling the timeline() function again . Because resizing window automatically recalculates scrolltrigger values.

Only problems that occurs now, if I resize window when my scroll postition (scroller-start and scroller-end is always center of window) is between the 2nd timeline or last timeline the first timeline is bugged (does not go up anymore, or goes down). However if i resize window when scroll position is between first timeline everything seems to readjust fine. Any idea on this?

See the Pen MWbbvMO?editors=0010 by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

 

Using MotionPath plugin also came to my mind. Lets say i'd use this plugin to create the animation. How can I manage the svg path when my windows resizes?

 

On the side got another question. I am using gatsby + a page transition plugin . I read on most common problems for scrollTrigger I need to destoy and re-create the scrolltriggers manually. This worked, killed all scrolltrigger instances on page leave and enabled all on page enter. Problem is that the global ScrollTrigger.addEventListener 'initRefresh' (the one i used above) does not get destroyed and re-created. 

 

Btw, greensock is amazing.

 

Thanks 
 

[ZachSaucier]

You have a bit going on... I'm a bit surprised why you need four gsap.timeline()s inside of your timeline function for only three sections... My guess is that there's a logical issue somewhere in that function.

 

8 hours ago, angelokeirsebilck said:

Using MotionPath plugin also came to my mind. Lets say i'd use this plugin to create the animation. How can I manage the svg path when my windows resizes?

There are different ways to handle it. You could set it up as one big SVG with multiple paths inside of it (which is probably what I would do), size the SVG based on the window, then when it resizes you just recreate the MotionPaths based on the new SVG size. Alternatively you could have an SVG for each section and each left to right transition point, but that might be even harder to manage than what you're currently doing.

 

8 hours ago, angelokeirsebilck said:

Problem is that the global ScrollTrigger.addEventListener 'initRefresh' (the one i used above) does not get destroyed and re-created. 

That's what .removeEventListener() is for. But you might not even need to remove it, you might just avoid re-creating it, if your variable references inside of the function still work.

 

8 hours ago, angelokeirsebilck said:

Btw, greensock is amazing.

We're so glad you think so!

[angelokeirsebilck]

28 minutes ago, ZachSaucier said:

You have a bit going on... I'm a bit surprised why you need four gsap.timeline()s inside of your timeline function for only three sections... My guess is that there's a logical issue somewhere in that function.

Indeed.. I refactored the code to using only 1 timeline and now the animation is much smoother and without bugs.

 

31 minutes ago, ZachSaucier said:

That's what .removeEventListener() is for. But you might not even need to remove it, you might just avoid re-creating it, if your variable references inside of the function still work.

 

Ah yes, makes sense. Thanks for the help!