Linking an Animation/Video (.json) to Scroll progress

[Timo Rick]

Hello there!

At our creative agency we recently switched from Webflow to Elementor for Wordpress, and I've been having a blast with it so far.
However, I would like to know wheter there is any way (or plugin) with which I could link the progress of an animation to the scroll progress.
This was possible in Webflow by simply exporting a video as a .json file in After Effects and then linking the progress of the video to the scrolling, as shown here in this tutorial (done in webflow):

I would really like to know wheter this is possible with Elementor or any plugins you guys know of.

Kind regards,
Timo

 

[trick]

Hi Timo,

Wonder if you had any luck finding a solution for this ?
Would dropping a series of JPG's in place and alternatively switching them on/off based on scroll be too slow?

Thanks,

Erik

 

[Timo Rick]

Hi Timo,

Wonder if you had any luck finding a solution for this ?
Would dropping a series of JPG's in place and alternatively switching them on/off based on scroll be too slow?

Thanks,

Erik

Hi Erik,

Yes, I did just now! In July 2020 they implented a new tool called Lottie Animations. It is possible to link the .json to scroll, or play it on hover/on click, whatever you like.

Simply use the AE plugin "bodymovin" to export your Animation as .JSON and import it into your "Lottie Animation" in Elementor. Works like a charm.

Hope that helps.

Kind regards,
Timo