Jump to content
Search Community

Execute a scrollTo after a timeline execution complete

venizia03 test
Moderator Tag

Recommended Posts

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

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

     

  • Like 2
Link to comment
Share on other sites

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

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

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.
×
×
  • Create New...