Issue with timeline.reverse and timeline.play

[Olumide Nifemi]

ok so i was trying to get this menu effect here: https://www.niccolomiranda.com/ and so i followed a tutorial on youtube at first it didnt work but after a while i got it to work but now the animation is not reversing, here's the code 

 

edit: here's the stackblitz link: https://stackblitz.com/edit/vitejs-vite-jnja3f?file=src%2FApp.jsx

Navbar.jsx

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Olumide Nifemi]

23 minutes ago, GSAP Helper said:

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

 

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

ok thanks, here's the stackblitz link: https://stackblitz.com/edit/vitejs-vite-jnja3f?file=src%2FApp.jsx

[Rodrigo]

Hi,

 

I don't have time to dig into your demo and make it work the way you intend, but I think is a bit convoluted IMHO.

 

This is a simpler and more robust way to handle toggling a GSAP instance (Tween or Timeline):

https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js

 

Hopefully this helps.

Happy Tweening!

[Olumide Nifemi]

3 hours ago, Rodrigo said:

Hi,

 

I don't have time to dig into your demo and make it work the way you intend, but I think is a bit convoluted IMHO.

 

This is a simpler and more robust way to handle toggling a GSAP instance (Tween or Timeline):

https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js

 

Hopefully this helps.

Happy Tweening!

i've made the changes in the link here and while there has been an improvement the links still do not reverse accurately:  https://stackblitz.com/edit/vitejs-vite-jnja3f?file=src%2FApp.jsx

 

I'd really appreciate it if you could help me out please

[Rodrigo]

Hi,

 

Your demo is not working, is throwing some errors so you should fix those first.

 

I created a fork of our demo that uses state to toggle a GSAP Tween/Timeline:

https://stackblitz.com/edit/gsap-react-basic-f48716-frwgcg?file=src%2FApp.js

 

Hopefully this helps.

Happy Tweening!

[Olumide Nifemi]

1 hour ago, Rodrigo said:

Hi,

 

Your demo is not working, is throwing some errors so you should fix those first.

 

I created a fork of our demo that uses state to toggle a GSAP Tween/Timeline:

https://stackblitz.com/edit/gsap-react-basic-f48716-frwgcg?file=src%2FApp.js

 

Hopefully this helps.

Happy Tweening!

hi! thanks for the reply, i gave it a try but i still wasn't able to figure out what was wrong but i've been able to fix the demo and it works now: https://stackblitz.com/edit/vitejs-vite-jnja3f?file=src%2FApp.jsx

[Rodrigo]

Hi,

 

There are several problems in your code, this first:

const timeline = gsap.timeline({ paused: true });

tl.current = timeline
  .to('.overlay', {
  duration: 1.5,
  clipPath: 'polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%)',
  stagger: 0.4,
  ease: 'power4.out',
})
  .reverse();

tl.current = timeline
  .to(
  '.menu-item p',
  {
    duration: 0.8,
    y: 0,
    stagger: 0.15,
    ease: 'power4.out',
  },
  '-=1'
)
  .reverse();

In that code you're assigning tl.current twice, there is no need for that actually. Just create the timeline as you want and then replace the ref:

const timeline = gsap.timeline({ paused: true });

timeline
  .to('.overlay', {
  duration: 1.5,
  clipPath: 'polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%)',
  stagger: 0.4,
  ease: 'power4.out',
})
  .to(
  '.menu-item p',
  {
    duration: 0.8,
    y: 0,
    stagger: 0.15,
    ease: 'power4.out',
  },
  '-=1'
)
  .reverse();

tl.current = timeline;

Also this:

menus.addEventListener('click', function () {
  if (menu) {
    timeline.reversed(!timeline.reversed());
    // timeline.reverse()
  } else {
    tl.current.reversed(!menu);
    // timeline.play()
  }
  click();
});

First there is no need to add event listeners like that in React, is better to use React's own synthetic events:

https://react.dev/learn/responding-to-events

 

Also setting things up like you have in your demo is a bad idea, there is no need to re-run all the GSAP code when the menu dependency is updated, especially since the click method runs after the conditional logic that plays/reverses the timeline. Is far better to use a useEffect hook to control that based on the dependency and a useGSAP hook with no dependencies to create the timeline:

const handleLinkClick = (link) => {
  setActiveLink(link);
  setMenu(!menu);
};

useGSAP(() => {
  const menus = document.querySelector('.menu');

  gsap.set('.menu-item p', { y: 225 });

  const activetab = document.querySelector('.active');

  const timeline = gsap.timeline({ paused: true });

  tl.current = timeline
    .to('.overlay', {
    duration: 1.5,
    clipPath: 'polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%)',
    stagger: 0.4,
    ease: 'power4.out',
  })
    .to(
    '.menu-item p',
    {
      duration: 0.8,
      y: 0,
      stagger: 0.15,
      ease: 'power4.out',
    },
    '-=1'
  )
    .reverse();
});

useEffect(() => {
  tl.current.reversed(!menu);
}, [menu]);

I strongly suggest you to read upon react docs and demos in order to learn about react's state updates and event handlers work first. Just test that with some console logs first and then add GSAP to the mix. As you can see the setup we have in our demo is far simple and it will work with any GSAP Tween/Timeline you use:

const toggleTimeline = () => {
  setPlay(!play);
};

useGSAP(
  () => {
    const boxes = gsap.utils.toArray('.box');
    tl.current = gsap
      .timeline()
      .to(boxes[0], { x: 120, rotation: 360 })
      .to(boxes[1], { x: -120, rotation: -360 }, '<')
      .to(boxes[2], { y: -166 })
      .reverse();
  },
  { scope: container }
);

useEffect(() => {
  tl.current.reversed(!play);
}, [play]);

Just an event handler that toggles the state and as a result of that state update play/reverse the GSAP Timeline.

 

Hopefully this clear things up.

Happy Tweening!

[Olumide Nifemi]

Thank you so much sir, it works perfectly fine now and about your advice I'll do exactly as you suggested and hopefully I'll be a lot better than I am now. Thank you so much ?