Scroll image inside a mask with text beside

[vitaminik]

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!

 

 

 

[Rodrigo]

Hi,

 

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!