How to animate when user scrolls to view

Question

I have started building a website using ReactJS, I want to animate div elements into view when the view in scrolled to.

I have used CSS keyframes to add animations like so;

.animateMe {
   animation: IntroWelcomeImageAnimation 3s 0.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1);  
}

@keyframes IntroLeftAnimation {
  0% {
      opacity: 0;
      transform: translateX(-200px)
  }
  100% {
      opacity: 1;
      transform: translateY(0px)
  }
}

@keyframes IntroRightAnimation {
  0% {
      opacity: 0;
      transform: translateX(200px)
  }
  100% {
      opacity: 1;
      transform: translateY(0px)
  }
}

@keyframes IntroWelcomeImageAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

JS File

import React from 'react'
import '../../layout/intro.css';


const IntroPage = () => {
  return (
    <section className="Intro-Page">
      <div className="animateme">
      </div>
    </section>
  )
}

export default IntroPage

However the problem is that the animations only occur when the page is loaded as that is when the elements are too. How can I have it that they transition into view on scroll without using JQuery ?

you can take a look at https://stackoverflow.com/a/58556076/5124488 — blueseal, Nov 05 '19 at 13:28
I would definitely recommend a plugin that provides this functionality such as ScrollMagic, getting this to work relatively simple, getting it to work on all devices consistently, not so. — Raptus, Nov 05 '19 at 14:19

score 1 · Accepted Answer · answered Nov 05 '19 at 15:02

1

Look at this library https://www.react-reveal.com/

there are many animations that can be triggered on scroll

answered Nov 05 '19 at 15:02

Hovhannes Amirjanyan

83
10

How to animate when user scrolls to view

1 Answers1