n00bie Posted February 20 Share Posted February 20 Hello, I spent a lot of hours on this and I can't find the solution so I'm turning this over this active community to help me out. Basically I know the problem comes from the "end" parameter after playing around but I'm puzzled. I would like for when my horizontal scrolling section is done scrolling, to have enough time to see the "GSAP Left to Right" section's animations. If I scroll super slowly I can see them, however if I scroll very fast I can't. Any idea on how to solve this? Thanks! Also, any way to have my "Item 7" to show up inside the container, depending on the resolution it's not always fully visible 😇 See the Pen ExMJjeG by theintegrateur (@theintegrateur) on CodePen Link to comment Share on other sites More sharing options...
ryan_labar Posted February 20 Share Posted February 20 2 hours ago, n00bie said: I would like for when my horizontal scrolling section is done scrolling, to have enough time to see the "GSAP Left to Right" section's animations. If I scroll super slowly I can see them, however if I scroll very fast I can't. Any idea on how to solve this? Thanks! scrub: true is one way to solve this. You'll loose the smoothing effect, but it'll tie the animation directly to the scroll, otherwise it's taking .8s for the animation to catch up, and if you scroll too fast, you're missing the end. 2 hours ago, n00bie said: Also, any way to have my "Item 7" to show up inside the container, depending on the resolution it's not always fully visible Your math isn't accounting for the 64px gap. You'll want your math to be: (offerItems[0].offsetWidth * offerItems.length) - (64 * (offerItems.length - 1)) 2 Link to comment Share on other sites More sharing options...
n00bie Posted February 20 Author Share Posted February 20 11 hours ago, ryan_labar said: scrub: true is one way to solve this. You'll loose the smoothing effect, but it'll tie the animation directly to the scroll, otherwise it's taking .8s for the animation to catch up, and if you scroll too fast, you're missing the end. Your math isn't accounting for the 64px gap. You'll want your math to be: (offerItems[0].offsetWidth * offerItems.length) - (64 * (offerItems.length - 1)) Hey @ryan_labar thank you so much! For the spacing, instead of using flex's gap, should I use padding or margin so that it is calculated in the offsetWidth and so, if the designer want to change the spacing from 64px to something else, I don't have to play around in the JS? I updated the Pen but I don't seem to get the math working, on desktop view it looks good, but smaller, the last item is not fully visible. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted February 20 Solution Share Posted February 20 Hi, In this case is better to use the container of the horizontal list and the list's scrollWidth property: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth Here is a fork of your demo: See the Pen KKEYZow by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
n00bie Posted February 20 Author Share Posted February 20 @Rodrigo if I could kiss you, I would, thank you so much it looks like it's working with you and Ryan's help. Last detail, If I want the scroll to be slower, "duration" doesn't seem to impact anything, I guess it would be to add scrub: 1 but that will break the animation coming after this one like Ryan mentionned, any workaround or it's just the natural scroll speed that is applied? Link to comment Share on other sites More sharing options...
Rodrigo Posted February 20 Share Posted February 20 This video @Cassie made should explain how to resolve this: Happy Tweening! 1 Link to comment Share on other sites More sharing options...
n00bie Posted February 20 Author Share Posted February 20 @Rodrigo It indeed answered my question, however when changing the "end" parameter to let's say "+=2000px" instead of "+=bottom 50%" the next section's animation already occured. If you could point me in the right direction that'd be awesome! Link to comment Share on other sites More sharing options...
Rodrigo Posted February 20 Share Posted February 20 Hi, That's because you're creating the ScrollTrigger instances in the reversed order: https://gsap.com/resources/st-mistakes/#creating-scrolltriggers-out-of-order I updated the previous demo: See the Pen KKEYZow by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
n00bie Posted February 20 Author Share Posted February 20 @Rodrigo meaning that I need to have my animations in order in the JS file for them to work correctly? 😮 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 20 Share Posted February 20 Yep, as mentioned in the learning center resource I linked, create the ScrollTrigger instances in the order they appear on the screen. Happy Tweening! Link to comment Share on other sites More sharing options...
n00bie Posted February 20 Author Share Posted February 20 @Rodrigo again thank you so much for all the help, I will continue my Creative Coding classes and learn as much as I can! ❤️ Link to comment Share on other sites More sharing options...
Rodrigo Posted February 20 Share Posted February 20 Ahh yeah no better GSAP teacher than @Carl! 1 Link to comment Share on other sites More sharing options...
n00bie Posted February 20 Author Share Posted February 20 Good afternoon @Rodrigo, last question (I swear haha), I put to good use the demo into my real world project, however when resizing the window and putting it back to full screen, I can't seem to be able to go back to the top of the page and everything looks wonky. Do I need a resize function? https://www.loom.com/share/b8b306e9455b4a458419a049e54a3ef7 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 21 Share Posted February 21 Hi, Sorry to hear about the issues, but without a minimal demo there is not a lot we can do. As you can see the demo I created works as expected and nothing breaks on window resize, so something else must be interfering with your app and is breaking things upon window resize. Happy Tweening! Link to comment Share on other sites More sharing options...
n00bie Posted February 23 Author Share Posted February 23 Good morning @Rodrigo, the problem seems to be happening only if "invalidateOnRefresh" is set to true. On my local development site, I only kept the GSAP code for my animation (no other JS) and the problem is still happening. I'll try to dig deeper... Thanks! Edit: Even with another pinned section the problem occurs it's super weird, the pinned section on resize gets repinned to almost the top of the body. https://www.loom.com/share/674c773293d841faa1d66d75e5537e14 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 23 Share Posted February 23 Hi, Once again, without a minimal demo there is not a lot we can do, a short video and a quick glance at the code doesn't tell us anything, sorry. Happy Tweening! 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