CODEWITHSUNDEEP
cssreactjs
aa bb
aa bb

Reputation: 496

what is the best way to make css animation working with scrolling (on react)

I would like to remake this website as a training : https://www.agap2.fr/

I started with the "zoom" animation on screen 4. I succeeded to do it but I would like to know the best way to do it.

For the moment, here what I did :

useEffect(() => {
    function watchScroll() {
      window.addEventListener("scroll", logit);
    }
    watchScroll();
    return () => {
      window.removeEventListener("scroll", logit);
    };
  });

Inside the logit function, I check the size, width or radius to change according to window.pageYOffset.

Here's the div for a circle :

<div
          style={{
            position:"fixed",
            display:visibility,
            height: diameter + "px",
            width: diameter + "px",
            top: posCercle[1] + "px",
            left: posCercle[0] + "px",
            backgroundColor: "#ff0",
            borderRadius: "999px",
            boxSizing: "border-box"
          }}
        />

Is there simplest way to do this ?

Upvotes: 1

Views: 3635

Answers (1)

clxrity
clxrity

Reputation: 336

react-animation-on-scroll

npm install react-animation-on-scroll --save
Include animate.css in your project:

HTML:

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>

Or:

npm install --save animate.css

import "animate.css/animate.min.css";

import { AnimationOnScroll } from 'react-animation-on-scroll';

<AnimationOnScroll animateIn="animate__bounceIn">
  <h2>Some Text</h2>
</AnimationOnScroll>

react-reveal

npm install react-reveal --save

React reveal has multiple different effects (like fade, flip, rotate, bounce, etc.). They're all very easy to use:

import Zoom from 'react-reveal/Zoom';

<Zoom>
  <p>Markup that will be revealed on scroll</p>
</Zoom>

<Zoom>  
  <CustomComponent />
</Zoom>

Without an external library

  • Keep track of the element with a ref
const refRef = useRef(null)

return <div ref={refRef} />
  • Scroll event listener with useLayoutEffect
useLayoutEffect(() => {

  window.addEventListener(‘scroll’, onScroll)

  return () => window.removeEventListener(‘scroll’, onScroll)

}, [])
  • Check the user's scroll position

Grab the “ref” of the animated element and check the Y coordinate of its top using getBoundingClientRect() API. Check a user’s scroll action by knowing if the scroll position is greater than the top of the element.

const topPos = refRef.current.getBoundingClientRect().top

const onScroll = () => {

  const scrollPos = window.scrollY + window.innerHeight

  if (topPos < scrollPos) {

    // enter animation code here

  }

}
  • Use React’s inline styles or Styled Components to create simple animations

Example of a fade in animation

const [show, doShow] = useState({

  itOne: false,

  itTwo: false,

  itThree: false,

})

const refRef = useRef(null)

return (

  <>

    <Div animate={show.itOne} ref={refRef} />

  </>

)

// component we are animating

const Div = styled.div`

  transform: translateX(${({ animate }) => (animate ? ‘0’ : ‘-50vw’)});

  transition: transform 1s;

  height: 650px;

  width: 250px;

  background-color: green;

Upvotes: 1

Related Questions