BradLee

Specifically I'm working on preventing a hover animation from firing after a click animation has fired. Its for a web app for primary teachers. I'm all for Firebase as well.

not really. Is there a neat way of doing an 'onstart' like - let tl = new TimelineLite({paused: true}); tl.onStart( //change css ) .to( ... ) .to( ... )

Hi all, I have a timelineLite that disables pointer-events on a div. When the div is clicked, it fires the timeline. This works except that it allows 1 final 'mouseout' event after pointer-events should have been disabled. let div = document.querySelector(`div`); div.onclick = function() { console.log('click!'); tl.play(); }; div.onmouseout = function() { console.log('mouseout!'); }; let tl = new TimelineLite({paused: true}); tl.set(div, {css: {pointerEvents: `none`}}) Any ideas?

sure, here you go.. http://codepen.io/BradLee/pen/xVpBjx

Hey all, I have a tween that goes from 1 color to another. It works fine when using hex values but when using hsla values the color will first go brighter, then tween to the desired colour. Does anyone know why this is, work around?

Spot on, thanks for that!

In your codepen example, the problem still exists and also the animation plays over and over again. I can reset my tween by creating a new tween within the complete function, using .set() and individually changing the values of each attribute back to original values. This seems a lot of work just to reset a tween (it does not work if I try and use .set() on the original tween). Code below - let myTween = TweenMax.to(icon, time, { rotation: `60`, transformOrigin: "50% 50%", ease: ease, onComplete: function(){ TweenLite.set(icon, {rotation: `0`, transformOrigin: `50% 50%`}) // myTween.set(icon, {rotation: `0`, transformOrigin: `50% 50%`}) } });

I'm trying to reset a tween with .invalidate() however when I attempt to use it, after the initial animation, it triggers my 'onComplete' function infinitely and eventually locks up my browser. The docs don't give any examples of how to use this function (http://greensock.com/docs/#/HTML5/GSAP/TweenMax/invalidate/) and other forum posts link to codepens that don't work. My code - var myTween = TweenMax.to(icon, time, { rotation: `60`, transformOrigin: "50% 50%", ease: ease, onComplete: function(){ console.log('complete'); myTween.invalidate(); } });