search

LottieFiles / dotlottie-web

Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.
https://developers.lottiefiles.com/docs/dotlottie-player/
MIT License
141 stars 9 forks source link

dotlottie-web interactivity for scroll interactions #183

Open mindshaped opened 4 months ago

mindshaped commented 4 months ago

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 commented 4 months ago

@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 commented 3 months ago

@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.

github-actions[bot] commented 1 month 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.