Gsap scroll trigger firing at inconsistent points

[SWALKER]

I am using scrolltrigger to animate the way the sections (the coloured blocks with images) appear on screen.

 

It is working BUT it's really inconsistent and I can't work out why. 6 or 7 out of 10 times it's perfect but sometimes the right hand boxes switch from position relative to fixed to early.

What am I doing wrong?

I have been fiddling with it for a week so any help would be greatly received

See the Pen dymwbBP by shereewalker (@shereewalker) on CodePen

[GSAP Helper]

Hi there!

We're struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here's some tips that will increase your chance of getting a solid answer!
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code necessary to show the issue.

 

If you are not receiving a response, try to reduce the code in your demo and clarify your question using these steps.

[daniel.mt]

Hey,

 

Tested your solution and I can't replicate your problem. Did you try it outside codepen as well ? Here is a simpler solution: 

 

See the Pen e683799bbcade7f1e4ccfebdcefdea22 by danielmtd (@danielmtd) on CodePen

[SWALKER]

Hi Daniel - you can see the issue here https://eei.shereewalker.com/

I will try your solution though!

[daniel.mt]

I can see that you're changing the height of log-book-left-side on resize. This may be the issue and the solution is to call the refresh method after you changed the height of the element. The method is: ScrollTrigger.refresh()

 

Please note that if you add dynamic elements / change the height of the elements and this causes the layout to grow / shrink you need to recalculate the start / end markers.

 

Here is a more detailed explanation: https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

[SWALKER]

Hi Daniel

 

Thanks so much for your help. For some reason when I replace my js with yours, nothing happens - as in, all effects are gone.

I hope I have understood correctly, but I have added ScrollTrigger.refresh(); at the end of my js file after all my GSAP items - is that right?

[daniel.mt]

Hey Swalker,

 

You need to add ScrollTrigger.refresh() in the callback where you change the height of that/those element(s).

 

Here is an example of what happens when you change the height of an element without triggering the refresh method and with refresh method:

 

See the Pen e683799bbcade7f1e4ccfebdcefdea22 by danielmtd (@danielmtd) on CodePen

 

As for the replacement. I don't quite know the whole context on what you have in there. In the codepen I just refactored your tweens in a foreach loop. You can revert it back if this causes issues.