Mamboleoo Posted December 26, 2020 Share Posted December 26, 2020 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 Link to comment Share on other sites More sharing options...
mikel Posted December 26, 2020 Share Posted December 26, 2020 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 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 26, 2020 Share Posted December 26, 2020 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: 2 Link to comment Share on other sites More sharing options...
Mamboleoo Posted December 26, 2020 Author Share Posted December 26, 2020 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 ✌ Link to comment Share on other sites More sharing options...
mikel Posted December 26, 2020 Share Posted December 26, 2020 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 3 Link to comment Share on other sites More sharing options...
Mamboleoo Posted December 27, 2020 Author Share Posted December 27, 2020 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 }); Link to comment Share on other sites More sharing options...
mikel Posted December 27, 2020 Share Posted December 27, 2020 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now