Lottie animations control

[cmelnik]

I created an animated svg in Adobe After Effects and used the Lottie extension with After Effects to save and export it to a Lottie account.

I was then able to add the script generated by Lottie for their web player that includes my animation to a text element on my Pro web page. The Lottie player only offers simple controls; on load, mouse over, etc…

Is there a way to have the animations move on page scroll?

Is there an element or plugin coming or available for Lottie animations? Seems like several other builders/themes are enabling the use of Lottie and it would be nice to have the ability to utilize Lottie (especially on scroll) to elevate designs.

Please let me know if or when we might see something added for more control of svg animations such as Lottie without extensive custom coding

Thank you…

[tristup]

Hi @cmelnik,

To integrate the Lottie animation, you need to add the bodymovin.js script and also need to add a custom JavaScript code to initiate the animation into the specific element. Also, the Lottie animation comes in a JSON format which you already have, needs to be assigned to the specific element. Adding the code into the Raw Content will not work in this case. I have already made a request to our development team to check and add this as a feature in the future.

If you don’t want to wait, I would suggest you hire a developer who can assists you with this customization.

Thanks

[cmelnik]

So after a lot of trial and error I was able to make the animated svg work… not sure it is the correct method but it does seems to work without issue.

I created the svg file in Adobe After Effects and used the Lottie extension to export it to my Lottie account.

From there I added the Lottie web players and image url to a text element (see attached screen shot). I used “example” for the image url but any Lottie json animation url works.

I then added js to the page.

Not certain it us the best method but worked for the single instance I was trying to create on page.

[tristup]

Hi @cmelnik,

Glad that you are able to find the workaround. I have already made a Feature request on this, so it might be taken into account in the future.

Thanks