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
 
joeljaison394 profile image
Joel Jaison •

Nice work

Collapse
 
link2twenty profile image
Andrew Bone •

Thank you ☺️

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
 
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
 
alexmgp7 profile image
Alexander •

Nice

Collapse
 
link2twenty profile image
Andrew Bone •

Thank you ☺️

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
 
cadje profile image
Michael Gaderer •

Thanks for sharing

Collapse
 
abdulrahilsheikh profile image
abdulrahilsheikh •

Great work man 🔥

Collapse
 
citronbrick profile image
CitronBrick • • Edited

Fantabulous

Collapse
 
link2twenty profile image
Andrew Bone •

Thank you ☺️

Collapse
 
idevgames profile image
iDev-Games •

It's cool to see CSS opening up more options for scroll animations. However this is why I created Trig.js so you can have a complete level of control by having the position data in a CSS variable to work with. Giving you complete control over your position elements with CSS variables for percentages, pixels or degrees. Take a look out this simple tutorial to see how it all works.

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.