Jump to content
Search Community

Disable jQuery mouseover TL while intro TL plays

TomWWD 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

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.

See the Pen rpEqVg by TomBismuth (@TomBismuth) on CodePen

Link to comment
Share on other sites

Hi @TomWWD,

 

Welcome to the GreenSock Forum.

 

It is sufficient if the screenobject is pushed down.
Hiding (autoAlpha: 0) is not required (line24).

 

See the Pen 7e1add1f3a6c237cf247e94a1af36d61 by mikeK (@mikeK) on CodePen

 

And: I have integrated a "touch screen" (html line52).
It irritates - my point of view - if the 'mouseenter' area is larger than the visible object.

 

Happy tweening ...

Mikel

 

 

  • Like 1
Link to comment
Share on other sites

Hi @mikel thanks very much for the quick response.

The touchscreen seems like a really good solution to accidental mouseovers and makes it feel more interactive.


Unfortunately, as you can see in my gyazo it still presents some issues if you mouseover while the bloganim timeline is running.

Namely the #Screen-window-Background element not showing properly when you mouseover during the animation (They grey background to the screen window that slides in first).


https://gyazo.com/1639bec58543f4147ce85f3a77bd72f1


but when I let it finish...


https://gyazo.com/4efeb43df8a65769d2409962a728abff


Ideally I'd like a solution to prevent these mouseovers from functioning until the intro timeline has finished, even if it isn't the most appropriate solution in this scenario, as I seem to run into this gap in my knowledge a lot, and it prevents me from creating more complex animations than simply elements that tween in.


Thanks again :D

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...