NickNo Posted July 20, 2022 Share Posted July 20, 2022 Hi, I have some legend keys that animate in with a switch toggle - when I toggle them off, I want the legend to animate back out (reverse()) - but the way I have setup it up, it isn't working - can someone shed some light on why? Also, I'm creating the timeline on each toggle of the checkbox, which I realise isn't very efficient. Is there a better way to set it up, keeping in mind the #legendid will be dynamic (on some pages there will be 2 legends, 3 on others and they will all have different #ids)? See the Pen dymvBer by nickjacobsnz (@nickjacobsnz) on CodePen Link to comment Share on other sites More sharing options...
SteveS Posted July 20, 2022 Share Posted July 20, 2022 You have it set up so that every time you click, the timeline is recreated. Since you are using .to, all the animation values are relative from the time of creation. The first time you click the toggle, it opens the legend because it's going from an invisible state to a visible one. The next time you click the toggle, it recreates the timeline. It looks at the properties on the legend, says "we need to go TO that" but it is already there. So when you reverse it, you are just going to the current values. You have to create your timelines outside of the event that reverses it or use .fromTo tweens. The former is probably better than the latter. 1 Link to comment Share on other sites More sharing options...
NickNo Posted July 21, 2022 Author Share Posted July 21, 2022 Now that you point it out that makes complete sense Although, not completely sure how I would create dynamic timelines? Link to comment Share on other sites More sharing options...
NickNo Posted July 25, 2022 Author Share Posted July 25, 2022 This is what I ended up with - if there is a tidier/better way to do it, please let me know See the Pen eYMEjWp by nickjacobsnz (@nickjacobsnz) on CodePen 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