CODEWITHSUNDEEP
reactjsscrollgatsbyonscrollanimate-on-scroll
taylor018
taylor018

Reputation: 501

Gatsby/React - fade out section on scroll?

I've been trying to use gatsby-plugin-scroll-reveal which uses Sal.js to animate a hero section on my site. I'm trying to make it so that the text in the hero fades in then fades out as you scroll down the page. Right now, I can only get it to fade in. How can I make that happen with Sal.js or another way?

I also tried a different way by creating a component that uses IntersectionObserver DOM API but I couldn't get that to work really.

Here's the component:

import React from 'react';
import ReactDOM from 'react-dom';

function FadeInSection(props) {
  const [isVisible, setVisible] = React.useState(true);
  const domRef = React.useRef();
  React.useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => setVisible(entry.isIntersecting));
    });
    observer.observe(domRef.current);
    return () => observer.unobserve(domRef.current);
  }, []);
  return (
    <div
      className={`fade-in-section ${isVisible ? 'is-visible' : ''}`}
      ref={domRef}
    >
      {props.children}
    </div>
  );
}

export default FadeInSection

Upvotes: 0

Views: 4329

Answers (1)

taylor018
taylor018

Reputation: 501

I figured out a solution from this article: https://markoskon.com/scroll-reveal-animations-with-react-spring/

So, I'm using the react-spring to create reveal animations on scroll and react-visibility-sensor to see if the I want animated element is visible.

// App.js

import React from "react";
import { Spring } from "react-spring/renderprops";
import VisibilitySensor from "react-visibility-sensor";

<VisibilitySensor once>
   {({ isVisible }) => (
     <Spring delay={100} to={{ opacity: isVisible ? 1 : 0 }}>
       {({ opacity }) => <h1 style={{opacity}}>Title</h1>}
     </Spring>
    )}
</VisibilitySensor>

Upvotes: 2

Related Questions