Playing a timeline on hover of the element

[JonQuayle]

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

[Shaun Gorneau]

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)

 

[JonQuayle]

 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

[Shaun Gorneau]

Happy to help, @JonQuayle!

[JonQuayle]

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

[PointC]

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.

 

[JonQuayle]

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

[PointC]

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.

 

[JonQuayle]

@PointC Ahh I see, thanks very much!

 

Jon