Jump to content
Search Community

GSAP parallax

IndM test
Moderator Tag

Recommended Posts

I saw this code that ZachSaucier made. In my use case, I want to make sure that the background image always starts from the center. So in this example: instead the image starts with the head, it should start with 'the batman' title because that's the middle of the image.
How can I achieve this?

 

See the Pen LYJGYXE by indy-meermans (@indy-meermans) on CodePen

Link to comment
Share on other sites

What I would do is disable ScrollTrigger while debugging this and focus on the line section.bg.style.backgroundPosition, you said you want it to be in the middle, so focus on that line of code and place the image at the position you want.

 

Then enable the ScrollTrigger animation again and tweak the end position to your liking. Hope it helps and happy tweening! 

 

See the Pen YzOwXwj by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
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...