DEV Community

How to fade in content as it scrolls into view

selbekk on August 29, 2019

Today, I want to show you a technique for displaying content in a nice and nifty way - by fading it in as it shows up! The fady slidy par...

Read full post

Sung M. Kim • Aug 29 '19 • Edited

Thank you for the post, @selbekk~

For completeness, one can unobserve the ref in FadeInSection on unmount.

  React.useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        console.log(`entry`, entry, `is = ${entry.isIntersecting}`);
        setVisible(entry.isIntersecting);
      });
    });

    const { current } = domRef;
    observer.observe(current);

    //                      👇 
    return () => observer.unobserve(current);
  }, []);

I wasn't aware of this unobserve until running into the issue recently when I implemented my sticky components using IntersectionObserver, which had a memory leak.

Here is the fork with unobserve & "unmount" button.

selbekk • Aug 30 '19 • Edited

Ah that’s true - forgot about that one! I’ll update the example later today to include it (with credit given, of course)

Edit: Updated the post.

Sung M. Kim • Aug 30 '19

Thank you 🤜

Kushagra 🎈 • Feb 13 '20

To make it run only once the following works, thanks op for the amazing tutorial

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

am i angie? • Aug 30 '19

This is a great post, but gods I hate this effect, it makes page unsearchable when very often Ctrl + F is the quickest method to find something.

selbekk • Aug 30 '19

That’s true - but there are ways around that. Semantically, the content is there - so just skipping the visibility setting would enable search

am i angie? • Aug 30 '19

I've yet to see this implemented properly in the wild :)

Victor Uvarov • May 18 '20

How can you get this to work with TypeScript? React.useRef() needs a type. Not sure what type the dom ref is. Any ideas?

selbekk • May 18 '20

HTMLDivElement?

Victor Uvarov • May 18 '20

Thanks I figured it out already. There were 3 problems.

useRef() should be initialized with null and typed.

const domRef = useRef<HTMLDivElement>(null);

the ref will be null for a second, so I just needed to have a local var in the first lines of the effect

const current = domRef.current;
if (!current) return;

eerk • Mar 8 '20

Great example, especially since the so-called "simple example" on MDN is actually really complicated!

I'm still wondering why you are creating a new IntersectionObserver() for each component? In most online examples the observable elements are added to one single IntersectionObserver:

let observer = new IntersectionObserver(...)
let mythings = document.querySelectorAll('thing')
mythings.forEach(thing => {
    observer.observe(thing)
})

selbekk • Mar 9 '20

Hi!

I could've created a single intersection observer too, but to be honest it doesn't matter too much. If you have hundreds of things you want to fade in - sure, optimize it. I think the way I wrote it is a bit easier to understand from a beginner's point of view.

Rick Gove • Jan 6 '22 • Edited

How would I reverse this effect once it's about to leave the viewport?

I have it disappearing, but without any effects this way:

 .fade-out-observe {
    width: 100%;
    position: absolute;
  }



function vh() {
    var h = Math.max(
      document.documentElement.clientHeight,
      window.innerHeight || 0
    );
    return h;
  }

useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => setVisible(entry.isIntersecting));
    });
    observer.observe(fadeOutRef.current);
    return () => observer.unobserve(fadeOutRef.current);
  }, []);


 <div
        ref={fadeOutRef}
        className="fade-out-observe"
        style={{ top: vh() * 0.4 }}
      />

Jhinel Arcaya • Aug 30 '19

Thank you for this post!
Very useful, I didn't know about IntersectionObserver, more awesome features to take a look at.

Chris Savoie • Aug 30 '19

I'd encourage testing this with heatmapping tools like Hotjar. I had to eliminate something similar because it presented Hotjar from being able to screenshot a full page to lay the heatmap data over top.

selbekk • Aug 30 '19

That’s true - I think you could add some workarounds to make it work regardless though. If I ever end up using hoyjar, I’ll update the article with my findings

Jess Rezac • Aug 30 '19

Thanks for including the accessibility note!

Chris Achard • Aug 30 '19

Huh, neat. Thanks for the post! I like the use of hooks too :)

Seb • Mar 30

Hi, firstly thanks for the tutorial. I was wondering if there is a way to make it so content is not faded if it is already in view.. I can't seem to resolve this, would be so grateful if someone had a solution for this.