Hey everyone, thanks in advance for your time.
I've searched the forums for common solutions, but i'm a bit too new to JS to translate the more complicated ones into my simple task.
I'm currently trying to get the animation in the provided codepen to work with the included mouseover feature correctly.
If you try and mouseover while the animation runs, you'll see that the text elements fail to tween in by the time you mouseleave.
I've searched the forums for solutions, but i'm still pretty new to JS so i'm rather dense as to how to use the isActive() function, which I assume would need to be used to prevent the mouseover working until all the intro elements have tweened in.
To replicate this, try to mouseover straight away on the provided codepen, and you'll see that the text fails to appear from the intro animation.
I've annotated the codepen, but here's the mouseover part.
var wwdtransition = new TimelineMax({paused:true});
wwdtransition.to ('.screenobject',0.5,{y:300, autoAlpha:0})
.to('#playbutton', .3, {autoAlpha:1},"-=.2");
;
//mouseover functions
$(document).on("mouseenter", ".col-md-12", function() {
wwdtransition.play();
}).on("mouseleave", ".col-md-12", function(){
wwdtransition.reverse();
});
Thanks again for your time, i'm really enjoying using GSAP, and with a solution to this, I imagine I can just copy + paste it to replicate the effect in future work.