Search the Community

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>