AkhilRaja Posted January 3, 2022 Share Posted January 3, 2022 i have this horizontal scrolling website with different width per sections, what im trying to do is that when i stop scrolling it should scroll snap at the center of the current section, for visual i added span with 100vw with black color opacity box. See the Pen poWVeKe by AkhilRaja (@AkhilRaja) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted January 3, 2022 Share Posted January 3, 2022 Hi Akhil, Check out this thread and all the links in it. 3 Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 4, 2022 Author Share Posted January 4, 2022 i cant find what i was looking for in the given link Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 4, 2022 Author Share Posted January 4, 2022 this is what i want to dohttps://developers.google.com/web/updates/2018/07/css-scroll-snap#example_-_horizontal_gallery here its stop at the centerhttps://snap.glitch.me/carousel.html its css snap but i want to do this with scrolltriger snap Link to comment Share on other sites More sharing options...
Cassie Posted January 4, 2022 Share Posted January 4, 2022 You'll be able to put together a solution if you read through that thread Blake posted! Here's the specific sub-thread that will help - And the specific snippet - although this will need to be tweaked for horizontal scrolling let heights = [356, 129, 293, 188]; let totalHeight = 0; let prev = 0; heights.forEach(height => totalHeight += height); let snapArray = heights.map((height, i) => { let current = (prev + height / 2) / totalHeight; prev += height; return current; }); And here's the post where I did that - although this is aligning to the left instead of center. If you read through those examples you'll have your solution. Why don't you try to implement it? If you get stuck, feel free to post a demo of what you've tried and we'll happily take a look. 3 Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 4, 2022 Author Share Posted January 4, 2022 i try to read them and understand them but its too advance for me i cant understand it 😭 Link to comment Share on other sites More sharing options...
OSUblake Posted January 4, 2022 Share Posted January 4, 2022 Just give it a shot, and if you get stuck, we can nudge you in the right direction. Instead of using height, you would use width. 1 Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 5, 2022 Author Share Posted January 5, 2022 this is the best i can do and im also bad in maths class Link to comment Share on other sites More sharing options...
OSUblake Posted January 5, 2022 Share Posted January 5, 2022 How about this? See the Pen xxXzjzP by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 6, 2022 Author Share Posted January 6, 2022 thank you so much @OSUblake its working now and i didn't think of this "2 - window.innerWidth / 2", it was crazy it work like this. let current = (prev + width / 2 - centerX) / totalWidth; Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 6, 2022 Author Share Posted January 6, 2022 i have few more questions i need some time but for now thank you on helping me on this @OSUblake and @Cassie 1 Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 6, 2022 Author Share Posted January 6, 2022 now i need help with two things 1 -how can i do this like add ease: sine.inOut with snapArray() funtion snap: { snapArray(), delay: 0, ease: "sine.inOut" } 2 -how can i add start: "16.7% 100%", end: "16.7% 0%", dynamically to active thisSection, im trying to add start and end at left side of 100vw section Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 6, 2022 Author Share Posted January 6, 2022 for example what i trying to achieve is set start: "16.7% 100%", end: "16.7% 0%", at start left side of Section B Link to comment Share on other sites More sharing options...
Cassie Posted January 6, 2022 Share Posted January 6, 2022 Hey @AkhilRaja So you'll need to add snapTo to that object. snap: { snapTo: snapArray(), delay: 0, ease: "sine.inOut" } Quote 2 -how can i add start: "16.7% 100%", end: "16.7% 0%", dynamically to active thisSection, im trying to add start and end at left side of 100vw section I'm afraid I don't understand this - could you explain without using GSAP/coding terminology? Just explain in words what you want to happen visually. Thanks!✨ 1 Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 6, 2022 Author Share Posted January 6, 2022 40 minutes ago, Cassie said: I'm afraid I don't understand this - could you explain without using GSAP/coding terminology? Just explain in words what you want to happen visually. ok so if you open my codepen website then scroll to section B then look at left side, i added START and END trigger on the left side of sectionB sectionB has width of 150vw and span width is 100vw, what i want to do is add START and END trigger on the left side of SPAN element. i can do this manually for all the sections but i want to know is there any way of doing it dynamically with all the sections of different width sizes Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 6, 2022 Author Share Posted January 6, 2022 46 minutes ago, Cassie said: So you'll need to add snapTo to that object. i dont understand by add a function to an object, its advance stuff for me 😭 Link to comment Share on other sites More sharing options...
Cassie Posted January 6, 2022 Share Posted January 6, 2022 I added the snippet you need in the comment! 👇🏻 snap: { snapTo: snapArray(), delay: 0, ease: "sine.inOut" } 1 Link to comment Share on other sites More sharing options...
Cassie Posted January 6, 2022 Share Posted January 6, 2022 51 minutes ago, AkhilRaja said: i can do this manually for all the sections but i want to know is there any way of doing it dynamically with all the sections of different width sizes Good news - Sure you can definitely do it dynamically Bad news - It will definitely involve writing some code to work out that position. The type of code involving maths. 1 Link to comment Share on other sites More sharing options...
Cassie Posted January 6, 2022 Share Posted January 6, 2022 Oh wait! No, even better news - I'm wrong. You can in fact change the trigger element. 🥳 See the Pen ZEXjOPg?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
AkhilRaja Posted January 7, 2022 Author Share Posted January 7, 2022 thats so amazing that we can use trigger: span, actually my mind is still processing horizontal scroll without this new feature of containerAnimation: scrollTrigger, thats why i didnt think of this Link to comment Share on other sites More sharing options...
Solution AkhilRaja Posted January 7, 2022 Author Solution Share Posted January 7, 2022 i want to thanks @OSUblake and @Cassie for always helping me learning new things in GSAP and thanks everyone in the gsap family and community, you guys are amazing. 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