Jump to content
Search Community

Freeze the section on scroll and then scroll the background image

orca_rohit test
Moderator Tag

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

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

  • 10 months later...
On 2/26/2021 at 9:33 PM, ZachSaucier said:

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.


Hey Zach, do you have an example of this, but instead of parallax bg, it just fades out as well as the font size increase? I am really sorry, i am new to animation

Link to comment
Share on other sites

Yes, that effect can be done with GSAP, but unfortunately, we don't have the resources to build out custom effects for everyone. Please see the forum guidelines.

 

Quote

What topics should be avoided?

As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free:

  • Logic issues. JavaScript and application logic, CSS setup, and generic troubleshooting that isn’t directly related to GreenSock tools. 
  • Third party tools. Frameworks (React, Angular), other JavaScript libraries (LocomotiveScroll, Barba), build tools, etc. We’re happy to help with the GSAP part of things if you strip out as much irrelevant code as possible and provide a minimal demo.
  • “How do I do this cool effect I saw on a trendy website?” Someone here may point you in the right direction but please don't expect a full tutorial on how to create and effect you saw on a slick web site.

 

I would suggest starting with just the animation. Don't worry about ScrollTrigger until you have the animation down. The text effect is probably using some kind of CSS or SVG masking and then scaling it up. Once you get have the animation down, it should be easy to hook it up to ScrollTrigger with pin and scrub set to true.

 

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