Learn by building small animations
After completing this 1-2hr workshop, you will:
yarn
and yarn start
src/1-animating-with-springs/README.md
. (It's suggested to view the README.md files for each lesson in a markdown interpreter for a better experience and to avoid getting potentially spoiled by seeing hints before you need them.)TODO
placeholder comments.First, make sure you understand how to use:
Which simply transition between 2 pre-existing values
.example {
opacity: 0.9;
transition: opacity 0.25s;
&:hover {
opacity: 1;
}
}
Which animate between 2 values, a classic use is adding a fade-in effect for newly mounted elements:
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.some-element {
opacity: 0;
animation: fadeIn 0.25s forwards;
}
CSS has a lot of advantages like potential performance benefits when used correctly, ease of use, and a lack of state that causes animations to get out of sync. But there are reasons you would waant to look towards using JS instead.
ease-in
)?(Although it's great...)
You could use many other libraries to achieve the exact same effects as react-spring, or even roll your own with a tiny spring simulator library.
I've learned this the hard way: don't just try random stuff and hope that things look ok, break animations down into intentional bite-size pieces.