Lottie animation interactions 2.0

Pinegrow Interactions Add-on
1

Hi all,

Can someone quickly explain to me the procedure to follow to insert and control a lottie animation via Interactions 2.0?
I tried via lottie player javascript library but the animation does not show in pinegrow, so it is impossible to create interactions. What Should I do ?

thank you,

regards,

aurélien

2

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
<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

    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

3

Hi Bob ,
thanks a lot, I’ll try to play with
Regards