Jump to content
GreenSock

Romanus

markers move after adding overflow

Recommended Posts

Hello! I write through GOOGLE translator. I'm sorry for the mistakes :)

The animation worked perfectly until I added: overflow-x:hidden; overflow-y: auto; to any block.

When I add this, a strange problem appears. ALL markers start to move up and down after the scroll. Also the animation doesn't work until I manually resize the screen. First, I scroll until the animation fires, it does not work, I stretch or shrink the screen, and it works. This problem appears on ALL animations after adding these two lines to ANY block. If I remove overflow the problem completely disappears.

help me please

  • Like 1
Link to comment
Share on other sites

Hello @Romanus,

 

It's hard for us to help without a code example.

Can you make a minimal demo for us please?

 

Thank you.

Link to comment
Share on other sites

See the Pen wvPYpyw by romanusss (@romanusss) on CodePen

I made an example.

All markers move and never collide.

If you remove the 2 lines in the Parallax block that I wrote about above, everything works, except for the Parallax effect.
Link to comment
Share on other sites

Hi Romanus,

 

You had an extra </div> in your HTML, and it looks like your parallax section is the scroller, so you would need to add that.

 

Quote
scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

See the Pen vYWVzga by GreenSock (@GreenSock) on CodePen

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