[Hover Reveal]

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? 

 

See the Pen bGgeGZY by faridguzman91 (@faridguzman91) on CodePen

[gsap.to autoAlpha]

@PointC

 

scroll down the back up, the animation from the nav bar links wont play in reverse,

 

 

See the Pen MWbPJae by faridguzman91 (@faridguzman91) on CodePen

[gsap.to autoAlpha]

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'
        });
    }