Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
faridguzman91

gsap.to autoAlpha

Go to solution Solved by akapowl,

Recommended Posts

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

 

 
Link to comment
Share on other sites

Maybe you could put that into a demo for us?

 

  • Like 3
Link to comment
Share on other sites

  • Solution

 

23 minutes ago, faridguzman91 said:

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

 

Looks like you just forgot the brackets to make it functional

 

const mainNavLinksReversed = gsap.utils.toArray('.main-nav a').reverse;

vs

const mainNavLinksReversed = gsap.utils.toArray('.main-nav a').reverse();

 

See the Pen d7f78af163334f2a70415535738e0354 by akapowl (@akapowl) on CodePen

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×