Jump to content
GreenSock

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

Calling TimelineLite on hover via function

Recommended Posts

Hey all!

 

I'm trying to animate some pagination elements we have on a company site redesign and am running into some scoping issues (I think). I will start by saying my JS-fu is not great so it's highly possible this isn't so much a GSAP problem as it is a jQuery problem.

 

You can see the core HTML / SCSS here - 

 

And the JS I'm attempting here:

  // Pagination
  // Get pagination items
  function pagerAnimate(play) {
    console.log("pagerAnimate Activated");
    var $this = $(this);

    var pagerIcon = $this.find('.pagination__icon');
    var pagerArrow = $this.find('.pagination__icon__arrow');
    var pagerFill = $this.find('.pagination__icon__fill');
    var pagerInfo = $this.find('.pagination__info');

    var pagerTimelineCore = new TimelineLite();
    pagerTimelineCore.to(pagerIcon, '.3', {scaleY: '2'})
                     .to(pagerArrow, '.3', {scaleY: '.5'}, '-=.3')
                     .to(pagerFill, '.3', {x: '0'});

    if (play === 'play') {
      console.log("pagerTimeline Play");
      pagerTimelineCore.play();
    } else if (play === 'reverse') {
      console.log("pagerTimeline Reverse");
      pagerTimelineCore.reverse();
    }
  }

  $('.pagination--previous').hover(function () {
    pagerAnimate('play');
  }, function () {
    pagerAnimate('reverse');
  });

  $('.pagination--next').hover(function () {
    pagerAnimate('play');
  }, function () {
    pagerAnimate('reverse');
  });

Basically what I'm trying to achieve is to run the Timeline (forward or backwards) based on hover. The tricky part was getting the $(this) declarations per pagination (previous and next) and playing it forward on mouseIn and reversing on mouseOut.

 

The console.log's in there are firing properly, but nothing is animating and I'm getting no errors. Any help would be awesome as GSAP is saving my butt on some of the designer requested animations on our site :)

 

Thanks!

 

PS - Apologies if this has been asked, but my Google-fu and searching here led me nowhere.

See the Pen avRbzw by geebru (@geebru) on CodePen

Link to comment
Share on other sites

Both of your examples work great!

 

I do have to kind of apologize as I left out the "Next" pagination from my pen, which is half of the complexity of the JS I wrote as without it it opens both paginations at once.

 

I implemented OSUBlake's JS into my Pen and it seems to work pretty much flawlessly, I just need to get the scope working.

 

For my education sake, was the issue that it was trying to call the timeline too many times or was it not actually calling it at all?

I believe I understand everything that's happening but not why mine wasn't working.

 

Thanks for your help, fellas!

Link to comment
Share on other sites

Not a scoping issue. More like an execution issue. The way you had it setup, it was creating a new timeline every time you hovered on and off the element. What Dipscom did, is essentially the same thing I did, created one timeline.

 

Try this...

See the Pen bVmVRG?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Brilliant! Thanks so much for the walkthrough!

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