Animation with Interaction

In notebook:
FrontEndMasters SVG Animation
Created at:
JavaScript jQuery libraries animation
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.

Most animations were linear or Sine, except for the last one which was bouncer to alert the user. 
Since jQuery 3.0 it's possible to do class operations on SVG. you can also do this with vanilla JS.

She was nagging the jQuery team a lot for this feature. Makes it much cleaner to work with SVG with jQuery. 

Using GSAP with jQuery
  $("#close").on("click", function() {

    if ($(this).hasClass("contactOpen")) {
    } else {
      // GSAP


JS Detection for CSS Animation


This is native. The codepen shows what you can hook into
  • ​animationstart
  • ​animationiteration
  • ​animationend
You need to prefix for your browser for now (in October 2015). 
  var lil = $(".lilguy"),
  logIt = $(".logIt"),
  log = $(".term-content");

logIt.on('click', function() {

lil.on('animationstart webkitAnimationStart oanimationstart MSAnimationStart', 
function() {
  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>");

Useful functions for Interaction + GSAP Timeline

  tl.pause(); // Pause timeline
tl.resume(); // Continue playback
tl.restart(); // Restart the timeline; // Play from Xs; // Play Xs from end; // 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

It's easier if you group elements in the SVG like LEGO blocks. 
  //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");, 4, {
      transformOrigin: "50% 50%",
      rotation: 360,
      ease: Linear.easeNone
    }, "begin");

  return tl;

var repeat = new TimelineMax({repeat:-1});
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. 

​{repeat:-1}​ means loop forever. 

Then the interaction:
  function paintPanda() {
  var tl = new TimelineMax();, 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

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

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

With jQuery UI

"add a UI for the progress bar" (not sure what this means)
  var master = new TimelineMax();
master.add(sceneOne(), "scene1")
      .add(sceneTwo(), "scene2")
      .add(scThree, "scene3");

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

    range: false,
    min: 0,
    max: 100,
    slide: function ( event, ui ) {
    scThree.progress( ui.value/100 );