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 - http://codepen.io/geebru/pen/avRbzw/
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.