Jump to content
Search Community

monitor values in running timeline

antialias test
Moderator Tag

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

Is there a tutorial on using console.log (or other methods) to monitor activity inside a running timeline? I'm using a GSAP timeline to control position, rate and volume of a sound playing via howler.js. It's working-- but I'd like a way to check values etc as the project gets more complex.

 

=========

 

 <button id="ex1-play">Play</button>

<button id="ex1-pause">Pause</button>

<button id="ex1-rand">RandPos</button>
  <button id="gsap-play">gsapPlay</button>

<button id="gsap-pause">gsapPause</button>
 <button id="gsap-resume">gsapResume</button>

<button id="gsap-reverse">gsapReverse</button>

 

  <script>
  var sounder = new Howl({
      src: ['sounds/counting2-16.mp3'],
      loop: true,
      autoplay:true,
      volume: 1.0,
      rate: 1.0,
     pos: 1.0
      }),
      
      id3 = sounder.play()

     

var randomPlay = function(){sounder.seek(Math.floor((Math.random()*16)+1))};

       document.getElementById('ex1-play').onclick=function(){

        sounder.stop().play(), sounder.fade(0.0, 1.0, 1000)

         };
            
        document.getElementById('ex1-pause').onclick=function(){sounder.pause()};
        
        document.getElementById('ex1-rand').onclick=randomPlay;
       
      
var tl = new TimelineMax( {paused:true, repeat:-1, yoyo:true});

                 document.getElementById('gsap-play').onclick=function(){tl.play()};
                 document.getElementById('gsap-pause').onclick=function(){tl.pause()};
                 document.getElementById('gsap-resume').onclick=function(){tl.resume()};
                 //document.getElementById('gsap-reverse').onclick=function(){tl.reverse()};  ??  
      
     
                 
                 
                 tl.to(sounder, 15, {rate:"0.75"})
                 .call(randomPlay)
                .to(sounder, 5, {rate:"1.0"})
                .to(sounder, 1, {volume:"0.0"})
                .call(randomPlay)
                console.log(sounder.seek())
              
                 .to(sounder, 2, {volume:"1.0"})
                
                 .to(sounder, 10, {rate:"0.5"})
                 .call(randomPlay)
                 console.log(sounder.seek())
                 .to(sounder, 12, {rate:"1.0"})
                 .call(randomPlay)
                 .to(sounder, 10, {rate:"1.125"})
                 .call(randomPlay)
              
     
  </script>

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

I don't know anything about Howler but it looks like you've had success tweening properties of your Howler objects.

 

My assumption is that if you can tween sounder's volume like

 

tl.to(sounder, 1, {volume:1})

 

Then volume is a property of sounder that you should be able to log with

 

console.log(sounder.volume);

 

If you want to constantly log the volume you can use an onUpdate callback on your timeline. Perhaps something like

var tl = new TimelineMax( {paused:true, repeat:-1, yoyo:true, onUpdate:logStuff});



function logStuff() {

  console.log(sounder.volume);

}

 

 

If you take a few minutes to create a CodePen demo (or jsfiddle, plunkr, jsbin, etc) it will make it much easier to understand what you are doing and offer suggestions.

 

 

 

  • Like 4
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.
×
×
  • Create New...