Shows a map (Codepen) where the text in the marker move around based on user interaction. Constrained space (small marker), animation is a good solution to help the user understand the flow.Since jQuery 3.0 it's possible to do class operations on SVG. you can also do this with vanilla JS.

  $("#close").on("click", function() {

    if ($(this).hasClass("contactOpen")) {
      contactOut.restart();
    } else {
      // GSAP
      master.reverse();
      master.timeScale(1.8);
    }

 });

JS Detection for CSS Animation

  var lil = $(".lilguy"),
  logIt = $(".logIt"),
  log = $(".term-content");

logIt.on('click', function() {
  lil.addClass('restart');
});

lil.on('animationstart webkitAnimationStart oanimationstart MSAnimationStart', 
function() {
  log.empty();
  log.append("<p>Animation has started.</p>");
});

lil.on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', 
function() {
  log.append("<p>An iteration fired.");
});

lil.on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', 
function() {
  log.append("<p>Animation has completed.</p>");
  lil.removeClass("restart");
});

Useful functions for Interaction + GSAP Timeline

  tl.pause(); // Pause timeline
tl.resume(); // Continue playback
tl.restart(); // Restart the timeline
tl.play(X); // Play from Xs
tl.play(-X); // Play Xs from end
tl.seek(X); // Go to Xs or 'label'
tl.reverse(); // Reverse playback anytime
tl.timeScale(x); // Speed up/slow down timeline
tl.progress(0.5); // Skip to halfway

you can also add parameters in these functions (​t1.pause("2")​)

Interaction with Responsive

  //variable declaration for the global repeated animations
var gear = $("#gear1, #gear2, #gear3");
...

//animation that's repeated for all of the sections
function revolve() {
  var tl = new TimelineMax();

  tl.add("begin");
  tl.to(gear, 4, {
      transformOrigin: "50% 50%",
      rotation: 360,
      ease: Linear.easeNone
    }, "begin");
    ...

  return tl;
}

var repeat = new TimelineMax({repeat:-1});
repeat.add(revolve());

She put everything that repeats constantly into its own function. If you're using repeats, then you need to add a relative label to it if you want other animation to come before or after it. 

  function paintPanda() {
  var tl = new TimelineMax();

  tl.to(lh, 1, {
    scaleY: 1.2,
    rotation: -5,
    transformOrigin: "50% 0",
    ease: Circ.easeOut
  }, "paintIt+=1");
  ...

  return tl;
}

//create a timeline but initially pause it so that we can control it via click
var triggerPaint = new TimelineMax({
  paused: true
});
triggerPaint.add(paintPanda());

//this button kicks off the panda painting timeline
$("#button").on("click", function(e) {
  e.preventDefault();
  triggerPaint.restart();
});

...

She set ​paused: true​ above, so that it only starts on interaction. 

With jQuery UI

  var master = new TimelineMax();
master.add(sceneOne(), "scene1")
      .add(sceneTwo(), "scene2")
      .add(scThree, "scene3");

//jQueryUI Slider
function updateSlider(){
  $slider.slider("value", scThree.progress() * 100);
}

$slider.slider({
    range: false,
    min: 0,
    max: 100,
    step:.1,
    slide: function ( event, ui ) {
    scThree.pause();
    scThree.progress( ui.value/100 );
  }
});