- SaaS
- online community
- cohort-based course
- landing page
Jason's Plugins For Carrd
The perfect widget for your
A free Carrd plugin template for roll up and down text animation. The above headline is an example!
Made by @jasonleowsg.
Tutorial
How the current plugin works:I'll explain how it works for the current one so you know how to tweak it. This takes a bit of maths on the animation-name: change;So for the current plugin, we have 4 words. 4 words means 3 animation steps to scroll through, and then 3 again to scroll back. total 6 animation steps.So you need to divide 100% of the animation duration by 6, so each step is 16.66%. And you increment the animation position of the next word to 33.32%. That's why the keyframe selectors in animation-name: change; are set in 16.66% increments:
@keyframes change {
0%,
12.66%,
100% {
transform: translate3d(0, 0, 0);
}
16.66%,
29.32% {
transform: translate3d(0, -25%, 0);
}
33.32%,
45.98% {
transform: translate3d(0, -50%, 0);
}
49.98%,
62.64% {
transform: translate3d(0, -75%, 0);
}
66.64%,
79.3% {
transform: translate3d(0, -50%, 0);
}
83.3%,
95.96% {
transform: translate3d(0, -25%, 0);
}
}