Jump to content
Search Community

ScrollTrigger - how to remove gaps between scrollTrigger timelines?

Julia Shikanova test
Moderator Tag

Go to solution Solved by Julia Shikanova,

Recommended Posts

Hello!

I have several 100vh sections and I would like it to animate one after another (section_1 end point being equal to section_2 start point, etc). I know, there are a ton of reasons why ScrollTrigger has gap between it's sections, but I would like to overcome it if it's possible.

384113011_2022-02-2216_20_25.png.1c8ac9b18d3a9e3d5b1e609c51a2296f.png

 

Thank you for your time and have a nice day!

 

See the Pen oNodXyo by jshikanova (@jshikanova) on CodePen

Link to comment
Share on other sites

Hello Julia,

 

from a logical point of view, I don't really think that would be possible when you have your sections following a natural scroll flow positioned relative beneath each other, because the subsequent section would always first have to scroll to the triggering point - this scrolling to that point is the 'gap' you are referencing.

 

So if you didn't want any 'gaps' to occur, you would have to make sure, they are not in that natural flow - meaning you would likely have to position them absolute, stacked on top of each other instead.

 

When you've got them positioned like that, here is a technique you could use:

  • wrap your content in another div - this wrap will be used for the individual ScrollTriggers for the sections later on. You will need it because you are going to
  • create one ScrollTrigger for the pinning only. You'll want to pin the .content container div you have there which all your sections are inside of. Since you are pinning that one, you won't be able to use it as a trigger, as its position will always stay the same because of the pinning. That's why the wrapping in another div happened - that wrapping div will keep scrolling with the flow and thus can be used as a trigger element.
    The end of the pinning should be dependent on the amount of your sections times whatever duration you'd like for each section.
  • forEach of your sections you can then set up the STs like this
     
    sections.forEach((section, index) => {
      const timeline = gsap.timeline({
        scrollTrigger: {
          id: `section_${index + 1}`,
          trigger: ".wrap",
          start: () => "top top-=" + (index * 1000),
          end: () => "+=" + 1000,
          scrub: true,
          invalidateOnRefresh: true,
          markers: true
        }
      });
    
      timeline.add(animateParagraph(section));
      
    });

     

  • I also used this part up top of the code to change the z-index order of the sections, so the first one will actually be visible at first
     

    gsap.set(sections, {zIndex: (i, target, targets) => targets.length - i});	

     

  • and I tweaked your animateParagraph function to actually only target each paragrap in the respective section, because you were targetting all of the elements with the .paragraph class before.

 

I hope this helps a bit and comes close to what you had in mind. Happy scrolling!

 

See the Pen QWOrYVR by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

  • Solution

Hello @akapowl, thank you for your time.

 

I spend some time implementing it for much complex animations and it worked fine, but in the process of doing it I found much better solution:

gsap.timeline({
  scrollTrigger: {
    ...otherProps,
    pinSpacing: false
  }
})

It does exactly the same, but it so much easier, especially because there is not need to hardcode start and end points.

It's a shame it took me so long tho

 

Solution

See the Pen eYeLNWQ by jshikanova (@jshikanova) on CodePen

  • Like 2
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.
×
×
  • Create New...