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...
For further actions, you may consider blocking this person and/or reporting abuse
Thank you for the post, @selbekk~
For completeness, one can unobserve the ref in
FadeInSection
on unmount.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.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.
Thank you π€
To make it run only once the following works, thanks op for the amazing tutorial
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.Thatβs true - but there are ways around that. Semantically, the content is there - so just skipping the visibility setting would enable search
I've yet to see this implemented properly in the wild :)
How can you get this to work with TypeScript? React.useRef() needs a type. Not sure what type the dom ref is. Any ideas?
HTMLDivElement?
Thanks I figured it out already. There were 3 problems.
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: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.
How would I reverse this effect once it's about to leave the viewport?
I have it disappearing, but without any effects this way:
Thank you for this post!
Very useful, I didn't know about
IntersectionObserver
, more awesome features to take a look at.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.
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
Thanks for including the accessibility note!
Huh, neat. Thanks for the post! I like the use of hooks too :)
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.
ooosom, i gona try out, thanks you very much!
Super useful.
Thanks!
Is it possible to adapt it so that the animation only occurs when scrolling down and not when scrolling up?
Check out this comment: dev.to/_kushagra/comment/lf24
This is great! Thank you!