Added interactivity to my SVG animation

I’ve been doing some more simple experiments with SVG animation using GSAP, and amended my chicken-in-a-fokker scene on Codepen that I wrote about in the last article.

I’ve added a pause in the timeline, and a button that unpauses it.

/* click button to start animation */
bombBtn.click(function() {
   if(dropBombTL.paused()){
      dropBombTL.paused(false);
      bombBtn.addClass("disabled");
   }
});

You can call functions at a certain point in a GSAP timeline, which will be handy. That’s how I called the pause function.

dropBombTL = new TimelineMax({repeat:-1});
dropBombTL
   // lots of timeline stuff here
   .add(pauseTL)
   // more timeline stuff here
;

function pauseTL(){
   dropBombTL.pause(); 
}

You can find the full, interactive thing on Codepen here.