Zup• 1,270
@xup60521
Submitted
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.
