TweenMax - Как анимировать элемент с разной скоростью? - PullRequest
Новая
       101

TweenMax - Как анимировать элемент с разной скоростью?

1 голос
/ 05 февраля 2020

Я новичок ie в TweenMax. js, и я пытаюсь здесь анимировать непрозрачность и положение элемента. Я хочу, чтобы элемент появился через 0,5 секунды, а горизонтальное перемещение элемента должно завершиться за 2 секунды.

Это то, чего я достиг до сих пор. 

var tl = new TimelineMax(); 
tl.to('.elem', 2,{autoAlpha:1,x:0,ease:Power4.easeInOut});

Я пробовал этот код, но анимация горизонтального перемещения начинается только после анимации непрозрачности 

var tl = new TimelineMax();
tl.to('.elem', 2, {x:0,ease:Power4.easeInOut})
.to('.elem', 0.5, {autoAlpha:1});

Как я могу анимировать свой элемент на разных скоростях, изменив существующий код? 

var tl = new TimelineMax();
var e = document.querySelectorAll('.text');
e.forEach(function(elem) {
  elem.innerHTML = elem.innerHTML.replace(/\S/g, '<span class="elem">$&</span>');
})
tl.to('.elem', 3, {
  autoAlpha: 1,
  x: 0,
  ease: Power4.easeInOut
});
span {
  display: inline-block;
  font-size: 30px;
  opacity: 0;
}

span:nth-child(1) {
  transform: translateX(-15px);
}

span:nth-child(2) {
  transform: translateX(-10px);
}

span:nth-child(3) {
  transform: translateX(-5px);
}

span:nth-last-child(3) {
  transform: translateX(5px);
}

span:nth-last-child(2) {
  transform: translateX(10px);
}

span:nth-last-child(1) {
  transform: translateX(15px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="text">Hello World</div>

Ответы [ 2 ]

2 голосов
/ 06 февраля 2020

После нескольких часов поиска я наконец нашел решение.

https://greensock.com/forums/topic/10133-how-can-i-run-multiple-tweens-in-parallel-in-a-timeline/

Для одновременной работы подростков необходимо вставить их в один и тот же момент времени на временной шкале.

Где анимация вставлена ​​во временную шкалу, контролируется параметром позиции. В моем примере я могу запустить вторую анимацию одновременно с первой анимацией, добавив в момент времени 0 , например 

 tl.to('.letter', 2,{autoAlpha:1,ease:Power4.easeInOut})
 .to('.letter', 4, {x:0,ease:Power2.easeIn}, 0)
0 голосов
/ 06 февраля 2020

Я добавил transition: opacity .5s; transition: transform 2s; к элементу span 101 CSS, чтобы изменить продолжительность двух разных переходов. Подробнее о CSS свойствах перехода можно прочитать здесь: https://www.w3schools.com/css/css3_transitions.asp

var tl = new TimelineMax();
var e = document.querySelectorAll('.text');
e.forEach(function(elem) {
  elem.innerHTML = elem.innerHTML.replace(/\S/g, '<span class="elem">$&</span>');
})
tl.to('.elem', 3, {
  autoAlpha: 1,
  x: 0,
  ease: Power4.easeInOut
});
span {
  display: inline-block;
  font-size: 30px;
  opacity: 0;
  transition: opacity .5s;
  transition: transform 2s;
}

span:nth-child(1) {
  transform: translateX(-15px);
}

span:nth-child(2) {
  transform: translateX(-10px);
}

span:nth-child(3) {
  transform: translateX(-5px);
}

span:nth-last-child(3) {
  transform: translateX(5px);
}

span:nth-last-child(2) {
  transform: translateX(10px);
}

span:nth-last-child(1) {
  transform: translateX(15px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="text">Hello World</div>
...