Jump to content


Using GSAP to trigger other libraries' methods

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've seen some other questions regarding syncing GSAP and audio. I need to be able to create a tool that allows you to establish a region of an audio file as an audio loop, repeat that loop a number of times and then fade out the 'playing' loop after a GSAP animation has finished. In order to do that, I needed a waveform creation tool and didn't have time to build that from scratch.


I've been experimenting with Wavesurfer and its regions plugin. It doesn't have a fade-out method so had to create one using TimelineMax's callback method, but it has most of the other pieces needed to make this happen.


I've got it working but what I'd like to be able to do is combine GSAP's draggable to turn this into a light version of an audio editor where dragging the edges of an audio block would trim the audio from either edge. A right-click context menu could allow for splitting an audio block into 2 separate blocks.


Also, would be very cool to have a draggable fade setting for the ends of the blocks.


Thought this might be interesting enough to some that might like to fork the codepen and play around with it. I've forked the codepen myself and am working toward that end.

See the Pen RKbKzv by swampthang (@swampthang) on CodePen

  • Like 3
Link to comment
Share on other sites

Thank you for sharing swampthang :)

  • Like 1
Link to comment
Share on other sites

Wonder if some of you math geniuses can help me with something. In my app, I'm using FFMPEG to concatenate and save a temp .wav file instead of calculating a number of loops. Also, instead of trying to add a GSAP Tween for the fade using an ease (see above description), I need to just build that in Wavesurfer because of several options in the app that made trying to keep up with where the fade was supposed to occur. It's a pretty fluid thing - GSAP main timeline is constantly be changed, scaled, etc. by the user. Settings can change too. So, here's how I am handling it and it works fine but I lost my nice TweenMax ease for the fade...

function setFadeListener() {

  // masterTL is the master GSAP timeline that contains the animation

  var bgSettings = {bgVolume: 1, fadeOutTime: 5};

  var maxVol = bgSettings.bgVolume,
      totalX = bgSettings.fadeOutTime,
      vol = maxVol,
      fadeStart = masterTL.totalDuration()-bgSettings.fadeOutTime,
  wsBG.setVolume(maxVol); // just making sure the volume is set initially
  // audioprocess is a loop that runs in wavesurfer any time it's playing
  wsBG.on('audioprocess', function () {

  // audioprocess fires continuously

    if(masterTL.time() >= fadeStart) {

      currX = masterTL.time() - fadeStart;
      vol = maxVol-(currX/totalX);
    } else {

I wondered if there was a way in GSAP I could calculate a volume ease rather than the ugly straight line that results from the above. Something like a Power2.easeOut would be awesome. If not in GSAP I'll need to find a formula that calculates this. My Math is a bit rusty.

Link to comment
Share on other sites

Every ease has a getRatio method. 

vol = maxVol - (maxVol * Power2.easeOut.getRatio(currX / totalX));

Here's a post where I do that to make sine waves.



If you want to make the fade part of Wavesurfer, you could add getters/setters to make it easier to work with. This will work with most libraries. No guarantees though. It all depends on how the library creates objects. 





  • Like 2
Link to comment
Share on other sites

Blake, you are the man! I knew you'd have an answer. Thanks so much.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.