Potential Resize Bug with ScrollTrigger

[JackW]

Hi all,

 

Having a persistent issue across a number of projects with ScrollTrigger layouts breaking after resizing the screen height. I've attached a codepen that demonstrates the issue we're having: 

 

To replicate:

1. Scroll down past the gray section until you can see the text fade in and the second section is locked.
2. Change the height by expanding the preview box vertically while looking at the locked text section. You can leave it at the new height or resize it back; it doesn't matter.
3. Scroll back up to the start of the locked section. You should see the text no longer fades in and starts later in its animation.
4. Refresh the window and the animation should be back to its normal state.

I'm not sure if we're doing something wrong here, or there's a bug. Invalidate On Refresh doesn't seem to help at all. I'm wondering if it's related to the section being 100vh.

 

I've also attached a zip with a demo project, which might be easier to debug.

 

Thanks in advance!

-Jack

demo.zip

See the Pen MWdrWBN by climber (@climber) on CodePen

[Cassie]

Hiya!

 

You just needed to specify a pinnedContainer because you were had a trigger inside an element that you'd pinned.
 

A few notes

 

- If you're just pinning an element you can use ScrollTrigger.create() - no need to make a timeline. Timelines are only useful if you're sequencing tweens.
- You're using a lot of fromTo tweens, fromTo tweens are only necessary when you need to set an explicit start and end position. If you have an element that's already at opacity:1, no need to do a "fromTo" from opacity 1 to opacity 0, you can just do a "to" opacity:0 - it will take the start position from the value that already exists on the elements

https://gsap.com/resources/mistakes/#using-fromto-when-from-or-to-would-work

- You also had a stagger here that was set to 0.0, so not doing anything, I removed that.

See the Pen eYaaBXg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Hope this helps!

[JackW]

Looks like that fixed the issue- thanks! Going to look over the code and apply that back to our current project.