Jump to content
Search Community

[SOLVED] Triggering wrong timelines with react state

jevinsidhu test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to create a Navbar with animations that are controlled by GSAP Timelines and managed by React state. Most of it works great, but I run into a problem when elements in my nav bar are selected in these two orders:

  • ONE, SEVEN, SIX
  • SEVEN, ONE, SIX

 

So two subheadings in a order and then anything else.

 

It seems as if, when we reverse the second timeline, it also plays the first timeline along with it. This leads to the navbar staying open or expanded rather than closed with both timelines reversed. Not sure why this happens?

 

However, when checking to see what Timeline fires (by naming the .data property), it appears that the correct timeline is being triggered.

 

Please see my code sandbox here: https://codesandbox.io/embed/gatsby-starter-default-xvbk9

  • Haha 2
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Sorry to hear that you're experiencing problems with GSAP. Unfortunately it seems to be an issue with some CORS issue accessing bundlephobia.com's API, so the live sample is not working, for me at least.

 

In this post is discussed how to create and toggle animations using the Hooks API:

 

 

Also you can check a live simple example here as well:

 

https://stackblitz.com/edit/gsap-react-hooks-toggle

 

For I can see in your code you're using two different timelines to affect the same elements into different values. Ideally try to create a GSAP instance that you can toggle for each sub-menu element. Also you're adding new instances to the timeline every time the component is updated, so try to add an empty array when creating the GSAP instances so that code runs only when the component is mounted and toggle the animations using another useEffect call only when the open state property is updated.

 

Hopefully this can help you as you try to get a working live sample so we can take a better look at it.

 

Happy tweening!!

  • Like 2
Link to comment
Share on other sites

11 hours ago, OSUblake said:

Are you going to create hooks versions of your react demos?

I could tell you, but after I'd have to kill you... :D

 

Absolutely is a matter of having the time to create the samples and update the guide as well. Is definitely in my to-do list:

 

giphy.gif

 

 

  • Haha 3
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...