1. Set the container you’d like the animation to play in to position relative
2. Add a Lottie element to the container with position absolute full
3. Set z index so Lottie is behind your text
4. Upload your Lottie or use the existing one in this file. For more options go to lottiefiles.com .
5. Select your button and create a new Interaction - Element trigger - mouse click - on first click - start a new animation
6. Now click the Lottie layer and add a Lottie key frame with playback 0% duration 0s
7. Add another Lottie keyframe with playback 100% and set the duration to match the length of the original animation then press save
8. Now click “on second click” and start a new animation
9. Use the same keyframes from the first click. 0% playback 0s duration, 100% playback and match the duration of the original animation then press save.
10. Publish or preview to see it in action. The Lottie should play every time the button is clicked.
0 Comments