catchtwnenty2
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by catchtwnenty2
-
-
I am using gsap to play a little animation. It is the same animation for different hovers. I am trying to tie the animation so that it runs on a specific hover only. So when I hover over data-filter="one" the animation only runs on li id-one"
You need to scroll down the codepen to see what I am getting at
Many thanks to all help - greatly appreciated
Tie timeline animation to id via data attr
in GSAP
Posted
thnk you - I got it working
//// please refactor me
function escHover() {
var fadeIn = $('.filter-fade-img');
var hoverBtn = $('.filter-hover');
TweenLite.set(fadeIn, {
opacity: 0,
y: '50px',
ease: Back.easeOut
})
hoverBtn.on('mouseenter', function(e) {
var fadeIn = $(this).attr('data-filter');
var fadeIn = $('#' + fadeIn).find('.filter-fade-img');
console.log(fadeIn);
TweenMax.to('.js-filter-esc-dormant', 0.1, {
y: '0',
opacity: 0
}, 0.1, "+=0.1");
TweenMax.staggerTo(fadeIn, 0.5, {
y: '0',
opacity: 1
}, 0.2, "+=0.1");
});
hoverBtn.on('mouseleave', function(e) {
var fadeIn = $(this).attr('data-filter');
var fadeIn = $('#' + fadeIn).find('.filter-fade-img');
console.log(fadeIn);
TweenMax.staggerTo(fadeIn, 0.5, {
y: '50px',
opacity: 0
}, 0.1, "+=0.1");
TweenMax.to('.js-filter-esc-dormant', 2, {
y: '0',
opacity: 1
}, 8, "+=8");
});
}