Prevent the Dom from Scrolling

[Stahlpruegel]

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

[akapowl]

 

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