faridguzman91

Hello, Im trying to make the images dissapear, by having them on negative yPos and the transitioning them on hover back on the screen. mainly with section.addEventListener('mouseenter', createHoverReveal); section.addEventListener('mouseleave', createHoverReveal); Is there something missing in my code?

@PointC scroll down the back up, the animation from the nav bar links wont play in reverse, https://codepen.io/faridguzman91/pen/MWbPJae

I'm trying to reverse an animation when scroling back up using autoAlpha, but i get this error in the console Invalid property autoAlpha set to 1 Missing plugin? gsap.registerPlugin() Invalid property y set to 0 Missing plugin? gsap.registerPlugin() i set an if else function when scrolling direction is equal to 0 on the autoAlpha property, function initNavigation(){ const mainNavLinks = gsap.utils.toArray('.main-nav a'); const mainNavLinksRev = gsap.utils.toArray('.main-nav a').reverse(); mainNavLinks.forEach(link => { link.addEventListener('mouseleave', e => { // add class link.classList.add('animate-out'); }); link.ontransitionend = function() { //remove class link.classList.remove('animate-out'); } }); function navAnimation(direction){ const scrollingDown = direction === 1; const links = scrollingDown ? mainNavLinks : mainNavLinksRev; return gsap.to(links, { duration: 0.3, stagger: 0.05, autoAlpha: () => scrollingDown ? 0 : 1, y: () => scrollingDown ? 20 : 0, ease: 'power4.out' }); }