Lottie animation in CMS dynamic pages

There are a couple of ways to use Lottie files with CMS. One of them to add a link of lottie (json file) to the cms and then use it in embed item.
In my demos you can find examples of lottie animation with control of speed, loop and reverse direction on loop settings. I use bodymovin to render lottie.

Step 1. Create your CMS collection for the page where you will use lottie.

CMS collection with lottie settings — Lottie fields added to CMS collection.

Add any fields that you need for the page, for example title, body RTE, images and so on, and add settings for our lottie:
1) lottie link - link field.
2) lottie speed - number (decimal)
3) I want lottie do not loop - switch (if it will be ON, lottie will play on the page only one time)
4) Change direction before loop - switch field. If ON, then lottie with reverse play on the loop.

Step 2. Get your lottie json and upload them separate to the assets in webflow.

When done, copy each link from the file and add it to the CMS collection in the field "Lottie link":

‍
Also set settings for each lottie, if you want it to loop, if you want to play slower or faster, and if you want to play in reverse when it loops. Or if you want to play lottie only one time.

Step 3. Add javascript library to your dynamic page.

My dynamic page from collection called Dynamic-page-with-lottie Template, so I added library in the <head> tag in settings here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ bodymovin/5.7.6/lottie.min.js"></script>

Step 4. Add embed component on the template page.

You can name it how you want, but you need to add an ID in settings of this element. In my case, my element ID is "lottieID". It could be anything.

Step 5. Add code to the embed:

if (HERE ADD FIELD FROM COLLECTION "Change direction before loop") {loopanimation = false;}
if (HERE ADD FIELD FROM COLLECTION "I want lottie DO NOT loop") {loopanimation = false;}

var animation = bodymovin.loadAnimation({
container: document.getElementById('HERE ADD YOUR EMBED ID that you named in settings'), // required
path: 'HERE ADD FIELD FROM COLLECTION Lottie link', // required
renderer: 'canvas', // required - here could be either 'svg', 'canvas' or 'html'
loop: loopanimation,
autoplay: true // optional

});

animation.setSpeed(HERE ADD FIELD FROM COLLECTION "Lottie speed");
if (HERE ADD FIELD Change direction before loop)
{
var directionOrder = 1;

animation.addEventListener('complete', function() {
animation.setDirection(directionOrder);
animation.play();
directionOrder = -directionOrder;
})
}

</script>