Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dotlottie-web interactivity for scroll interactions #183

Open
mindshaped opened this issue Apr 19, 2024 · 3 comments
Open

dotlottie-web interactivity for scroll interactions #183

mindshaped opened this issue Apr 19, 2024 · 3 comments

Comments

@mindshaped
Copy link

Overview

It seems currently not possible to add scroll interactivity to .lottie files integrated with dotlottie-web. In the previous player web-component (that points to dotlottie-web, see https://github.com/dotlottie/player-component/tree/master/packages/player-component) we were able to use the lottie-interactivity library (https://github.com/LottieFiles/lottie-interactivity) to create scroll-interactions.

Motivation

to create animated .lottie files with scrolling reactivity and while using the latest dotlottie-web library, as the .lottie files seem to be much more performant than the older .json/lottie-web or player-component integrations.

@theashraf
Copy link
Member

@mindshaped The lottie-interactivity library internally relies on the lottie-web renderer APIs, which differ slightly from those of dotlottie-web. It's not a simple drop-and-replace player, as some APIs have changed.

Currently, we are working on cross-platform interactivity support for the new dotlottie players that will replace the lottie-interactivity library, expected to be released soon.

In the meantime, you might consider creating an adapter for dotlottie-web that will make it compatible with lottie-interactivity. I'll try to provide a code example soon to demonstrate how this can be achieved

@theashraf
Copy link
Member

@mindshaped Unfortunately, I couldn't get the adapter working for all the interactivity examples, specifically the scroll use case. We are currently focusing on building cross-platform interactivity support for the dotLottie players.

for now, here is the adapter example if you want to investigate: https://codepen.io/lottiefiles/pen/PovWYpr

This example works with click-based interactivity use cases. I'm not sure why it's not working for the scroll; it requires a deep dive into the Lottie Interactivity library to understand the missing pieces.

Copy link
Contributor

github-actions bot commented Aug 5, 2024

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.

@github-actions github-actions bot added the stale label Aug 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants