SVG animation / TweenMax / Reverse animation - animation

Question

Here is the animation which is running with yoyo = true meaning the animation goes one way and then do the "reverse" animation.
I would like to be able to play the animation in mode reverse without having the yoyo mode.
In other words, I would like to have the second part (the reverse one)
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)
Thank you

Answer 1

This should do the trick, using a mix of reversed:true in your TimelineMax() constructor. And also using progress(0.5) when you chain your timelines/tweens:
https://codepen.io/jonathan/pen/dNxgVK
I changed this:
var mainTl = new TimelineMax({
repeat:1,
yoyo:true,
repeatDelay:2
});
To this using reversed:true
var mainTl = new TimelineMax({
reversed:true
});
reversed is found in the TimelineMax Docs:
reversed ( value:Boolean ) : *
Gets or sets the animation's reversed state which indicates whether or
not the animation should be played backwards.
And i changed this
mainTl.add(skySunTween, 0);
mainTl.add(waterTween, 0);
mainTl.timeScale(4);
mainTl.play();
To this and added progress(0.5), which represents half way through the timeline
mainTl.add(skySunTween, 0);
mainTl.add(waterTween, 0);
mainTl.timeScale(4);
mainTL.progress(0.5); // added GSAP progress() method
mainTl.play();
.progress( value:Number, suppressEvents:Boolean ) : *
[override] Gets or sets the timeline's progress which is a value
between 0 and 1 indicating the position of the virtual playhead
(excluding repeats) where 0 is at the beginning, 0.5 is halfway
complete, and 1 is complete.
Resources:
progress(): https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/
TimelineMax: https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/