css анимация с GSAP

Как можно добиться этой анимации с помощью 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 });

Он анимируется шагами. Вот скрипта

Вот решение, которое компания 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);
}

javascript css-animations gsap
person    schedule 26.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Должно быть легче достичь, вот ваша результирующая скрипка.

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

Надеюсь это поможет.

person Tahir Ahmed    schedule 26.12.2015
comment
@XhevantZiberi: взгляните на этот ответ, опубликованный самим Джеком (автором GSAP) для гораздо более чистого решения. - person Tahir Ahmed; 27.12.2015
comment
Спасибо @Tahir за ответ, да, Джек дал отличное решение. - person Xhevat Ziberi; 28.12.2015