JoeH Posted March 26, 2022 Share Posted March 26, 2022 Hi, I was hoping someone might point me in the right direction. I am creating a horizontal scroll of various sections, see this for my basic setup - My goal is to when someone clicks on one of the sections animate it to be full width, and center. I have animated it full width no problem by just doing function sectionClick(el) { TweenLite.to(el.target, {width: window.innerWidth}) } But I am not sure how to animate the pin so that it is centered. The end position should be the section is full width and only it is visible. Hope this makes sense. Thanks See the Pen ZEpNLZa by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted March 26, 2022 Share Posted March 26, 2022 Hi there @JoeH, You've linked to one of our pens here, could you update this with your logic and click event so we can see what you're attempting a little clearer? 1 Link to comment Share on other sites More sharing options...
JoeH Posted March 26, 2022 Author Share Posted March 26, 2022 11 minutes ago, Cassie said: Hi there @JoeH, You've linked to one of our pens here, could you update this with your logic and click event so we can see what you're attempting a little clearer? Sorry yes. Here is my forked version. As you can see if you immediately click the first section it works as it should. Click any other section and it expands, but I'm not sure how to animate it to be centered. See the Pen xxpqYOY by orionJoe (@orionJoe) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted March 26, 2022 Share Posted March 26, 2022 Maybe someone else has some ideas, but I'm not quite certain how you'd approach this by animating the width and the position at the same time. You need to know the size of the container and the position of that section in order to animate to it, but if it's animating to that section when the size is also animating then that size is constantly changing 🙃 Here's an option where the width is animated and then you animate to the position. If I were you I'd probably have a rethink about the behaviour you're after because this seems a bit knotty to me. But maybe I'm missing something See the Pen oNpZdpe?editors=0011 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted March 26, 2022 Share Posted March 26, 2022 I see Paul is formulating a response, if anyone can help it'll be him! ✨ 1 Link to comment Share on other sites More sharing options...
akapowl Posted March 26, 2022 Share Posted March 26, 2022 (edited) 26 minutes ago, Cassie said: Maybe someone else has some ideas, but I'm not quite certain how you'd approach this by animating the width and the position at the same time. Yep, I've been tinkering with it a bit - not sure if mine is the most elegant or most performant approach, but it works. I used a CSS variable for the width of the sections (because I felt I also had to change the flex at the same time for it to work) and am tweening on that variable instead of the width itself, so the value also changes in the flex. I also use a sort of FLIP (First Last Invert Play) variation for the scrollTo part - First I set it to the wanted width after the tween and get the value to scrollTo after a ScrollTrigger.refresh(), then I set it back to its initial width and ScrollTrigger.refresh() again - and then I tween on the --width to window.innerWidth while calling ScrollTrigger.refresh onUpdate and at the same time scrollTo-tween to the previously gotten position to scroll to. Now this will obiously only get more complex when having to consider resizes e.g. - but maybe that gives an idea to begin with. See the Pen vYpxrBz by akapowl (@akapowl) on CodePen Edited March 26, 2022 by akapowl Exchanged codepen demo - no changes to the logic, just some narrower sections in there 3 Link to comment Share on other sites More sharing options...
JoeH Posted March 26, 2022 Author Share Posted March 26, 2022 Thank you @Cassie and @akapowl this was a great help. 1 Link to comment Share on other sites More sharing options...
akapowl Posted March 26, 2022 Share Posted March 26, 2022 Here is a variation, tweening the CSS variable to "100vw" instead of window.innerWidth - this now also makes the section adapt properly when re-sizing the window. Happy tweening! See the Pen KKZWeMz by akapowl (@akapowl) on CodePen 3 1 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