Layered Pinned Section End and Scroll to next section

[qvstudio 0 Likes (Newbie)]

Hi There, 

 

looking for some help once again. I made a layered pinned section (the photography section), where the images on the right are overlapping each other on scroll. After the last images I want to scroll the whole page again and then the next section (Work section, with blue blackground) pushing everything up. Now it's appearing on the previous section, see images attachted.

How to solve this, tried it with setting an EndTrigger but didn't help...
 

Here's my js code:

// Photography Panels

ScrollTrigger.create({

pin: '.phototitle',

pinSpacing: false,

start: 'top ',

endTrigger: '.photo-end',

markers: true,

scroller: '.container',

});

gsap.utils.toArray('.panel').forEach((panel, i) => {

ScrollTrigger.create({

trigger: panel,

start: 'top top',

pin: true,

pinSpacing: false,

scroller: '.container',

});

});

 

ScrollTrigger.create({

snap: 1 / 4, // snap whole page to the closest section!

});

 

[Cassie 5,650 Likes (Superhero)]

Hey there @qvstudio!

We can usually help more effectively if you provide a minimal demo, it's hard to tell from code snippets and photos alone. Demos allow us to try out solutions and work out what's going wrong.

 

[qvstudio 0 Likes (Newbie)]

hereby my demo:

See the Pen JjyLNPM by qwertmedia (@qwertmedia) on CodePen

[qvstudio 0 Likes (Newbie)]

I try to achieve something similar to this:

See the Pen 153ca19006b303b070b25e9648faa60e by akapowl (@akapowl) on CodePen

[GreenSock 18,876 Likes (Superhero)]

Hi @qvstudio. I read your post a few times and looked at your codepen and I'm pretty confused. I just don't understand what you're asking, and your CodePen has a bunch of console errors, missing elements, etc. 🤷‍♂️ For example, there's no ".container" element (which you reference in your code). There's also no .photo-end. You didn't load GSAP or ScrollTrigger into that demo either. 

 

We'd love to help with any GSAP-specific questions, but please provide a clearer description of what you need along with a minimal demo that shows the issue. It's always best if you make the demo as simple as possible (don't make it your whole page - only use a few <div> elements to show the issue, for example). 

[qvstudio 0 Likes (Newbie)]

Hi Jack,

 

thanks for your reply. Must have shared the wrong link. The idea is following: in the photography section the images are overlapping each other. After the last images I want the page to scroll regular to the next work section

See the Pen JjyLNPM by qwertmedia (@qwertmedia) on CodePen

[GreenSock 18,876 Likes (Superhero)]

I don't really understand what you're trying to do with some of your code, but you set an endTrigger without setting an "end", thus it uses the default "bottom top" whereas I think you want it to end when the top of ".photo-end" hits the bottom of the viewport. Here's a fork that comments out some of the things I don't know what you're doing with, and just focuses on getting the result I think you described: 

See the Pen BadrwOj?editors=0010 by GreenSock (@GreenSock) on CodePen