ScrollTrigger vertical scrolling page with a section of vertical snapping carousel

[Pelonarax]

Hello everyone,

 

I'm trying to achieve what it seemed to me to be a simple task but it's driving me mad.

 

I have a web page with some content, so the user scrolls vertically, at some point instead of the classic scroll should be a vertical carousel in fullscreen with some nice animation while scrolling.

Starting from a demo of GSAP ScrollTrigger I managed to implement this in a test page with my content; but if I add element on top and after the scroll go crazy.

 

 - Here a little example of what I mean

 

I need some tips on how to fix it and have the effect of snapping only on the carousel while rest of the scrolls normally.

Thank you!

See the Pen gOBzNzJ by Roberto-Pelonara (@Roberto-Pelonara) on CodePen

[Rodrigo]

Hi @Pelonarax and welcome to the GreenSock forums!

 

Maybe you're looking for something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Pelonarax]

Hi @Rodrigo thank you so much for taking care of this. 

 

Can I ask about the bit you added? 
ScrollTrigger.create({
  trigger: ".description",
  snap: {
    snapTo: 1 / 4,
    duration: 0.5
  },
  start: "top top",
  end: "max"
});

 

This will add another ScrollTrigger on the first div for what? Sorry for the noob question

 

I tried to add a div on the bottom - 

See the Pen bGmKBLj by Roberto-Pelonara (@Roberto-Pelonara) on CodePen

 

The "Carousel" stands there and will not show me the bottom div. 

 

 

 

 

 

[Rodrigo]

Hi,

 

Sorry for the late answer. Basically this has to do with two things.

 

First the spacer elements don't have a position CSS attribute . All other panels have an absolute position applied and then since they are pinned by ScrollTrigger are given a fixed position so that's why it stays behind the panels. This solves that part of the problem:

.spacer {
  width: 100%;
  height: 100vh;
  position: relative;
}

Then is the duration of the ScrollTrigger instance that snaps the panels. You have four panels that should be snapped in/out as the user scroll, but that particular instance was given an end value of "max" which is the max scroll position in the scroller, in this case the document element. This seems to solve that:

ScrollTrigger.create({
  trigger: ".description",
  snap: {
    snapTo: 1 / (panels.length - 1),
    duration: 0.5
  },
  start: "top top",
  end: "+=" + (100 * (panels.length - 1)) + "%",
});

I updated the codepen demo:

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

 

Hopefully this helps.

Happy Tweening!