Future CSS Tip! π
You can create that Apple style blow out text effect with CSS scroll-driven animations β‘οΈ No JavaScript!
The trick is to animate SVG text along the z-axis using 3D transforms π
.word {
animation: blow-out both ease-in;
animation-timeline: --section; π
animation-range: exit-crossing 10% exit 0%;
}
keyframes blow-out {
to { transform: translate3d(0.05ch, 0, 99vh); }
}
The animation makes the text cover the viewport and blends into the next section which has the same background-color π€
The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style
.section__content {
transform-style: preserve-3d; π
perspective: 100vh;
}
We're using an SVG to maintain the crispness of the text as it scales up β¨ Use these attributes on the <text> within the SVG to align things π€
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">
Your Name
</text>
It's the last day of #AppleEvent week but I do have some more of these I'll put together next week π
@CodePen link below! π
I have never felt the benefits of mindfulness.
This may not have been possible in the first place.
How do you know if you are or are not doing it?
Can you notice if you are in the process?
#mindfullness
Pure css is often employed for fear of extensions, etc., but can usually be achieved with bootstrapping or tailwindcss.
Don't want to spend a lot of time there.