Parallax with ScrollTrigger and multiple sections

[s94QREspJB]

Hi community,

 

once again I wanted to use your universal and broad wisdom. I have multiple sections following each other with different heights and each of them can have a background image. This implemented as a direct child, is positioned absolute, has the size of the section and, of course, has a background-image set. This image's position can vary, depending on what the user selected in the backend. What is now relatively tricky for me is to use each section as the actual container where the bg image parallaxes in. So not the whole window but only the current section's height should be used.

 

I found this demo this demo to start off with:

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

 

and I adjusted it to the version you see now at the end of the post.

 

My questions now are:
1. How can this work with multiple sections as the reference container?
2. How can this work with different bg positions?
3. Why do I need the ratio calc in there' Wouldn't the acutal height of the section suffice?

Hope it's clear what my problem is and looking forward to your ideas!

Have a nice one!

 

 

See the Pen jOzjdPK by spar-nation-alleluia (@spar-nation-alleluia) on CodePen

[GSAP Helper]

Hi there!

I'm struggling to understand what exactly you're asking here. Vague details like 'how do I make it work with multiple sections?' or 'how can it work with different bg positions?' are very difficult for people to help with. Here's some tips that will increase your chance of getting a solid answer!
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "scroll down to the grey container" 
• A minimal demo using no frameworks, with minimal styling, only include the code necessary to show the issue.

 

It's almost always best to focus on ONE question at a time. You can create another thread once you get the first question answered. It can be overwhelming to see a list of requirements, like "please make my demo do these three things...."

 

Please also keep in mind that these forums are intended to be focused on GSAP-specific questions rather than general logic or "how do I make this custom effect?" (see forum guidelines). But we LOVE helping with the GSAP-specific stuff. Don't hesitate to hit us up for those questions. 

[s94QREspJB]

Thank your for asking for clarification.

So let's work on question by question. My first question aks why it is not working to use several sections as a reference. What I mean by that is: as I scroll, I want the current section to be reference container for it's background-image to scroll within (as indicated on line 16 in the example). So rather than using the window object here to use the whole viewport as scroll height for the parallax, I only want to use the height of the current section. This should lead to each section to have its own parallax with its background-image. My goal with this is to contrain the parallax to the height value of the current section. I hope this is more clear now.

[mvaneijgen]

@s94QREspJB I've removed your  `console.log(section),` on line 15 and now scorlltrigger works, but I'm also not clear on what it should do. 

 

See the Pen XWEvVZY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen