Roll Reveal
Loading "Implementing Roll Reveal Effect"
Implementing Roll Reveal Effect
Run locally for transcripts
π¨βπΌ Time to animate the logo tiles. We wanna go a bit fancy here, to really wow the user as we reveal our art-directed logo grid.
π¨βπΌ Make the logo tiles "roll", scale-up and fade in over
0.4 seconds.Keyframes definition
π¨ Add one more
keyframes set in the Tailwind theme. This one should start with...- a rotation of
12degrees - a scale of
0% - an opacity of
0%
...and end with:
- a rotation of
0degrees - a scale of
100% - an opacity of
100%
Custom timing function
π¨ Add a 'roll-reveal' animation to the Tailwind theme. It should use the 'roll-reveal'
keyframes you just created, and animate once over 0.4 seconds.π¨βπΌ Have some fun with the easing function. There is no right or wrong answer here (well, don't quote me on that when speaking to the designers).
Cubic-BΓ©zier curves
Instead of basic transition timing functions like
linear or ease-in, uou can use the π cubic-bezier() CSS function to create bespoke π BΓ©zier curve easings for your animations.π° It's very hard to "visualise" what the
cubic-bezier() function does, but luckily for us, there are some great online tools to help. cubic-bezier.com is a fantastic example!Open Props FTW
Have you heard of Open Props by Adam Argyle? It's a fantastic collection of CSS variables for common design properties or "tokens" like
colors, and spacing.Turns out they have a bunch of
easing functions as well βΒ we could try one of those in our project!π§ββοΈ I've added the 'open-props' npm package and imported a series of easing timing functions in the :
import easings from 'open-props/src/easing'
π§ββοΈ You can use one of these to fine-tune the "roll-reveal" animation!
Animating the logo tiles
π¨ Add the
roll-reveal animation to the logo tiles.