Force scrollTrigger to activate when reaching end of page

[Mamboleoo]

Ola!

I'm working on some basic fade-in effect with scrollTrigger and I'm encountering an issue with the last component not being displayed when reaching the end of the page.

As  you can see from the markers, this is not an issue with the plugin, the start position of the last section is never reaching the scroll-start.

 

To avoid this issue I've added a listener on the scroll and when reaching the end of the page, I'm forcing all the tweens to be played.

Would there be a better alternative to this? 

I was looking for a method from ScrollTrigger to activate it manually (e.g. tween.scrollTrigger.force()) because now the tween is being played (in my Codepen) but scrollTrigger is not cleared out.

 

Happy holidays 🎄

Mamboleoo

See the Pen ZEpaxoN by Mamboleoo (@Mamboleoo) on CodePen

[mikel]

Hey @Mamboleoo,

 

You could set the body height so that the last section reaches your desired start trigger.
Or you could set a different start trigger for the last section: e.g. start: 'bottom 100%'.

 

See the Pen a532e30a53cc516abeec46da41c12a33 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[ZachSaucier]

In most cases I'd opt for mikel's solution of using a different start for the last ScrollTrigger. If you need to detect this situation more dynamically and change the end point I showed how to do that here:

 

[Mamboleoo]

Thanks for your help,

I'll go with dynamic solution as my last section could be 3000px tall, and I don't want the user to scroll all the way to the bottom to see that last part

 

Enjoy your weekend ✌

[mikel]

Hey @Mamboleoo,

 

It's easy to adjust the start trigger to whatever for the last section.

 

See the Pen NWRwzXb?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy testing ...

Mikel

 

[Mamboleoo]

The issue is that I'm not sure only the last section will have the issue.

If you set the last section height to 100px, now the last two sections are never fading-in 😕

See the Pen LYROwWL by Mamboleoo (@Mamboleoo) on CodePen

 

Also I may have images in one of those sections, so the height can be wrong on page load.

I guess this would work (if I had event listener to loaded images)

ScrollTrigger.create({
  trigger: "body",
  start: "bottom bottom",
  onEnter: triggerAllLeftTweens
});

 

[mikel]

Hey @Mamboleoo

 

It may be a logical aspect.
When the 4th section fades in, its bottom is at 80% of the window height (startTrigger 50% + 30vh).
Logically the window height may only be max 500px so that the 5th section with only 100px height can still be scrolled.
Scrolling needs space.

 

See the Pen 427889ba98b5d67f8449adb2ff4df2ba by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel