Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
oneiamfor

Basics mouse-event tweening

Recommended Posts

So i've watched the GSAP intro videos; they're great. I mean they're so good they made me think I'd be able to use this library straight away. However I am new to coding and web design and while GSAP allows me to do things i'd never be able to imagine doing on the web I'm struggling to control the outcomes.

 

In my codepen I'm trying to use the mouse hover events to initiate a simple tweenmax animation. I want the user to interact the pouring motion by just a mouseover but once the mouse leaves the bounds of the image it would go back to the starting position.

I think my js coding is messy and not the best way to achieve this, and I think the revert or restart() functions might be what I should be doing, but i'm not sure on syntax or design.

 

TL;DR.

How can I use the timeline feature to revert the tween back to it's starting state upon the jquery mouseleave event?

 

 

See the Pen raJKjb by oneiamfor (@oneiamfor) on CodePen

Link to comment
Share on other sites

Hi Diaco, thanks for the quick response. Do you know why when I take the mouse off the image div that it doesn't trigger the mouseleave event? The only way I can get the mouseleave event to trigger is when the mouse leaves the whole window? Is this because I am misusing the $(window).on('mouseleave', moveBoxBack); statement? Should I not be using the $(window) function and be using something else that only triggers when on the actual div object? (Sorry if isn't making sense)

Link to comment
Share on other sites

Hi OneIAmFor,

 

You have the window responding to your mouse events, which is the entire viewable area. You probably only want the $box to respond your mouse events.

 

However, getting the image to track the mouse position when you are hovering over the box might not work that well if you move the mouse too fast. What you could do is create a container for your image, and track the mouse movement in that area. You could set it up where you have to hover over the image before mouse movement in the container will start to move the image. I added red outlines so you can see when the mouse movement event is activated.

 

See the Pen emVPMw by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks heaps for this - you went above and beyond. It works great now in my codepen, but I've got issues i've realised in my Skrollr page design that is stopping the mouse events from being registered on the individual div tags. Not really an easy thing to show on here. but the fire doesn't animate on mouse click: http://steveandashrunaway.info/ass3/index.html#bcg-02

I know this request is a little out of scope... so I will mark it as solved :)

Link to comment
Share on other sites

You might be using the wrong variable name? You have it named as $WCan, but then you are trying to animate $box, which doesn't exists. Try replacing $box with $Wcan.

Link to comment
Share on other sites

Hi Blake, 

The VAR was recently changed which was causing a problem with my js - however the main issue i had was in my CSS where i had a opacity:0 on a div ID that was still in front of the div container that was being displayed. IF i change the z-index's around to be more sequential to their display the inherited objects in that div (my animation) now are on top and the mouse events register.

Super happy now. Thanks so much for your assistance though!

All the best.

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