Dynamic scroll with fade in/out
I am attempting to create a dynamic scroll, where a single paragraph and corresponding image are displayed one at a time. As you scroll, the first paragraph/image is replaced by the second with a fade transition. I can't seem to get only one paragraph and image to show at a time. Would appreciate any help and if there is a cleaner way to do this with a React component or similar happy to explore that too! https://codepen.io/mycenas/pen/oNOZgoR
1 Reply
Scroll driven animations most likely but support isn’t perfect you’ll need the polyfill
https://youtu.be/UmzFk68Bwdk?si=lNOW0_nrZMvLk2Bm
Kevin Powell
YouTube
Incredible scroll-based animations with CSS-only
Been playing with them a little bit up until now, and it's finally time time for a deep dive into scroll-timeline and the scroll() and view() value functions.
In this one I look at a few different effects, like a scroll watcher, fading in images as they enter the viewport, moving elements horizontally as we scroll down, and a few more things as...