# Control Lottie animation playback with anmation plugin

**URL:** https://forum.pinegrow.com/t/control-lottie-animation-playback-with-anmation-plugin/4438
**Category:** Questions
**Tags:** animations
**Created:** [August 11, 2020, 7:37pm UTC](https://forum.pinegrow.com/t/control-lottie-animation-playback-with-anmation-plugin/4438 "2020-08-11T19:37:21Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Eladb](https://avatars.discourse-cdn.com/v4/letter/e/f6c823/32.png) [@Eladb](https://forum.pinegrow.com/u/Eladb)
#### Post date: [August 11, 2020, 7:37pm UTC](https://forum.pinegrow.com/t/control-lottie-animation-playback-with-anmation-plugin/4438/1 "2020-08-11T19:37:22Z")

</div>

Hello, I’m pretty new here but I could not find anything regarding this topic.

I’m coming from webflow so maybe my thinking here is wrong when comparing it 1 to 1 to webflows functionality.

Wondered if there’s a way to control Lottie playback with the animation plugin, for example for the animation to play according to the page scroll (like the apple airpods website for example [https://www.apple.com/airpods-pro/](https://www.apple.com/airpods-pro/) ).

If there’s another reasonable way to so this of course I would be happy to learn, I just loved the ease of use when you can control the animation visually and not with code.  
With pinegrow’s animation timeline it should be even better (it is waayyyy more convenient than webflows animation steps, at least for me…).

Thanks in advance!

---

<div class="post-metadata">

### Author: ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [August 12, 2020, 7:48am UTC](https://forum.pinegrow.com/t/control-lottie-animation-playback-with-anmation-plugin/4438/2 "2020-08-12T07:48:10Z")

</div>

Hi @Eladb,

Check this out and see if it helps you:

> **[chrisgannon/ScrollLottie](https://github.com/chrisgannon/ScrollLottie)**
>
> Use GSAP ScrollTrigger to scroll through a Lottie animation - chrisgannon/ScrollLottie

I’ve been busy with that, but because I’m on both Windows and Mac I purchased Keyshape (it works out of the box):  
[https://www.keyshapeapp.com/](https://www.keyshapeapp.com/)

It can load any Lottie animation with a simple .json file with this plugin:

> **[Pixofield/keyshape-lottie-format](https://github.com/Pixofield/keyshape-lottie-format)**
>
> Lottie plugin for Keyshape. Contribute to Pixofield/keyshape-lottie-format development by creating an account on GitHub.

Keep in mind that the Pinegrow animation editor is based on Greensock’s older version!  
Keyshape only cost around $ 33.- (one time payment) and Pinegrow web editor cost € 50,- a year  
and till now I have never seen a update.

Regards,

David

---

<div class="post-metadata">

### Author: ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [August 12, 2020, 10:55am UTC](https://forum.pinegrow.com/t/control-lottie-animation-playback-with-anmation-plugin/4438/3 "2020-08-12T10:55:00Z")

</div>

Hi @Eladb welcome to the forum,

> [@Eladb](#):
>
> Wondered if there’s a way to control Lottie playback with the animation plugin

I don’t believe in its current state that you can do this through Pinegrow Interactions via its visual controls. But you could probably use the [Scroll Scene](https://pinegrow.com/docs/interactions/actions/scroll-scene/) feature of PGIA to do various things but probably not control Lottie without additional code.

> [@Eladb](#):
>
> If there’s another reasonable way to so this of course I would be happy to learn

Maybe this tutorial will help your efforts, but code is involved.

> **[Let's Make One of Those Fancy Scrolling Animations Used on Apple Product Pages...](https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/)**
>
> Apple is well-known for the sleek animations on their product pages. For example, as you scroll down the page products may slide into view, MacBooks fold open

> [@Eladb](#):
>
> more convenient than webflows animation steps

Yes even in Webflow its quite a number of steps to use Lottie, often times visual approaches require many clicks to avoid coding. But this post has a good overview and code examples that you could even use within Pinegrow manually.

> **[\[GUIDE\] Lottie Bodymovin' Animation in Webflow](https://discourse.webflow.com/t/guide-lottie-bodymovin-animation-in-webflow/80569)**
>
> Update OCTOBER 2019 - Please note that webflow now supports lottie with native integrations. You can see more about this on the official blog post \[here\](https://webflow.com/blog/after-effects-and-lottie-meet-webflow) For more webflow content,...

The Pinegrow team has recently done a few tutorials for Pinegrow Interactions, so maybe they can do one on what can be done to link up Lottie and the PGIA plugin, compared to Webflow. 😉

---

<div class="post-metadata">

### Author: ![Eladb](https://avatars.discourse-cdn.com/v4/letter/e/f6c823/32.png) [@Eladb](https://forum.pinegrow.com/u/Eladb)
#### Post date: [August 17, 2020, 8:58pm UTC](https://forum.pinegrow.com/t/control-lottie-animation-playback-with-anmation-plugin/4438/4 "2020-08-17T20:58:30Z")

</div>

@AllMediaLab Thank you, will try that definitely!  
What do you mean you have never seen an update? of pinegrow?

@Pinegrow_User thank you, no doubt a little code will help get this done faster and more accurately.  
However I would love it to be integreted with the animator itself.  
Ive been working with webflow lottie and it was a piece of cake for me to use.  
However, I already made more complex solutions than that, just wondered if theres a quick way to do so.

Thank you all for the detailed response

---

<div class="post-metadata">

### Author: ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [August 17, 2020, 9:38pm UTC](https://forum.pinegrow.com/t/control-lottie-animation-playback-with-anmation-plugin/4438/5 "2020-08-17T21:38:40Z")

</div>

> [@Eladb](#):
>
> What do you mean you have never seen an update?

Probably concerning Pinegrow Interactions, it uses GSAP 2 and ScrollMagic so it’s yet to be updated to the modern GSAP 3 and ScrollTrigger • [GSAP 3 & ScrollTrigger - update for Pinegrow Interactions Plugin](https://forum.pinegrow.com/t/gsap-3-scrolltrigger-update-for-pinegrow-interactions-plugin/4375) . But that KeyShape App really slowed down updates over time also.

> [@Eladb](#):
>
> just wondered if theres a quick way to do so

It appears there will be a [Lottie plugin](https://forum.pinegrow.com/t/possible-pinegrows-internal-server-bug/4430/9) for Pinegrow by @RobM.

---

<div class="post-metadata">

### Author: ![Eladb](https://avatars.discourse-cdn.com/v4/letter/e/f6c823/32.png) [@Eladb](https://forum.pinegrow.com/u/Eladb)
#### Post date: [August 17, 2020, 10:00pm UTC](https://forum.pinegrow.com/t/control-lottie-animation-playback-with-anmation-plugin/4438/6 "2020-08-17T22:00:13Z")

</div>

Yeah!! lol just saw that

just ran into a quick solution for all mu problems with:

> **[Lottie Player - Interactivity Guide](https://lottiefiles.com/interactivity?url=https:%2F%2Fassets5.lottiefiles.com%2Fpackages%2Flf20_Loi97B.json)**
>
> This is a quick demo for using the Lottie interactivity library with the Lottie Web Player component and the Lottie Player to add interactivity to your applications

p.s. if you mean to use it just remember to include the lottiefiles main script

---

<div class="post-metadata">

### Author: ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [August 17, 2020, 10:20pm UTC](https://forum.pinegrow.com/t/control-lottie-animation-playback-with-anmation-plugin/4438/7 "2020-08-17T22:20:08Z")

</div>

Good for you.

Just be wise about how you use Lottie on your sites, at times its not the most performant approach. 😉

---

<div class="post-metadata">

### Author: ![Eladb](https://avatars.discourse-cdn.com/v4/letter/e/f6c823/32.png) [@Eladb](https://forum.pinegrow.com/u/Eladb)
#### Post date: [August 17, 2020, 10:35pm UTC](https://forum.pinegrow.com/t/control-lottie-animation-playback-with-anmation-plugin/4438/8 "2020-08-17T22:35:55Z")

</div>

Definitely…  
Just exploring the abilities now for next projects.  
I want to see what I can offer to our clients, and how much it will cost them 🙂
