Jump to content
Search Community

How to pin a div and move the image inside using ScrollTrigger

Daniel Drummond test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

I have an image that is the background in a div, I want to have a parallax effect when the scroll is activated. I'm already managing to do the effect, but it's influencing the div I use as a "mask" of the image. I have this logic:

 

As you can see , the div with the section-parallax class is smaller when I move the scroll and I want only the image to move.. 

I want to fix the div I use as a mask to a size, just move the image inside it.

 

I'm new to GSAP and have been doing a lot of research to create the effects I need and to learn more, sorry if it's a silly question.

 

Thanks

See the Pen LYzzxrK by drummond-dev (@drummond-dev) on CodePen

Edited by Daniel Drummond
I forgot a detail
Link to comment
Share on other sites

Hi blake,

I don't have it, let me try to explain it better to see if you can help me.

In the design of the page, there's this image with the text on top. My client wants when we use the scroll to have a parallax effect on the image. But it has to stay in the same place and size. So I created a div to use it as a "mask", the correct size like this in the design and the image is bigger than this div. To be able to apply the parallax or Y-motion effect.

 

Did I explain myself better? And thanks for the help.

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.
×
×
  • Create New...