css анимация с GSAP

Question

Как достичь этой анимации с помощью GSAP. Вот код CSS

.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; 
    } 
} 

Вот что я пытался, но анимация не очень хорошо:

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 }); 

Он одушевляет с шагами. Вот fiddle

---

Вот solution что greensocks дал на их форуме:

function drizzleFall(elem, delay){ 
    var tl = new TimelineMax({repeat:-1, delay:delay}); 
    tl.fromTo(elem, 1, {y:0}, {y:21, ease:Power1.easeIn}) 
    .fromTo(elem, 0.5, {opacity:0}, {opacity:1, repeat:1, yoyo:true, ease:Linear.easeNone}, 0); 
} 

Answer 1

Должно быть легче достичь, here is your resulting fiddle.

JS:

var cloudDrizzle = document.querySelectorAll('#cloudDrizzle2 .climacon_component-stroke_drizzle'); 
var duration = 1; 
var firstTimeline = createTimeline(cloudDrizzle[0], duration, 0); 
var secondTimeline = createTimeline(cloudDrizzle[1], duration, duration * 0.6); 
var secondTimeline = createTimeline(cloudDrizzle[2], duration, duration * 1.2); 

function createTimeline(target, duration, delay) { 
    var timeline = new TimelineMax({ repeat: -1, delay: delay }); 

    timeline.fromTo(target, duration, { 
    opacity: 0 
    }, { 
    bezier: { values: [{ opacity: 1 }, { opacity: 0 }]}, 
    ease: Power1.easeIn 
    }, 0); 

    timeline.to(target, duration, { 
    y: 21, 
    ease: Power1.easeIn 
    }, 0); 

    return timeline; 
} 

Надеется, что это помогает.