Timeline clearProps transform with React

[Veronika Machackova]

Hello, I am working on a React application that will allow users to create banners with multiple elements and dynamically add animations to the elements. As there is not a great amount of tutorials for React hooks and greenosock I am learning by doing but I am running into a bit problem with clearing props. I have element that I add animation to, when I press play, I want the animation to run, when I press pause I want it to pause and when I press stop I want to cancell all the animations and return the elements into the initial position and state. I can manage that with clearProps but the problem is that the elements are draggable and therefor already have transform: translate(x,y) and if I add a rotation to it or some other transform property, I can't clear only the greensock added property but it clears the whole transform. Is there a way how to get back to the previous state of elements when I press the stop button? I tried to invalidate, kill, clear timeline but unfortunately nothing works. Thank you 9px);

[ZachSaucier]

Hey Veronika and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Business Green membership!

 

To do this sort of thing you should be managing your data using a custom data format. Relying on GSAP to keep the state for you is only going to be more difficult to handle in the long run. I would create a data representation of each element that you have and update its state when you need to. There are a lot of different ways of approaching this sort of thing - most likely the main difference being either just keeping track of the start/end vars or animating the data state instead and manually updating the elements each tick. You might be able to get away with just saving the state before your animation starts (i.e. not doing a more full state management) but it depends on your use cases. 

 

A full UI to create animations is not a trivial task. That's why there are very few out there that try to do this sort of thing (and there are a fair many that are no longer maintained). The only software that I know that does this sort of thing and has been around a while is Pinegrow but I'm not aware of how much they support ad creation specifically (they may support it great, I don't know).

[Veronika Machackova]

Thank you for replying. I have an object with data handled in the state hook so I have all the necessary information I need in order to make it work. Maybe I'm missing something somewhere  . I'll keep cracking it and hopefully figure it out.