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