KP-C

Kevin Powell - Community•3y ago•

18 replies

Frank

Scroll animations relation to overflow

Kevin's video on scroll animations was really fun, and I have been implementing some progressive enhancement on my sites. I am, however, running into a weird quirk. I couldn't figure out what was happening until I installed the scroll driven animation Chrome extension.

For these examples I am using a simple

.fade-in

.fade-in

animation†. This works well for the

post-card

post-card

s I have on the home page††, but not for

img

img

's†††, and I figured out it's because I have

overflow: hidden

overflow: hidden

set on a parent element in the DOM.

† https://github.com/frankstallone/frankstall.one/blob/main/src/css/animation.css#L1
†† https://github.com/frankstallone/frankstall.one/blob/main/src/css/blocks/post-card.css#L8
††† https://github.com/frankstallone/frankstall.one/blob/main/src/css/animation.css#L37

GitHub

frankstall.one/src/css/animation.css at main · frankstallone/franks...

Home of the Internet's favorite Frank Stallone. Contribute to frankstallone/frankstall.one development by creating an account on GitHub.

GitHub

frankstall.one/src/css/blocks/post-card.css at main · frankstallone...

Home of the Internet's favorite Frank Stallone. Contribute to frankstallone/frankstall.one development by creating an account on GitHub.