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 animation†. This works well for the post-cards I have on the home page††, but not for img's†††, and I figured out it's because I have 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#L37GitHub
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.
16 Replies
I create a Loom video to articuate better: https://www.loom.com/share/9c6b46bc49384cc39c8dd0947b6b8f94
Not completely sure, but the overflow:hidden property creates a new scroller area.
(https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#hidden)
The view() function will be set to the nearest scroller area (which is not the viewport anymore)
(https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/view)
Unfortunately I don't have the time to dive in to it more and test out one an other. But I think this can be solved with timeline-scope.
(https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope)
Thank you for the explanation. If I understand it I can figure out the solution. Or at least make sense of the solution you just proposed! 😁
Okay so it feels like I am closer, but not there, yet.
https://www.loom.com/share/690d3abc6c1b4dba932ebce11446363d?sid=05fb8bfd-1935-4762-898b-619dddfae604
overflow: clip saved the day!what is the scroll driven animation Chrome extension? like what does it do?
Scroll-Driven Animations Debugger
A DevTools extension to visualize and debug Scroll-Driven Animations
You can see what it does in my videos above. Made for these scroll animations.
everything outside of the actual webpage content is super blurry, oh wel lwas just curious
Toggle 4k mode. Pretty clear when you do that.
Loom probably defaults to a lower quality.
Yep, everytime I click on that link it starts at 720p despite me recording it at 4k.
I tried, there was only one option under Settings-> Quality which was “auto”. It’s whatever , I assume it’s the debugging extension I found so that’s all I wanted to know.
I have an open ticket with Loom now to figure out why it's defaulting to 720p when 4k is an option and I have a gigabit hardwired connection.
What phone is this? If you dont mind me asking. For the support ticket.
iPhone XR
Aside: My mom has a iPhone X and it can't update to iOS 17 — are you able to get to that latest iOS version?