React + Lottie Animation scroll fire

Question

I created different animation thought Bodymovin. I would like to fire the animation once the scroll reach the animation. I am trying to figure out the way, but unfortunately I am not able to do it.

I am working with Gatsby JS (React framework). I paste my code down here of the .js file:

import React, { Component } from 'react'
import Lottie from 'react-lottie'
import animationData from './paginaweb.json'

class UncontrolledLottie extends Component {


  render(){

    const defaultOptions = {
      loop: false,
      autoplay: true, 
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice'
      }
    };

    return(
      <div>
        <Lottie options={defaultOptions}
              width={200}
        />
      </div>
    )
  }
}

export default UncontrolledLottie

I tried libraries as https://www.npmjs.com/package/react-animate-on-scroll but didn't work to me. The animation shows up but it's already fired.

Someone out there that can help me out with this? I will really appreciate.

Thank you

score 1 · Answer 1 · answered Oct 11 '19 at 14:04

I done similar things with react-waypont. You can place a waypoint somewhere in the page. If your scroll reach it, then you can trigger something. Make sure you just render the animation when this event triggered, so it just starts when you reach there. Something like this.

import {Waypoint} from 'react-waypoint';
import React, {useState} from 'react';

const Component = () => {
let [renderLottie, set] = useState(false);

return (
   ...
    components to push waypoint out of the first page, so you can scroll to it
   ...
    <Waypoint
      onEnter={set(true)}
    />
    {renderLottie && UncontrolledLottie}
  )
}

React + Lottie Animation scroll fire

1 Answers1