Jump to content
GreenSock

Sameer_mishraa

Event Listener Conflict (Lottie)

Recommended Posts

Hi,

I am fairly new to web development, so this may be a silly problem but please help me out:

 

Using GreenSock | Docs | Helper Functions as a reference, I have animated two of my divs, which were animating perfectly on scroll in the page, until I tried to add a navigation bar to the page. For a mobile, it is a hamburger menu which when clicked, opens up the navigation bar on the right side of the page. It works perfectly as long as the viewport has anything but my scrolltrigger hooked divs. The moment one of the scrolltrigger related div comes in the viewport, the navigation stops displaying. Is it possible that there is some kind of conflict between the click EventListener of Navigation & DOMLoaded Eventlistener of the scrolltrigger as mentioned in the GreenSock | Docs | Helper Functions ? What should I do ?

YOU  WILL SEE THE NAVIGATION BAR ONLY IN SMALL SIZED VIEWPORTS.

 

I have attached a sample codepen link and also 2 images which I hope will help you understand the issue.

(Although a button is not visible but it works & is placed on top right of the codepen, please bear)

Thanks in advance.

 

image.thumb.png.ca3b59f8acda76012e75842a48382104.pngimage.thumb.png.945476982d5f62b1caa7f8492ffba1eb.png

See the Pen yLzjKGL by sameer-mishra1 (@sameer-mishra1) on CodePen

Link to comment
Share on other sites

Welcome to the forums @Sameer_mishraa

 

When you scroll up a bit again after activating your nav, you will see the nav being there, but just burried under the animation on the z-axis - which is also visible in one of your screenshots. I think this is related to the pin-spacer getting a z-index: auto and your navigation not having any z-index set, so you should be able to fix this by simply putting a z-index on your navigation. 

 

Edit:

Gotta row back a bit - it's probably just the normal stacking order of the fixed elements and not even related to the z-index on the pin-spacer - my suggestion to work around that would stay the same though :)

 

Does that work better?

 

See the Pen JjrvBWX by akapowl (@akapowl) on CodePen

  • Like 2
Link to comment
Share on other sites

Thanks @akapowl ! 

Actually I figured it out just few hours ago. 

AS mentioned I'm pretty new to Web development so I was just confused whether there is a possibility of this kind of conflict, although I had a gut feeling that z-index could aslo be the reason. After trying different values of z-index, it started working perfectly. 

 

Sorry for your time.

And I appreciate your reply and effort.

Thanks a lot.

 

  • Like 1
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.
×