@sksksk2024
Posted
Yap, I aggree, your animation is nice, @xup60521 !! Keep it up!! ;)
What are you most proud of, and what would you do differently next time?
I used gsap
to implement two animations. First is number increment, and second is summary blocks entrance animation.
Both are easy to do with this animation library. When setting up the result value, the only thing we need to do is call gsap.to
function.
gsap.to("#result", {
innerText: "76",
duration: 1,
ease: "power1.inOut",
snap: { innerText: 1 },
});
Whenever an user open this page, the animation would automatically play.
Apart from that, I also add another animation. This one has a twist, and we need to take advantage of gsap
βs helper function.
const summaryBlocks = gsap.utils.toArray(".summary-block");
By doing so, summaryBlocks.forEach
can apply multiple GSAP animation to each component at once.
summaryBlocks.forEach((summaryBlock, index) => {
gsap.fromTo(
summaryBlock,
{
opacity: 0,
y: 10,
},
{
opacity: 1,
y: 0,
ease: "power1.out",
duration: 0.5,
delay: 0.1 * index + 0.225,
}
);
});
When an user enter this website, these elements fade in sequentially.
@sksksk2024
Posted
Yap, I aggree, your animation is nice, @xup60521 !! Keep it up!! ;)
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord