toosumit Posted June 7, 2021 Share Posted June 7, 2021 Hey guys, I am trying to tell a story which can be achieved through simple slides and carousels, but I want to add some life to it. I came across a page that does exactly what I am trying to do - https://www.prevint.pt/. Fell in love with this implementation. From the source I can see that it has a wide <ul> with 100vw <li> sections and on scroll the <ul> is translated left ( amount = width of section ). Seemed life a fairly straightforward situation and I am sure that this page is using GSAP. But I am unable to figure out few things: Should I use any third party scroll library along with GSAP to do horizontal scroll ( as in the reference site there are no scroll bars ). Animate the<ul> to translate left on first mouse-wheel event and ignore subsequent mouse-wheel events until animation/transition is complete. Controlling/Scrubbing the slides with the custom navigation at the bottom( but that's secondary concern here). I have tried different approaches but none of them could do this. The attached codepen is the basic one with snapping sections but they don't snap immediately 😕. Can someone please point me in the right direction.UPDATE: Attached codepen with the solution. See the Pen ExWLxyp by spark25 (@spark25) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted June 7, 2021 Share Posted June 7, 2021 This isn't actually horizontal scrolling. It looks like that site is listening for touch or mouse wheel events and then advancing an animation. I would probably start off by creating the animation timeline. Then once that was looking how I wanted I'd use event listeners to listen for the right events and then advance or reverse the timeline as needed. 2 1 Link to comment Share on other sites More sharing options...
Solution akapowl Posted June 7, 2021 Solution Share Posted June 7, 2021 13 minutes ago, Cassie said: This isn't actually horizontal scrolling. It looks like that site is listening for touch or mouse wheel events and then advancing an animation. Yup, I'm with Cassie on this. @PointC actually made some neat sliders some time ago - horizontal and vertical - that could maybe serve as inspiration or a starting point at least. See the Pen YRzRyM by PointC (@PointC) on CodePen See the Pen MzWzyv by PointC (@PointC) on CodePen 3 1 Link to comment Share on other sites More sharing options...
toosumit Posted June 8, 2021 Author Share Posted June 8, 2021 17 hours ago, Cassie said: I would probably start off by creating the animation timeline. Then once that was looking how I wanted I'd use event listeners to listen for the right events and then advance or reverse the timeline as needed. Thanks @Cassie for this direction. It never crossed my mind to build a timeline first. Got the desired result. Btw, big fan of your work. Discovered you 2 weeks back and have binged almost all your talks. I even used the color plum in my pen😬. Keep inspiring. 17 hours ago, akapowl said: @PointC actually made some neat sliders some time ago - horizontal and vertical - that could maybe serve as inspiration or a starting point at least. Thanks @akapowl , made the final solution using this reference. 😎 3 Link to comment Share on other sites More sharing options...
Cassie Posted June 8, 2021 Share Posted June 8, 2021 Timeline first and then hooking it up is almost always the way to go! Glad we could help! 3 hours ago, toosumit said: Btw, big fan of your work. Discovered you 2 weeks back and have binged almost all your talks. I even used the color plum in my pen😬. Keep inspiring. And thanks for this. ☺️I've got two talks this week - I sometimes get a bit stressed in advance and forget to focus on why I do it. Super happy to hear they've inspired you. Worth the nerves! 3 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