LottieFiles / lottie-interactivity

A small javascript library to enable interactivity with Lottie animations
https://lottiefiles.com/interactivity
MIT License
430 stars 55 forks source link

Starting frame number ignored, flashing between types in scroll mode #91

Closed andybrowncompassion closed 2 years ago

andybrowncompassion commented 2 years ago

Overview

Use the following code on any animation:

LottieInteractivity.create({ player:'#lottie_exploration', mode:"scroll", actions: [ { visibility:[0, 0.5], type: "stop", frames: [70] }, { visibility:[0.5, 0.6], type: "seek", frames: [75, 85] }, { visibility:[0.6, 1.0], type: "stop", frames: [95] } ] });

You will notice that the first action (stop on frame 70 for visibility 0 to .5) works correctly. The second action (seek) will start at frame 0, not frame 75 And there will be a flash between the second action and the third action, even though one should end at 0.6 and the other begin at 0.6

...

Consuming repo

https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js

...

Labels

samuelOsborne commented 2 years ago

@andybrowncompassion Could you share a url to your animation too please? Can't reproduce this problem atm.

andybrowncompassion commented 2 years ago

@samuelOsborne : animation here https://gist.github.com/andybrowncompassion/5dd379c161943d479a3d9363dcd182f5

samuelOsborne commented 2 years ago

@andybrowncompassion Seems to work ok for me - please check out this codepen:

https://codepen.io/Osbro/pen/abYZqwQ?editors=1010

Can't see any of the flashing problems

github-actions[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.