Jump to content


Start with a huge image and scale it down without getting browser scrollbars

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Newbie here.


I want to have an image start very large and resize down to the standard image size. I can get that to work fine but when the image is large I have scrollbars on my browser. I don't want the scrollbars as it causes other parts of my page to move around.


Is there any way to do something like that? Do I need to learn how to put everything in a canvas or something?


See the Pen zevrl by catfishsushi (@catfishsushi) on CodePen

Link to comment
Share on other sites

You can use CSS overflow to prevent scrollbars appearing. In that codepen I just added

body {
  overflow: hidden;

but for a full website it would be better to apply the overflow style to a containing element so that body is still scrollable.

  • Like 1
Link to comment
Share on other sites

Excellent. Great and simple solution. Thanks.

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.