Hey,
I'm having some trouble with GSAP and the .staggerTo.
The fact is : the staggerTo is working the first time I'm hovering an element and it's unstaggering as I want when I leave the el but when I'm hovering it again the staggerTo isn't working anymore !
Here the code :
for (var i = 0; i < hexagons.length; i++) {
hexagons[i].addEventListener('mouseenter', function(e) {
var propSelected = this.dataset.prop,
links = this.querySelectorAll('.mini_vid_link');
function findProp(prop) {
return prop.prop === propSelected;
}
var thisProp = propositionsVideos.find(findProp);
videosBg.style.background = "url(" + thisProp.background + ") center center no-repeat";
videosBg.style.backgroundSize = "cover";
if (thisProp.orientiation === 'left'){
tl.to(videosBg, 0.6, {
x: 0,
autoAlpha: 1,
ease: Power3.easeIn
}, 0)
.staggerTo(links, 0.6, {
x:-20,
autoAlpha: 1,
scale:1,
ease: Elastic.easeInOut.config(1, 0.3)
}, 0.2, 0)
} else {
tl.to(videosBg, 0.6, {
x: 0,
autoAlpha: 1,
ease: Power3.easeIn
}, 0)
.staggerTo(links, 0.6, {
x:20,
autoAlpha: 1,
scale:1,
ease: Elastic.easeInOut.config(1, 0.3)
}, 0.2, 0)
}
}, false);
}
for (var i = 0; i < hexagons.length; i++) {
hexagons[i].addEventListener('mouseleave', function(e) {
var propSelected = this.dataset.prop,
links = this.querySelectorAll('.mini_vid_link');
function findProp(prop) {
return prop.prop === propSelected;
}
var thisProp = propositionsVideos.find(findProp);
if (thisProp.orientiation === 'left'){
tl.to(videosBg, 0.3, {
x: 30,
autoAlpha: 0,
ease: Power3.easeOut
})
.staggerTo(links, 0.6, {
x:20,
autoAlpha: 0,
scale:0.8,
clearProps: 'all',
ease: Sine.easeOut
}, 0.2, 0)
} else {
tl.to(videosBg, 0.3, {
x: 30,
autoAlpha: 0,
ease: Power3.easeOut
})
.staggerTo(links, 0.6, {
x:-20,
autoAlpha: 0,
scale:0.8,
clearProps: 'all',
ease: Sine.easeOut
}, 0.2, 0)
}
What i'm doing wrong ?