flefloch Posted June 22, 2020 Share Posted June 22, 2020 Hello, I've been using a lot GSAP back in time when I was working on Flash animations and I'm more than happy to see that this great lib is still alive 👍 I'm working on a React webApp and when needing to add some tweening on it my first thought was obviously for GSAP. Here is my problem I have a list of items. When the user click on one item it should disappear (simple tween on opacity) and then all the items above need to tween up to fill the space left by the disappeared item. After animation is done I'm removing the item from my state, but my problem is that all the divs keep the transformation applied before when what I want is to start a new "fresh" list so user can click once again and launch the same animations. I'm wondering if my probelm couldn't be that i'm doing it the wrong way and messing with the refs but I can't see how to do it other way. Any help is appreciated. Thanks See the Pen QWypRgZ by fleflochn (@fleflochn) on CodePen Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted June 23, 2020 Share Posted June 23, 2020 Hi @flefloch, you can use the clearProps:'y' to clear the y property when tween is finished. 3 Link to comment Share on other sites More sharing options...
flefloch Posted June 23, 2020 Author Share Posted June 23, 2020 Hum, that seems to be the right thing to do (thanks for pointing this out), but I'm still having a problem with my items not being "refreshed" properly. I think I have some mismatch from my side the way I'm handling the refs but I can't figure out what is the issue... 🤔 Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted June 23, 2020 Share Posted June 23, 2020 I don't think you are doing anything wrong with the refs, but I would tweak it slightly. Here is a working demo, hope that helps. See the Pen MWKmJaY by ihatetomatoes (@ihatetomatoes) on CodePen 4 Link to comment Share on other sites More sharing options...
flefloch Posted June 23, 2020 Author Share Posted June 23, 2020 Thank for this demo. I'll have to change few things since my list is actually coming from the props (updated by Redux store) so I need to clean the itemsRef array when props are changed but I think I get the point : use Timeline instead of multiple tweens created seperately and sending params onComplete. Just one question, you're using gsap instead of directly TweenLite, is this for performance issue or is it just a habit? Thanks for your help 👍 1 Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted June 23, 2020 Share Posted June 23, 2020 No worries, happy to help. GSAP3 has a new syntax so gsap.to() is a new way of doing TweenLite.to() Checkout the docs for the new GSAP3 syntax. 4 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