SVG animation / TweenMax / Reverse 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/