Я пытаюсь на бесконечность повернуть несколько SVG-кругов, а затем в какой-то момент приостановить вращение, сбросить начало вращения (не вращение элементов, потому что это заставит их «прыгать» в начальное вращение), а затем уменьшить их. с исходным значением преобразования 100% 100%.
Я использую GSAP для этого проекта и пока мой код.
// Looping timelines (Will be playing when animateOut is called)
const mediumCircle = new TimelineMax({paused: true, repeat: -1}).to(select('.medium-circle'), 60, {rotation: '360deg', ease: Power0.easeNone}),
patternCircle = new TimelineMax({paused: true, repeat: -1}).to(select('.pattern-circle'), 50, {rotation: '-360deg', ease: Power0.easeNone}),
dottedCircle = new TimelineMax({paused: true, repeat: -1}).to(select('.dotted-circle'), 45, {rotation: '360deg', ease: Power0.easeNone});
//
const animateOut = () => {
return new Promise((resolve, reject) => {
const mtl = new TimelineMax({onComplete: resolve}),
titleTl = new TimelineMax(),
logoTl = new TimelineMax();
// logotl does it's own animation
titleTl.addCallback(() => {
mediumCircle.pause();
patternCircle.pause();
dottedCircle.pause();
})
.set([
'.large-circle',
'.medium-circle',
'.pattern-circle',
'.dotted-circle',
'.main-circle'
],
// Reset the rotation origin and set transform origin to 100% 100%
)
.staggerTo([
'.large-circle',
'.medium-circle',
'.pattern-circle',
'.dotted-circle',
'.main-circle'
], 2.5, {
scale: 0,
ease: Back.easeOut.config(.5),
stagger: {
each: .1
}
})
.addCallback(() => select('video').pause());
mtl.add(logoTl);
mtl.add(titleTl, '0');
});
}
Заранее большое спасибо!