Relative Tweens

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-21
Updated:
2016-11-21
Tags:
animation JavaScript libraries
Affect a large number of elements the same time

For example a large number of elements going from day to night

HSL Relative Color

Instead of just overlaying a semitransparent element. 
What's great about HSL (hue, saturation, lightness) is that it's based on the original colour. Codepen 
Incrementing the colour
  //button hue
function hued() {
  // increment the HUE only:
  var ch1 = "hsl(+=110%, +=0%, +=0%)", 
  tl = new TimelineMax({
    paused: true
  });

// all of the elements
  tl.add("hu");
  tl.to(mult, 1.25, {
      fill: ch1
    }, "hu");
  ...
  // only the body
  tl.to(body, 1.25, {
      backgroundColor: ch1
    }, "hu");

  return tl;
}

var hue = hued();
A complex Codepen  where a city builds up, then you can change the hue of all the individual blocks.