Jump to content
GreenSock

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

Playing a timeline on hover of the element

Recommended Posts

Hi everyone,

 

I am really struggling to get anywhere with playing and reversing a timeline when hovering over the element. I have tried all manner of options but nothing seems to work. I know the animation plays on page load as you can see in my attached codepen (), but I just cannot get it to work on hover.

 

To give some insight into what I am trying to do:

 

I have the image (as a link) which has a semi-transparent overlay over the top and a div with a background cover (which is the same colour of the page background). On hover, I would like the div to move over from the left and cover a percentage of the image and remove the dark overlay from over the image = revealing the image underneath. The idea is to then have text sitting to the left of the image so then on hover, a portion of the image is revealed to the right of the text.

 

I hope that makes some sense. Any help with getting the animation to play on hover and back on mouse exit would be great.

 

Many thanks

 

Jon

See the Pen KLzZyp by JonQuayle (@JonQuayle) on CodePen

Link to comment
Share on other sites

HI @JonQuayle,

 

A couple problems ... in some places you are using what look likes jQuery syntax, but jQuery is nowhere to be found. With calling in jQuery and modifying a few things to make use of it ... you should be good.

 

See the Pen bypvpa by sgorneau (@sgorneau) on CodePen

 

Also, there was an extra parameter being passed in your .to calls ... I stripped that out.

 

.to uses

 

.to( target:Object, duration:Number, vars:Object, position:* ) : *

 

You were passing .to( target, duration, vars, position, somethingElse)

 

  • Like 2
Link to comment
Share on other sites

 Hey @Shaun Gorneau,

 

Thanks so much, you are a legend! It is always those small details I miss - still a novice at this.

 

Thanks again

 

Jon

  • Like 1
Link to comment
Share on other sites

Sorry to resurface this @Shaun Gorneau, how would I go about altering this code to play the animation on just one instance of this? I have a series of these links and when hovering over one, the animation plays on all of them...?

 

Thanks

 

Jon

Link to comment
Share on other sites

Hi @JonQuayle,

 

You'd just need to use jQuery each() to loop through and make a tween/timeline for each target. This should get you started.

 

See the Pen xNOOVo by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

Hi @PointC, thanks for your solution.

 

I can't get it to work for me though, even replacing the variable names and adding my own tween attributes in and they are still all playing when one is hovered over.

 

What am I getting wrong here? 

See the Pen vwGRpm?editors=1010 by JonQuayle (@JonQuayle) on CodePen

 

Thanks

 

Jon

Link to comment
Share on other sites

You're still targeting all the slices and overlays

 

// this is all the targets
var slice = $(".uncoverSlice");
var overlay = $(".gradOverlay");

// each loop now animates every target
tl.to( overlay, 0.5,{opacity :"0"}, 0.2 );
tl.to( slice, 1, {width :"10%"}, 0.2 );

 

You need to find the individual targets in each loop;

function createHover(i, element) {
  var tl = new TimelineMax({ paused: true, reversed: true });
  var overlay = $(this).find(".gradOverlay");
  var slice = $(this).find(".uncoverSlice"); 
  tl.to( overlay, 0.5,{opacity :"0"}, 0.2 );
  tl.to( slice, 1, {width :"10%"}, 0.2 );
  // tl.to( image, 1, {scale :"1.1"}, 0.2 );
  $(element).hover(doIt);

  function doIt() {
    tl.reversed() ? tl.play() : tl.reverse();
  }
}

 

See the Pen zQBoLL by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 2
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.
×