Layered Reveal + Nested Snap

[ngrmm 2 Likes (Newbie)]

I have sections and one of them has boxes.

I would like to have the snap effect for each section and each box

Is it possible to have the snap effect for nested elements?

As far as I understand native CCS snap does not work with nested Elements.

See the Pen yLEdZEE by ngrmm (@ngrmm) on CodePen

[mvaneijgen 1,533 Likes (Superhero)]

Have you seen the snap property of ScrollTrigger? there is a much more detailed explanation on the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:

Hope it helps and happy tweening! 

 

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

[ngrmm 2 Likes (Newbie)]

@mvaneijgen Thanks! Yes I'm a bit familiar to the snap property. However my example was not the best case for my problem. I forked your demo and added a fourth section.

Unfortunately it does not work well. When the third Section comes into view, it does not snap and scrolling up causes some problems too.

 

See the Pen BaVgbrO by ngrmm (@ngrmm) on CodePen

Edited December 14, 2022 by ngrmm

[Rodrigo 5,055 Likes (Superhero)]

Hi,

31 minutes ago, ngrmm said:

Unfortunately it does not work well. When the third Section comes into view, it does not snap

The issue here is that you're confused about the starting points of that particular section. You have this in your ScrollTrigger configuration:

gsap.utils.toArray(".panel.snap").forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top top", 
    markers: true,
    snap: true,
  });
});

That means that the ScrollTrigger instance will start when the top of the section reaches the top of the viewport, SrollTrigger is doing exactly what is supposed to do. In the case of the third section maybe you want the section to snap when the top of that particular section reaches the bottom of the viewport. If so you can either add a data attribute to that section and look for that when you loop through them in order to use different start and end points, or simply check the current index in the loop and based on a simple condition change the start and end points for that section. Here is a simple fork of your codepen:

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

 

Hopefully this clear things up. Let us know if you have more questions.

 

Happy Tweening!

[LauraDo 0 Likes (Newbie)]

Hi.

I tried to start from your codepen to adapt it to my needs.

 

However I have two problems:

• For the class .box : with my modification the snap effect doesn't work anymore : 
  • If class .red has width: 400vh the background continue. However I need the background to stay fixed only the text must change on scroll. 
  • But if class .red has width: 100vh and overflow: auto; the snap effect doesn't work anymore.. 

 

There's my codepen : 

 

See the Pen GRBjGZR by Lo-dml (@Lo-dml) on CodePen

[Rodrigo 5,055 Likes (Superhero)]

Hi @LauraDo and welcome to the GreenSock forums!

 

Sorry for the delayed answer.

 

I don't see any element with a class of .red in your HTML. I'm looking at this trying to understand what you're after (is not completely clear) and I believe that you want to trigger the animations of the section four subtitles, right?

 

I think you could try using the Observer Plugin for just that section in order to animate the texts and then keep the ScrollTrigger animation for that panel. Here is an example for using Observer:

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

 

Also in this thread is discussed how to implement both Observer and ScrollTrigger and preventing the scrolling with Observer:

 

Hopefully this is enough to get you started. If you have any other question let us know.

 

Happy Tweening!