Jump to content
Search Community

Parallax Effect

Juan90 test
Moderator Tag

Recommended Posts

Hi, I have a problem and maybe you can help me. 

The issue is the following: I have all the sections pinned, and I want reach the effect parallax. I need the "section 2" and "section 3" be positioned above section 1 in a transition

 

If my example is not clear, I attach this example that I found, but I need to adapt it to my code structure.

See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen

 

My Codepen: 

 

 

See the Pen LYQqKBB?editors=0010 by NachoYama90 (@NachoYama90) on CodePen

Link to comment
Share on other sites

Hi @Juan90. Are you saying that you want section 2 to overlap section 1 (so section 1 stays pinned while section 2 comes in)? And then you want section 2 to pin while section 3 animates in over the top of that? If so, maybe this demo will help: 

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

 

There are many demos at https://greensock.com/st-demos/

Link to comment
Share on other sites

Yes, thank you for the demo. Actually, I have a difference with my code which is that I use a wrapper container. I already tried with all the sections independently, and it works! what I'm not sure I can do it with the wrapper because I need it to be like that.

Link to comment
Share on other sites

Thank you @GreenSock, your help was great! But I still have the problem.

 

As you can see in my codepen, I have pinned "Secton 1" and "Section 3". And the pin works correctly. 

 

The problem occurs when in the sections where I have "pin:true", I add a "pinSpacing: false". The pin stop working and I can't achieve the effect you showed me above.

 

So, I need "section 1" and "section 3" to be pinned with a pinSapcing to achieve the effect of overlapping sections, which you showed me earlier

 

Notes:  - In the pinned sections my triggers are "#main_wrapper"

              - In the sections not pinned I use " pinnedContainer: '#main_wrapper' "

 

Thanks for your help

 

Link to comment
Share on other sites

@GreenSock I'm trying to achieve the next behavior, but using my code:


See the Pen ZExpexO by GreenSock (@GreenSock) on CodePen

 

I have two sections pinned, the 1st and 3rd. 

 

When start scrolling, start parallax effect

 

When parallax effect I need the second section to move above the 1st section (section pinned).

 

When keep scrolling, I need to the 3rd to be fixed on the screen (pinned) and the fourth to move above. (like 1st and second sections.) 

 

All of this, with the previous demos that the community sent me, I couldn't replicate this behavior in my code. I'm new in this, so I'm not sure where the problem is. Could you help me ? 

My code:

See the Pen LYQqKBB?editors=1000 by NachoYama90 (@NachoYama90) on CodePen


Thanks again.

Link to comment
Share on other sites

4 hours ago, Juan90 said:

I have two sections pinned, the 1st and 3rd. 

 

When start scrolling, start parallax effect

 

When parallax effect I need the second section to move above the 1st section (section pinned).

 

When keep scrolling, I need to the 3rd to be fixed on the screen (pinned) and the fourth to move above. (like 1st and second sections.) 

 

Sorry, but I just don't understand what you're asking for. Please keep in mind that these forums are not for providing free general consulting services or "here is my list of requirements...please make my project work accordingly..." requests. See the forum guidelines. We're happy to answer very specific questions about the GreenSock API, though. If you need more help, you're welcome to post in the "Jobs & Freelance" forum or contact us for paid consulting services. 

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