Responsive Animations
Run locally for transcripts
๐จโ๐ผ At the
xl
breakpoint, make the animations slide from the right instead of from the top.Keyframes definition
๐จ Create a new
slide-left
set of keyframes
, which is just like the slide-up
one, but with the 20px
translation happening on the X
axis.๐จ Create a new
animate-slide-left
utility so you can apply it to elements.Animating elements
๐จ At the
xl
breakpoint, override the slide-up
animations on the logo, h1
and paragraph with the new slide-left
animation.๐ฆ Looks like the
animation-delay
sub-property gets reset to its default value (0s
) when applying the xl:animate-slide-left
class. Make sure you redefine it at the xl
breakpoint!