# Lottie animation interactions 2.0

**URL:** <https://forum.pinegrow.com/t/lottie-animation-interactions-2-0/4701>\
**Category:** Pinegrow Interactions Add-on\
**Created:** [November 19, 2020, 10:57am UTC](https://forum.pinegrow.com/t/lottie-animation-interactions-2-0/4701 "2020-11-19T10:57:54Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [November 19, 2020, 7:34pm UTC](https://forum.pinegrow.com/t/lottie-animation-interactions-2-0/4701/2 "2020-11-19T19:34:22Z")

</div>

Hey @shutterlab,  
I’m not much of an expert at using Interactions and this new version has a fairly steep learning curve! To get you started however, here are some steps that I have done to get Lottie animation loaded and begin adding Interactions.

1. Open a page and activate Interactions
2. Add the lottie.js to the page. I’m using a cdn so:  
`<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js" type="text/javascript"></script>`
3. Create a space on your page for the animation - so maybe a div with a a width or height set.
4. Give that space an id - because of the animation that I used I named mine ‘lottie-heart’
5. Add a script to load in the lottie file through the bodymovin script

```auto
<script>
    var animation =bodymovin.loadAnimation({
        container: document.getElementById('lottie-heart'),
        path: 'heart.json',
        renderer: 'svg',
        autoplay: false,
    })
</script>

```

Here, my animation is named ‘heart.json’ and is at the same directory level as my index.html file. Obviously you can add a folder of lottie files and then provide a relative path to the file.

1. Select the element on the DOM tree and add an interaction.
2. Give it a trigger of 'Mouseenter/Touchstart, leave the target empty
3. Click the “edit animation” button
4. Click on the timeline editor to create a new timeline
5. Click on the new timeline and then “Add property”
6. Select Lottie -\> play
7. Put the type to set
8. leave the time blank
9. Add another interaction
10. For trigger select Mouseleave/Touchend, leave the target blank
11. Create a new timeline, click it and select Lottie -\> pause
12. Type -\> Set and position set for how many seconds you want the Lottie to run after your mouse leaves the graphic. Leave the pause empty  

[https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/8b56b3718d1933a3d83c372798043670101599c1.mp4](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/8b56b3718d1933a3d83c372798043670101599c1.mp4)
  
Should work to trigger the animation on mouse over/ mouse leave. I have to fool around a little with the Scroll scene and such.

Hope this helps,  
Bob

---

_[View the full topic](https://forum.pinegrow.com/t/lottie-animation-interactions-2-0/4701)._