Jump to content


Scroll image inside a mask with text beside

Moderator Tag

Recommended Posts

Hi there, weeks ago I found here a post showing a partial image with title and abstract on the right, when the user scrolls the page, the image scrolls horizontally inside the mask until the right border ends. I thought I bookmarked it, but I dind't find it: hours on searching here on forums, on google... no results. I added a screenshot that shows its behaviour.

Thanks in advance!





Link to comment
Share on other sites



Unfortunately we can't help you find a particular thread in the forums, personally I don't recall that particular one.


You should definitely look into ScrollTrigger for doing that particular animation as it shouldn't be too complicated. A few notes:

  • It's mostly about HTML and CSS. Setting overflow hidden and animating the x property of the entire element to create the masking effect.
  • Don't use ScrollTrigger right off the bat, create your animation using a timeline or a single tween if that's possible and when the animation works as expected, plug ScrollTrigger into the mix.

If you have any GSAP related question, please remember to create a minimal demo so we can take a look at it.


Happy Tweening!

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.