Jump to content
GreenSock

Stahlpruegel

Prevent the Dom from Scrolling

Recommended Posts

Hello guys,

 

im a bloody beginner with like 30 Minutes of Experience but im close to what i want to achieve.

 

I have some icons which bounce from the top to the middle, and then disappear at the bottom. But for some reason the drom make a vertical scrollbar.

 


gsap.to(".icon", {
  opacity: 1,
  duration: 1,
  y: 400,
  ease: Bounce.easeOut,
  stagger: {
    amount: 0.5,
    from: "start",
  },
});

gsap.to(".icon", {
  opacity: 0,
  duration: 1,
  y: -2000,
  delay: 2,
});

 I made i -2000 so it looks like it would fly to the bottom and disappear, but the scroll bar is making me crazy. Can someone tell me what is wrong and how can i do the same with a timeline?

 

Thanks and i think this is an amazing library !!

Link to comment
Share on other sites

 

Hello @Stahlpruegel - welcome to the wonderful world of GSAP and the forum!

 

It's really hard to tell how to help, without a minimal demo - things really depend on the scenario your code snippet takes place in.

 

Scrollbars will get added whenever you have/add more space than is visibly available in either the container of an element or the viewport and thus overflowing it. So maybe a quick fix could be to just set overflow to hidden on the container your icons are in - maybe that is not possible though because it would break the effect you are after - see the problem? ...we can't really give solid advice without knowing your setup.

 

This is how you could rewrite it to a timeline instead - the only changes on the tweens is that the second one now does not have a delay property anymore here, but the 'delay' is being handled in the position parameter. And I changed the ease to use the new syntax.

 

[Don't mind the delay on the timeline itself - that's just to make sure things don't start tweening too early here]

 

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

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