Jump to content
GreenSock

qvstudio

Layered Pinned Section End and Scroll to next section

Go to solution Solved by GreenSock,

Recommended Posts

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!
});

 

screenshat.jpg

screenshot2.jpg

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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

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