AshleyKen

Just in case this helps anybody out in future, I think it's a Chrome 'feature' and to turn it off, you can use this on the parent element overflow-anchor: none;

Thanks for the reply. I checked out your codepen and adding the extra content (the <br><br>world) minimises the problem, but it still exists. With a bit of scrolling up and down, I was able to get the same thing to happen (as shown in the screenshots below, the second one is when I mouse into the box on the left and the page scrolls down to 'focus' on the revealed element). Edit - Firefox seems to have no problem, it's Chrome that's having this issue. I think you're right that it is a CSS issue, I just wondered if anyone had any advice for a better way of achieving this effect without the unwanted scroll.

adding .gsap_hover_toggle { overflow: hidden; } seems to reduce the problem but it doesn't go away entirely, I wonder if there's a better way of doing this?

This is a bit of a hard one to describe, hopefully you can see it happening in my CodePen. While the content is at the top of the window, if you mouse into either of the two blocks, the content that's initially hidden with height: 0; using gsap should animate to height: auto. This works fine. The part that I don't understand is when you scroll the content to the bottom of the window and mouse into the first block, the hidden content stays still and the whole page scrolls to reveal it, rather than vice versa. I want the page to stay still and my content to animate. This only seems to affect the first block in siblings and only happens when the block is in the top part of the window, I can't tell exactly the condition that causes this - thought it might be when the top of the block passes the top of the window but the positioning seems a bit vague to see exactly when it starts.