Jump to content
Search Community

I can't select or click a button between the scroll animation, only at the end

aszuster test
Moderator Tag

Recommended Posts

Hi! I have this scroll animation but I would like to be able to click buttons on different slides (like the button in the first slide, is unclickable), now looks like I can only make an interaction (selection, click) with the last slide.

Is there a solution to this? Not really sure how to fix it

 

Thanks!

See the Pen RwYBweV by aszuster-dhnn (@aszuster-dhnn) on CodePen

Link to comment
Share on other sites

Hi,

 

That's just an HTML/CSS issue, not a GSAP related one. Basically in large screens you have all other elements stacked on top of the first one. If you try to select the button with devtools, you'll see that devtools will select the sixth slide and not the first one. You should apply visibility hidden and opacity 0 to the content container as well or just the container and not the content:

iA7MpSl.png

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hi @Rodrigo thanks for answering!
I see what you mean, and I saw that this is the issue because inspecting the element, as you said, devtools select the sixth slide and not the first one.
But I tried with scrollmagic library with the exact same HTML/CSS and it works well that way (it uses GSAP but is super old, so I wanted to do it with the up to date library GSAP), so I think something is happening with the JS.

this is the one that works ok with scrollmagic with same HTML/CSS:

See the Pen MWQaYdm by aszuster-dhnn (@aszuster-dhnn) on CodePen


 

Thanks! 😊

Link to comment
Share on other sites

Hi,

 

Honestly I couldn't tell you why it worked with Scroll Magic before.

 

Since is just an issue of the elements being stacked and being absolutely positioned, this seems to work as expected:

slides.forEach(function (elem, i) {
  gsap.set(elem, { position: "absolute", top: 0, zIndex: (slides.length - i) });

  /* Rest of the code in the loop */
});

That basically adds a higher z-index to the first element.

 

Hopefully this helps.

Happy Tweening!

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...