css animation with GSAP

Question

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

---

Here is the solution that greensocks gave on their forum:

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

Should be easier to achieve, 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;
}

Hope this helps.