limbo Posted October 14, 2022 Share Posted October 14, 2022 I'm close here but can't get this over the line.. probably something very stupid (been a long day) The js doesn't fire correctly clicking the up arrow. Down works reasonably well... perhaps something in my approach with ScrollTo+Scrolltrigger hooks (using/updating data attr.). Also scrolltrigger doesn't update first slide data id when reaching the top (scrolling)... Anyone got any ideas? Any help would be hugely appreciated. See the Pen MWGxJax by liamcrean (@liamcrean) on CodePen Link to comment Share on other sites More sharing options...
alig01 Posted October 15, 2022 Share Posted October 15, 2022 Hey Due to the pin: true of the sections the upwards scrolling doesn't work properly anymore. You can work around it by specifying an offset so that the snapTo does the rest. Not sure if this is the right approach as I haven't had such a use case yet, but at least your current problems would be solved so you can continue. See the Pen JjvzvWM by alig01 (@alig01) on CodePen 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 15, 2022 Solution Share Posted October 15, 2022 Yeah, when you do a normal scrollTo tween, it just checks how far the element is from the top, so like @alig01 said that won't work if you've got pinning going on because that calculation would no longer be accurate. There's a helper function for a ScrollTrigger-aware way of determining the scroll position of an element in the docs: https://greensock.com/docs/v3/HelperFunctions#getScrollLookup I'm not sure why you're using data attributes to track the up/down values rather than simple JS variables, and I'd probably wire up things differently so the values flip when things are in the center (rather than waiting until it all settles in the final position), but I don't have time to rework it all for you. Here's a fork showing at least a band-aid for the issue you posted about: See the Pen JjvzaoJ?editors=1010 by GreenSock (@GreenSock) on CodePen Good luck! 1 Link to comment Share on other sites More sharing options...
limbo Posted October 15, 2022 Author Share Posted October 15, 2022 Thank you both for taking the time to look at this. Much appreciated (Especially on a saturday!) 1 hour ago, GreenSock said: when you do a normal scrollTo tween, it just checks how far the element is from the top, so like @alig01 said that won't work if you've got pinning going on because that calculation would no longer be accurate. This explains a LOT of headscratching. Makes total sense. Thanks :) Link to comment Share on other sites More sharing options...
Rodrigo Posted October 15, 2022 Share Posted October 15, 2022 Hi, I took a stab at this earlier but haven't been able to complete it. As Jack mentions I went for a simpler approach. Hopefully if you combine some parts of each codepen in thread you'll be able to solve your issue: See the Pen JjvzyXO by GreenSock (@GreenSock) on CodePen This is still missing some events to track usage of the scroll bar to move the content up and down. I hope that I can finish it either later today or at some point tomorrow. Let us know if you have any other questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
limbo Posted October 25, 2022 Author Share Posted October 25, 2022 Thanks all for the replies. An update on this one, as somebody might find it useful. See the Pen mdKbwJo by liamcrean (@liamcrean) on CodePen I decided to try and make as much of this native to CSS's Sticky and Scroll-Snap as they've excellent support and can degrade easily to normal scroll behaviour in IE. Also found that the approaches detailed above REALLY struggled with the resize issues you get with ScrollTrigger on iOS (nav bars hiding/showing) + the 1px JS hacks for content failed in places too. This approach still makes good use of scrollTrigger / scrollTo to enhance UI and give hooks for controls, but with less js overhead and a sprinkle of CSS layout tricks on content. 2 Link to comment Share on other sites More sharing options...
Cassie Posted October 25, 2022 Share Posted October 25, 2022 Nice job!! 1 Link to comment Share on other sites More sharing options...
limbo Posted January 14, 2023 Author Share Posted January 14, 2023 Thought it'd be good to see this as the final product: https://www.weareseventeen.com 2 Link to comment Share on other sites More sharing options...
GreenSock Posted January 14, 2023 Share Posted January 14, 2023 Nice work, @limbo! Thanks for sharing. 💚 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