Gamote / lottie-react

A lightweight React library for rendering complex After Effects animations in real time using Lottie.
https://lottiereact.com
Other
791 stars 59 forks source link

Enabling Container param on useLottieInteractivity #40

Open migsdeving opened 2 years ago

migsdeving commented 2 years ago

Is your feature request related to a problem? Please describe. Yes, I want to make a lottie play with scroll but instead of listening to the lottie container's viewport, I want it to follow a different container. This is included on Lottie Interactivity as they show here: Lottie scroll relative to container (https://lottiefiles.com/interactivity)

Describe the solution you'd like The solution would be to add this param to the function. Describe alternatives you've considered Can't find any other alternative since I can't seem to change the container that the function is reading. Additional context Example shown on lottie Interactivity page: <script> LottieInteractivity.create({ mode: "scroll", player: "#secondLottie", container: "#MyContainerId", actions: [ { visibility: [0,1], type: "seek", frames: [0, 301] } ] }); </script>

davidstellini commented 2 years ago

Bumping this up - I got blocked on this and have no idea what I can do to go around it, trying to figure out some hack

davidstellini commented 2 years ago

For anyone else struggling with this - here was my hack / workaround after looking into the source code.

  const animation = useLottieInteractivity({
    mode: 'scroll',
    lottieObj: {
      ...lottieObj,
      animationContainerRef: followRef,
    },
clucasalcantara commented 2 years ago

Hi @davidstellini ! Could you pls share your code? Struggling to make that work too :(