CODEWITHSUNDEEP
javascriptreactjsanimationlottiebodymovin
JFelix
JFelix

Reputation: 155

React + Lottie Animation scroll fire

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

Upvotes: 0

Views: 1450

Answers (1)

Peter Ambruzs
Peter Ambruzs

Reputation: 8223

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}
  )
}

Upvotes: 1

Related Questions