Unthink Posted September 23, 2022 Share Posted September 23, 2022 Hello! I've built a css grid that uses a rangesider to change the grid column sizes. The changes are stored so that the grid choice is persistant across the site. It works but i'd love to add some staggering animation to the size changes. https://unthinktest.xyz/levine-leavitt/ (as you can see it needs some transition animations!) The codepen demo i've built is using this pen ( See the Pen rNxPKjL by animadraw (@animadraw) on CodePen ) as inspiration, and it's using the Flip plugin. Perhaps i'm now getting confused between the 2 ideas, so any help or pointers would be much appreciated. Currently the staggering animations are not overlapping... Thanks Philip See the Pen BaxwoWy by phlp (@phlp) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted September 23, 2022 Share Posted September 23, 2022 Hi Phillip, Right now I don't have time to go through your example. I noticed that the zoom callback is being called twice on each slider update, so you might want to check that logic closely in order to see what's going on there. Same thing with the document click event, you click twice and something sort of happens. My advice is to decouple the DOM changing functionality into their own independent methods. Right now you have everything mixed and that could be causing the issue. In the mean time I updated the original codepen example and updated it to use the latest version of GSAP and to use Flip as well: See the Pen BaxwVYG by GreenSock (@GreenSock) on CodePen Hopefully is enough to get you on the right direction. If you're still having issues let me know and I'll take a closer look to your example later. Happy Tweening!!! Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted September 24, 2022 Solution Share Posted September 24, 2022 Hi, I had some time to go through your example and instead of looking for the issue I just did it again from scratch. Whatever the issue is, my best guess is that it comes from over-complicating the code. If you look at this example, the amount of code is far less and it's far easier to go through and understand: See the Pen rNvGPwV by GreenSock (@GreenSock) on CodePen I removed the short duration and stagger as I believe it looks better like that, more fluid. With the duration and stagger it looks a bit jagged IMHO. I kept the duration and stagger values from your original example, they're just commented out. Happy Tweening!!! 2 Link to comment Share on other sites More sharing options...
Unthink Posted September 24, 2022 Author Share Posted September 24, 2022 @Rodrigo You are a legend! This is amazing. Thank you so much for input. Yes, as you said i was without doubt overcomplicating the code! 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