hey guys, i'm new to GSAP & I'm not quite sure what I'm doing wrong here.
the desired effect is a fade in when the menu opens & a fade out when it closes, but for some reason i can't get the fade out part to work. here is a link to my codepen. i suspect i'm making a pretty dumb mistake.
here's my js:
var root = document.documentElement;
var body = document.body;
var pages = document.querySelectorAll(".page");
var tiles = document.querySelectorAll(".tile");
for (var i = 0; i < tiles.length; i++) {
addListeners(tiles[i], pages[i]);
}
function addListeners(tile, page, menu) {
tile.addEventListener("click", function() {
animateHero(tile, page);
});
page.addEventListener("click", function() {
animateHero(page, tile);
});
}
function animateHero(fromHero, toHero) {
var clone = fromHero.cloneNode(true);
var from = calculatePosition(fromHero);
var to = calculatePosition(toHero);
TweenLite.set([fromHero, toHero], { visibility: "hidden" });
TweenLite.set(clone, { position: "absolute", margin: 0 });
TweenLite.to('.k-nav-list li', 0.6, {opacity: 0});
body.appendChild(clone);
var style = {
x: to.left - from.left,
y: to.top - from.top,
width: to.width,
height: to.height,
autoRound: false,
ease: Power1.easeOut,
onComplete: onComplete
};
TweenLite.set(clone, from);
TweenLite.to(clone, 0.3, style)
function onComplete() {
TweenLite.set(toHero, { visibility: "visible" });
body.removeChild(clone);
TweenLite.to('.k-nav-list li', 0.6, {opacity: 1});
}
}
function calculatePosition(element) {
var rect = element.getBoundingClientRect();
var scrollTop = window.pageYOffset || root.scrollTop || body.scrollTop || 0;
var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0;
var clientTop = root.clientTop || body.clientTop || 0;
var clientLeft = root.clientLeft || body.clientLeft || 0;
return {
top: Math.round(rect.top + scrollTop - clientTop),
left: Math.round(rect.left + scrollLeft - clientLeft),
height: rect.height,
width: rect.width,
};
}
the part that is actually changing the opacity for the element i want is
TweenLite.to('.k-nav-list li', 0.6, {opacity: 0});
and
TweenLite.to('.k-nav-list li', 0.6, {opacity: 1});
but obviously i'm misunderstanding what's going on here. any help is greatly appreciated.