venizia03 Posted August 14, 2020 Share Posted August 14, 2020 Hello! To open a menu, I use a timeline like below: menuTl .set($mainMenu, { opacity: 1, pointerEvents: "auto" }) .to($mainMenu, 0.5, { width: '100%', opacity: 1, ease: "power1.easeOut" }) .staggerFromTo($mainMenuItems, .3, { x: -50, opacity: 0, ease: "back.out(1)" }, { x: 0, opacity: 1 }, .2) .fromTo($btnCloseMenu, 0.8,{ translateX: 200, }, { opacity: 1, pointerEvents: "auto", translateX: 0, }); If you click on the menu close button, I reverse the timeline as follows: $btnCloseMenu.on('click', (evt) => { evt.preventDefault(); document.body.classList.remove('menu-open'); if(!menuTl.isActive()) { menuTl.timeScale(2).reverse(); } }); Now when you click on a menu item (all sections are on the homepage), I would like to reverse the timeline and then when completed, execute a scrollTo the specified anchor. This is what I have done but it's not working: document.querySelectorAll('.menu-link').forEach((link, index) => { link.addEventListener('click', (evt) => { evt.preventDefault(); const target = link.dataset.target; document.body.classList.remove('menu-open'); if(!menuTl.isActive()) { menuTl.timeScale(2).reverse(); gsap.to(window, {duration: 1, scrollTo:"#" + target}); } }); }); The scrollTo is executed in parallel with the reverse. Thx for your help! Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 14, 2020 Share Posted August 14, 2020 Hey venizia. A few notes: We recommend putting the duration inside of the vars parameter. That way you can use GSAP's defaults! ease: "power1.easeOut" is an invalid ease. It should be "power1.out" or just "power1" since .out is the default. You could combine your.timeScale() and .reverse() calls into one if you want: menuTl.timeScale(-2); To do what you're wanting to do you should use the onComplete callback for the timeline: if(!menuTl.isActive()) { menuTl.timeScale(-2); menuTl.eventCallback("onComplete", () => gsap.to(window, {duration: 1, scrollTo:"#" + target})); } 2 Link to comment Share on other sites More sharing options...
venizia03 Posted August 16, 2020 Author Share Posted August 16, 2020 Hello @ZachSaucier, Thx for your answer. I tried to apply your advice (not sure to understand the first one, sorry) but the result is not so good. When clicking on a menu link, the menu close but at the end, it does not execute the callback. But if I re-open the menu, that time it will execute the callback I tried to reproduce the issue in a codepen. Here it is: See the Pen poyyYvM by venizia03 (@venizia03) on CodePen The only difference with my local dev environment, is the error when it tries to do the scroll. I do not have that one on my dev environment. Thx in advance! Link to comment Share on other sites More sharing options...
PointC Posted August 16, 2020 Share Posted August 16, 2020 I think you meant to use onReverseComplete: menuTl.eventCallback("onReverseComplete", () => { You also need to load the ScrollToPlugin. See the Pen 16c6ac6685b8c163f10e437a4b3c3b83 by PointC (@PointC) on CodePen 2 Link to comment Share on other sites More sharing options...
venizia03 Posted August 17, 2020 Author Share Posted August 17, 2020 Indeed It's working now. Thx! Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 17, 2020 Share Posted August 17, 2020 19 hours ago, venizia03 said: not sure to understand the first one, sorry The vars parameter is what holds all of your properties. I'd write your tweens like so: const menuAnimFunc = () => { menuTl .set($mainMenu, { opacity: 1, pointerEvents: "auto" }) .to($mainMenu, { width: '100%', opacity: 1, ease: "power1" }) .fromTo($mainMenuItems, { x: -50, opacity: 0 }, { x: 0, opacity: 1, duration: 0.3, ease: "back.out(1)", stagger: 0.2 }) .fromTo($btnCloseMenu, { x: 200 }, { opacity: 1, pointerEvents: "auto", x: 0, duration: 0.8 }); 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