Klm retweetledi
CSS Trick 🍏
You can create that Apple-style blowout text effect with CSS scroll animations and fixed positioning ⚡️
.word {
animation: blowout;
animation-timeline: --section;
}
@keyframes blowout {
0%, 95% { background: transparent; }
to { transform: translateZ(99vh); background: #000; }
}
The trick here is to fix the position of some things in your layout and then animate them based on their non-fixed containers ⭐️
The .word is position: fixed within a that has a height of 200vh
section {
view-timeline: --section;
}
section:first-of-type {
height: 200vh;
}
Every section has a view-timeline: --section that creates a scoped ViewTimeline for each section's children 🤙
As that first section scrolls out of view, you increase its opacity and move it on the z-axis towards you. That gives it the impression of scaling up 🆙
.word {
animation: blowout, fade-in;
animation-timing-function: ease-in;
animation-fill-mode: both;
animation-timeline: --section;
animation-range: exit-crossing 10% exit 0%;
}
You can use the exit-crossing range combined with the exit range to get a timing you like ✨ Definitely experiment with these ranges to see how they play. The timing function creates interesting effects too!
At the same time as the text scales up, you need to fade in the video and the text that goes with it. Again, you can use the parent container's ViewTimeline --section
p, video {
animation: fade-in, fade-out;
animation-timing-function: ease-in;
animation-fill-mode: both;
animation-timeline: --section;
}
p {
animation-range: entry 10% entry 35%,
exit 0% exit 25%;
}
video {
animation-range: entry 0% entry 25%,
exit 10% exit 35%;
}
The timings are slightly different here. Again, you can play with them to get something that feels right for you!
@keyframes fade-in { to { opacity: 1; }}
@keyframes fade-out { to { opacity: 0; }}
Theoretically, you should be able to do something with animation-direction: reverse/alternate like yesterday's demo
video {
animation: fade 2 both linear alternate-reverse;
}
The trick with this effect is all about timing and creating containers that are bigger than the content and using them to drive the animations 🏎️
The scroll-driven signature is a bonus! ✍️ Perhaps a follow-up on that one 🤙
As always, any questions, requests, etc. Hit me up!
With this demo, the GreenSock ScrollTrigger code is included where the CSS scroll-driven animations API is not supported 🙌 That means you could use this demo today!
@CodePen link below! 👇
KINANyut@pukimolimampu
@jh3yy @jensmourinho @CodePen Jhey were u able to do a long layover with a scrolltriger pen for this? 😂
English
