How can achieve this animation with GSAP. Here is the css code
.element {
-webkit-animation-name: fall, opacity;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 1s;
}
@-webkit-keyframes fall {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(21px);
}
}
@-webkit-keyframes opacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Here is what I tried but the animation is not very good:
var tlm=new TimelineMax({repeat:-1, delay:delay, repeatDelay:0, yoyo: false, ease: Sine.easeIn });
tlm.from(elem, 1, {y:0, opacity:0 })
.to(elem, 1, {y:10, opacity:1 })
.to(elem, 1, {y:20, opacity:0 });
It animates with steps. Here is the fiddle.
Can I make separate function for opacity and translate-y?
