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/ ).
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…).
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/
It can load any Lottie animation with a simple .json file with this plugin:
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.
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 feature of PGIA to do various things but probably not control Lottie without additional code.
Maybe this tutorial will help your efforts, but code is involved.
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.
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.
@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.
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 . But that KeyShape App really slowed down updates over time also.
