I was just testing out the new Lottie-feature in the GSAP interactions panel. I was happy with it until I came across a weird limitation:
I wanted to play a Lottie animation in reverse, so I wanted to set the ‘From‘ state to 100% and the ‘To‘ state to 0%. But it doesn’t let me do that. The input field forces me to set the ‘To‘ state to a higher number than the ‘From‘ state.
Did anyone encounter the same problem?
@CassieEvans Could you possibly give some insight here? Is this intended behavior?
I also tried to play the whole interaction in reverse instead of just the Lottie, but I also have problems with that. The animation just doesn’t work at all if I play it in reverse.
Hey Martin! Thanks for the heads-up. That looks like a UI consideration that wasn’t taken into account to me. I’ll surface it to the team. It’s easy enough for GSAP to handle.
I also tried to play the whole interaction in reverse instead of just the Lottie
I had a look at the UI to try and guess how you were reversing the Lottie, and I think this may be a confusion around how play and reverse work, (and something we can make clearer)
Play and Reverse will kick off from wherever the playhead is at the time that they fire. This is really useful for UI interactions - think about a user hovering their cursor in and out of an interaction to toggle the play/reverse state - you would want that to play fluidly from wherever the playhead is when their mouse enters or leaves the element.
If you choose reverse in the settings, it will only reverse if the playhead has space to reverse into. If the playhead is at the start at the time it fires, nothing will happen.
Right now the way to handle this is to look at how long your interaction is, and set the playhead to the end second value with “jump to” - then set the control to reverse. This is like saying “move the playhead to this specific position and then play in reverse”
This feels overcomplicated to me so I’ll suggest that the team add a “reverse from end” option. Much like the “play from beginning” option.
Thanks for the feedback and sorry if this was frustrating for you!
Hi Cassie, thanks for your detailed answer and being so open for feedback. I really appreciate it!
Thats what I thought. GSAP has so many capabilities, but putting all those features in a GUI and considering all possible scenarios how users interact with it is quite a challenge I belief.
Ahh that makes so much sense now! I agree, an additional “reverse from end“ option would make this more clear and easier to use
Regarding the lottie-UI:
I think a very handy addition would be to have the “From“ state of a Lottie animation as an optional field, similar to how we can enable/disable the “From” and “To“ states in normal GSAP animations.
This would enable more advanced interactions, where different triggers can move a Lottie animation to different points on its timeline. It would then always play from the current state instead of from the beginning.
For example, when we have a product-features-section (see screenshot below as an example), but instead of switching between different static images on the right based on which item is clicked on the left, a single Lottie animation would be played. That Lottie animation would animate to different points in its timeline depending on which feature is selected.
If I’m correct that’s not possible to achieve with GSAP in WF right now. So I though because it’s almost christmas I place my christmas-wishes here
