Перезапись SVG Элемент Поворот Происхождение - PullRequest
Новая
       45

Перезапись SVG Элемент Поворот Происхождение

0 голосов
/ 08 октября 2019

Я пытаюсь на бесконечность повернуть несколько 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');
    });
}

Заранее большое спасибо!

...