Lottie animation on scroll

Sparkle suggestion
1

Hi,
A quick suggestion for @duncan : I made a lottie animation (you can view it here), at first I wanted to play it when scrolling but I’d end up at the bottom of the page before the animation ends. Would it be possible to have more control on the scroll options so people can scroll to fully see the animation before the page continue its proper scroll ?
Thanks a lot for the powerful tool that is Sparkle…
Best regards,

Raphael

2

Hi @raphgara, more control how? Not sure what you mean.

3

Hi @duncan,
Thanks for getting back. Sorry if I wasn’t clear, here are example for settings :slight_smile:
Trigger : being able to choose what will trigger the animation to begin, selecting from Viewport, On Click, On Hover, Scroll, or None.
Viewport : being able to select the position within the viewport at which the element will appear and when it will disappear (only available if either Viewport or Scroll is selected as the trigger)
Effects Relative To Scroll : This option is only available if Scroll is selected as the trigger. Select whether the scroll position is relative to either Viewport or Entire Page (that’s the specific option I’d love to have on Sparkle)
Start Point : Select at which point the animation will begin
End Point : Select at which point the animation will end

Thanks for your consideration!

4

I’m sure this is all clear to you, but I don’t really visualize how most of that would work. Would you be able to email us a quick sketch of how the individual options would work in practice? Or maybe sample websites that implement things you are thinking of?

Also all this sounds like overkill for just lottie, is it not something that would find more general applicability?

5

Here are a few great websites, where there is control over the way animations are played (scrolling / on the viewport or the entire page) :

I found an example of a lottie menu options…
lottie-cyclist

Not sure if that helps… and I don’t know if its worth spending time to implement but I think it would be very useful features to have more control over animations/lottie.

6

I’m still confused as to what exactly you are after sorry.

Sparkle does offer the feature to animate lottie animations on scroll.

I don’t really know what I should be looking at in all the examples you sent. Perhaps the common thing is scrolling that snaps to the vertical size of the window? (100vh + snapping)