1502shivam-singh commented on PR #1173:
URL: https://github.com/apache/apisix-website/pull/1173#issuecomment-1171642644
Oh, okay. Nice initiative from your side. I would have really assisted you
on this if I didn't have other work priorities (sad).
Even so, maybe this will help you. Use the below mentioned code to
understand the easing curve type, durations and gaps (stagger) between
intermediate animation.
```
const tl = gsap.timeline({
defaults: {
ease: 'Expo.easeInOut',
},
});
tl.fromTo([titleRef.current, subtitleRef.current, ctaRef.current], {
opacity: 0,
y: 10,
}, {
opacity: 1,
y: 0,
stagger: 0.3,
});
```
Then, edit this animation that you have defined -
```
.hide-title,
.hide-subtitle,
.hide-ctas {
opacity: 0;
@keyframes fade-in-up {
from {
opacity: 0;
transform: translate3d(0, 50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.hero-title,
.hero-subtitle,
.hero-ctas {
animation-name: fade-in-up;
animation-fill-mode: both;
animation-delay: 0s;
animation-duration: 1s;
}
.
.
.
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
