Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
orca_rohit

Freeze the section on scroll and then scroll the background image

Go to solution Solved by tailbreezy,

Recommended Posts

Hi,

I am very new to gsap, so please help me out

There's a part of the design the section is having a text in center and the background image.

What I want to achieve using GSAP is to freeze the section when it comes to the top of viewport and scroll the background image while the center text is also fixed in the middle of the section.When the background image reaches the last scroll then the next section scroll over it.

Here is a video link for better understanding.

Click here to see the reference video

Link to comment
Share on other sites

Hello orca,

 

This is easily achieved with scrollTrigger and y offset of your image. You can either pin your text or not depending on your needs.

 

Here I am translating the image vertically for the duration of its height - viewport height and attaching that animation to scrollTrigger with scrub:true.

 

See the Pen 2f6998e169e9a96ac5ecafe0ac393c53?editors=1010 by dadacoded (@dadacoded) on CodePen

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

this works when I see it in another html file.

but when i add use the same in the master code it doesn't . 

Link to comment
Share on other sites

Could be million of reasons. You can share your master code or a create a demo with the relevant parts.

Link to comment
Share on other sites

18 hours ago, tailbreezy said:

Could be million of reasons. You can share your master code or a create a demo with the relevant parts.

I have made a git repository and below is the link.

https://github.com/orcarohit89/Shoecompany

 

Please tell help me, not sure what am I doing wrong :sad:

Link to comment
Share on other sites

Hey @orca_rohit and welcome to the GreenSock forums.

 

Unfortunately we don't have the capacity to download a whole project, get it running locally, and then debug the issues ourselves for free in these forums. With that being said, we'd love to provide help about specific questions related to GSAP especially when you provide a minimal demo (i.e. with everything unrelated taken out) of the demo. 

 

A few notes after a quick glance at your GSAP code:

  • You're loading GSAP from two different sources. You only need to load it from one source. And we recommend using the latest version of GSAP (3.6.0 at this point).
  • You're using the old syntax. We highly recommend upgrading to the new syntax so that you can make use of new features like GSAP's defaults. Upgrading is easy!
  • If your main-bundle.js is going to make use of GSAP it should be loaded after GSAP.
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.
×