SVG animation/TweenMax/Обратная анимация

Question

Вот анимация, которая работает с yoyo = true, означает, что анимация идет в одну сторону, а затем выполняет «обратную» анимацию.

Я хотел бы иметь возможность воспроизводить анимацию в режиме обратного без использования режима yoyo.

Другими словами, я хотел бы иметь вторую часть (обратный один)

https://codepen.io/chrisgannon/pen/greVXG

var xmlns = "http://www.w3.org/2000/svg", 
    xlinkns = "http://www.w3.org/1999/xlink", 
    select = function(s) { 
    return document.querySelector(s); 
    }, 
    selectAll = function(s) { 
    return document.querySelectorAll(s); 
    } 


TweenMax.set('svg', { 
    visibility: 'visible', 
    transformOrigin:'50% 50%', 
    scale:1 
}) 

var mainTl = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:2}); 
var skySunTl = new TimelineMax({paused:true}); 
skySunTl.fromTo('#lower', 10, { 
    stopColor:'#020111' 
},{ 
    stopColor:'#CD82A0', 
    ease:Linear.easeNone 
}) 
.fromTo('#upper', 10, { 
    stopColor:'#1F1F2B' 
},{ 
    stopColor:'#4B4A6A', 
    ease:Linear.easeNone 
},'-=10') 

.to('#lower', 10, { 
    stopColor:'#95DFFF', 
    ease:Linear.easeNone 
}) 
.to('#upper', 10, { 
    stopColor:'#94DFFF', 
    ease:Linear.easeNone 
},'-=10') 

.to('#lower', 10, { 
    stopColor:'#f9b681', 
    ease:Linear.easeNone 
}) 
.to('#upper', 10, { 
    stopColor:'#eb4a78', 
    ease:Linear.easeNone 
},'-=10') 

.fromTo('#sun', 10, { 
    fill:'#B30200' 
}, 
    { 
    fill:'#EC8323', 
    ease:Linear.easeNone 

},'-=30') 
.to('#sun', 10, { 
    fill:'#FFF', 
    ease:Linear.easeNone 
},'-=20') 
.to('#sun', 10, { 
    fill:'#fefdeb', 
    ease:Linear.easeNone 
},'-=10') 

.fromTo('#sun', 15, { 
    attr:{ 
    cy:410, 
    r:105 
    }},{ 
    attr:{ 
    cy:0, 
    r:90 
    }, 
    ease:Power1.easeInOut 
},'-=30') 
.to('#sun', 14, { 
    attr:{ 
    cy:300, 
    r:105 
    }, 
    ease:Sine.easeInOut 
},'-=13') 
.from('#mainCircleMask circle', 30, { 
    attr:{ 
    r:500 
    }, 
    ease:Power1.easeInOut 
},'-=30') 

var waterTl = new TimelineMax({paused:true}); 
waterTl.fromTo('#waterCircle', 30, { 
    fill:'#020111' 
},{ 
    fill:'#5DB3C6', 
    ease:Linear.easeNone 
}) 
.fromTo('#waterRipple', 30, { 
    fill:'#020111' 
},{ 
    fill:'#A5DCE4', 
    ease:Linear.easeNone 
},'-=30') 
.fromTo('body', 30, { 
    backgroundColor:'#020111' 
},{ 
    backgroundColor:'#FFF', 
    ease:Linear.easeNone 
},'-=30') 


var skySunTween = TweenMax.to(skySunTl, 10, { 
    time:skySunTl.duration(), 
    ease:Power2.easeInOut 
}) 

var waterTween= TweenMax.to(waterTl, 10, { 
    time:waterTl.duration(), 
    ease:Power2.easeInOut 
}) 
mainTl.add(skySunTween, 0); 
mainTl.add(waterTween, 0); 
mainTl.timeScale(4); 
mainTl.play(0) 
//ScrubGSAPTimeline(mainTl) 

//tl.timeScale(30) 

Спасибо

Answer 1

Это должно сделать трюк, используя смесь reversed:true в вашем конструкторе TimelineMax(). А также с помощью progress(0.5) когда цепи вашей временных рамок/анимации:

https://codepen.io/jonathan/pen/dNxgVK

Я изменил это:

var mainTl = new TimelineMax({ 
    repeat:1, 
    yoyo:true, 
    repeatDelay:2 
}); 

В связи с этим с помощью reversed:true

var mainTl = new TimelineMax({ 
    reversed:true 
}); 

reversed находится в TimelineMax Docs :

обратная (значение: Boolean): * Возвращает или задает перевернутое состояние анимации, которая указывает, является ли или не анимация должна воспроизводиться в обратном направлении.

И я изменил эту

mainTl.add(skySunTween, 0); 
mainTl.add(waterTween, 0); 
mainTl.timeScale(4); 
mainTl.play(); 

К этому и добавил progress(0.5), который представляет собой половину пути через график

mainTl.add(skySunTween, 0); 
mainTl.add(waterTween, 0); 
mainTl.timeScale(4); 
mainTL.progress(0.5); // added GSAP progress() method 
mainTl.play(); 

.progress ( значение: Количество, suppressEvents: Boolean ): * [override] Получает или ets ход выполнения временной шкалы, который представляет собой значение между 0 и 1, указывающее положение виртуальной точки воспроизведения (исключая повторы), где 0 находится в начале, 0,5 на полпути завершено, а 1 завершено.

Ресурсы:

progress(): https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/

TimelineMax: https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/