You can use scroll-driven animations to progressively enhance collapsing a floating call to action 🤏
CSS Tip! 📜
You can use scroll-driven animations to progressively enhance collapsing a floating call to action 🤏
.cta {
animation: shrink;
animation-timeline: scroll();
animation-range: 0 100px;
}
@keyframes shrink {
to { width: 48px; }
}
That's the gist of it. Use the body scroll position with animation-timeline: scroll(). Define the animation-range as when you have scrolled 100px.
There's a little more though 🤓
That would "scrub" the width animation. Ideally, you want to trigger that animation. You could animate a custom property with steps() timing and use that to define the width ✨
@property --scrub {
syntax: 'number';
inherits: true;
initial-value: 0;
}
body {
animation: scrub both steps(1, end);
animation-timeline: scroll();
animation-range: 0 100px;
}
Then transition the --scrub property on the CTA and use it for the width 🤙
.cta {
transition: --scrub 0.2s;
width: calc(48px + (120px * (1 - (var(--scrub) / 100))));
}
Other animations are a matter of preference and timing. For example, you could then make the hand wave, scale down the size, and then slide a gradient across 😉
They have the same structure and technique as the original concept. Waving the hand? 👋 Run it twice, offset the transform-origin.
.hand {
animation: wave both linear 2;
animation-timeline: scroll();
animation-range: 30vh 50vh;
transform-origin: 65% 75%;
}
@keyframes wave {
50% { rotate: 20deg; }
}
How's it progressively enhanced? Wrap everything in a @supports query and a @media query. If there isn't support, users still get a good experience. It's a floating action button that's circular and already collapsed 🤙
@supports(animation-timeline: scroll()) {
@media(prefers-reduced-motion: no-preference) {...}
}
Definitely have a play with the code. It's amazing what we're going to be able to do with CSS alone! 🔥|
#ytshorts #html #css #javascript #programming #trendingshorts #trend #youtubeshort #ytshort #yt #ytshortsindia #shortsvideo #shorts #shortsfeed #shortfeed #viral #trending #viral #ui #webdevelopment #website #webdesign #webdeveloper #webdesigner #web3 #html #html5 #codepen #css #css3 #javascript #jquery #angular #react #creative #creativity #video #videos #vlog #vlogs
🎯 SUBSCRIBE to get more amazing AI Videos!
► https://www.youtube.com/@3sdcode?sub_...
Live Demo and Source Code: https://codepen.io/jh3y/pen/mdvYeXZ
Video Credit By: / jh3yy