faridguzman91 Posted March 7, 2021 Share Posted March 7, 2021 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 More sharing options...
PointC Posted March 7, 2021 Share Posted March 7, 2021 Maybe you could put that into a demo for us? 3 Link to comment Share on other sites More sharing options...
faridguzman91 Posted March 8, 2021 Author Share Posted March 8, 2021 @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 Link to comment Share on other sites More sharing options...
Solution akapowl Posted March 8, 2021 Solution Share Posted March 8, 2021 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 3 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now