DEV Community

Cover image for Future of CSS: Scroll Animations

Future of CSS: Scroll Animations

Andrew Bone on June 13, 2023

Today we're going to be looking at scroll based animations as a part of animation-timeline, at the moment if you want to link and animation to scro...
Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Nice work, I feel seasick

Collapse
 
link2twenty profile image
Andrew Bone

And isn't that what life is all about?

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Yeah, it’s not the vomit, it’s the journey

Collapse
 
abdulrahilsheikh profile image
abdulrahilsheikh

Great work man 🔥

Collapse
 
alexmgp7 profile image
Alexander

Nice

Collapse
 
link2twenty profile image
Andrew Bone

Thank you ☺️

Collapse
 
cadje profile image
Michael Gaderer

Thanks for sharing

Collapse
 
jamstra profile image
Jam Straw

Amazing information.

Collapse
 
link2twenty profile image
Andrew Bone

It's going to be so good when it's landed in stable everywhere! ☺️

Collapse
 
joeljaison394 profile image
Joel Jaison

Nice work

Collapse
 
link2twenty profile image
Andrew Bone

Thank you ☺️

Collapse
 
jeevankaree profile image
Jeevan Kumar Karre

That's a good one, thanks for sharing

Collapse
 
link2twenty profile image
Andrew Bone

It's going to allow for some really cool websites isn't it!

Collapse
 
citronbrick profile image
CitronBrick • Edited

Fantabulous

Collapse
 
link2twenty profile image
Andrew Bone

Thank you ☺️

Collapse
 
jran_benker_eb4564c7863d profile image
Jöran Benker

exit-crossing not the same as exit
entry-crossing not the same as entry

When the principal box is larger than the scrollport you can observe a difference between the entry-crossing and entry as well as between the exit-crossing and exit.

To see this in action, check out these examples:
entry-crossing vs entry
exit-crossing vs exit

Collapse
 
murhafsousli profile image
Murhaf Sousli • Edited

Unfortunately, this only works when the fixed element animation is relative to the root scroll. the animation cannot be applied via a scrollable parent, otherwise they will move up with the scroll.