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