ScrollTrigger Animation

[Akhil sanju]

I have two slide elements. When scrolling, the issue arises after the slides are completed. There is a significant, unwanted space that requires scrolling through all the way to move on to the next section. In an attempt to resolve this issue, I tried using 'pinSpacing: false'. However, when set to 'false', the elements at the bottom overlap the slider. I couldn't figure out what went wrong!

See the Pen dywZQjB by euginesanju (@euginesanju) on CodePen

[IndM]

hi @Akhil sanju,

The problem is not with the spacing but with a wrong selector you have used.

let sections = gsap.utils.toArray(".container .panel");

This collects the height of all the divs that contains the .panel class (I believe there were like 6).

Just change the '.container' to '.inner-wrapper' and you should have the correct amount of spacing.


Just a quick tip, i would nest the image and the text in the same section and don't create seperate sections for it.

[mvaneijgen]

Hi @Akhil sanju welcome to the forum!

 

Nice catch @IndM I came to the same conclusion!

 

It's always a good idea to log the values you're using to see if they are what you think they are. Indeed lots of tutorials use the fancy (sections.length - 1) code, but if I log your sections.length I get 6 and I see 3 slides, so something is wrong here. I've now set it manually to 2 (eg 3 - 1) and it works as expected. 

 

so you're let sections = gsap.utils.toArray(".container .panel"); is not correct, there are probably more .panels on the page in a container. Hope it helps and happy tweening! 

 

See the Pen PoXOXXQ?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Akhil sanju]

Hi thanks @IndM & @mvaneijgen for your valuable replays. it is really encouraging!

[Akhil sanju]

Could you please explain to get the current index of each scroll section

[IndM]

7 minutes ago, Akhil sanju said:

Could you please explain to get the current index of each scroll section

@Akhil sanju Depends where you want to use it.

If you meant inside the foreach, you can do it like this:

 

sections.forEach((section, index) => {
  totalHeight += section.clientHeight;
  console.log(index);
});

 

[Akhil sanju]

I have to implement a progress bar as section get scrolled so i need the current index of section . The above code  will return all the index at the same time

[IndM]

For a progress bar I would approach it this way:

Creating a separate scrolltrigger that depends on your timeline, in your case the sections.
 

 gsap.to('progress', {
    value: 100,
    ease: 'none',
    scrollTrigger: { scrub: 0.3 }
  });

and add this or another div in your html:

<progress max="100" value="0"></progress>

See ref: