Jump to content
Search Community

Menu bruger disappears when clicking - ScrollTrigger

Guest
Moderator Tag

Recommended Posts

Hello!

I have now managed to finish building my menu burger but encounter a problem as soon as scrolling is triggered. The burger itself disappears once you click on it, I don't really understand why. When burger value is true then the animation is activated again but I only want it to be activated onScroll?

It works properly when scrolled to top...?

 

giphy.gif

Thanks in advance.

See the Pen dyKPQQK by ruuschtuu (@ruuschtuu) on CodePen

Link to comment
Share on other sites

Hi,

 

The issue is that the useEffect hook is not running until you click the menu button, I couldn't tell you why.

 

What caught my attention is that you are using really old versions of GSAP and React, and you have a miss-match in the React and React DOM versions. I created a codesanbox with the same code and up-to-date versions of all libraries (for some reason I can't get styled components to work in codepen 🤷‍♂️) and everything seems to work as expected:

https://codesandbox.io/s/gallant-poincare-4xwkrp?file=/src/App.js

 

Hopefully this is what you are looking for. Let us know if you have more questions.

 

Happy Tweening!

Link to comment
Share on other sites

Hello and thank you so much for the solution!

The thing is that Scrolltrigger only works for me when is import it like this:

//This works

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

 

//This dosen't work

import { ScrollTrigger } from "gsap/ScrollTrigger";
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...