sdras / gsap-player

A small, customizable youtube-like player for gsap timelines
100 stars 9 forks source link

Use `new TimelineMax()` for better control #6

Open shshaw opened 7 years ago

shshaw commented 7 years ago

Instead of attaching directly to the user's timeline, create a new TimelineMax instance to allow for attaching to event callbacks and controlling repeats.

Rough idea of how it might used:

var playerTL = new TimelineMax();
playerTL.add( params.playerTL ); // User timeline is added and now has set the whole duration of the new Timeline.

playerTL.eventCallback('onUpdate',function(){
  var p = playerTL.progress();
  slider.value = p * 100;

  var wasPlaying = isPlaying;
  isPlaying = !playerTL.paused();
  if ( wasPlaying !== isPlaying ) {
    TweenMax.set( isPlaying ? play : pause, { opacity: 0 });
    TweenMax.set( isPlaying ? pause : play, { opacity: 1 });
  }
});
sdras commented 7 years ago

Great idea!