Dot animation with Locomotive Scroll

[Vizzale]

Hello everyone, I created this simple animation using GSAP tween, timeline and the ScrollTrigger plugin.

The animation works perfectly, but when I integrate the third-party library Locomotive Scroll into the project, the property end: 'max' does not work correctly.

 

To build the animation I followed point by point the suggestions you provided in the example at the following link.

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

I know this is not a GSAP product but I still hope someone will be able to help me. Thanks in advance.
 

See the Pen XWYPMjN by vizzale (@vizzale) on CodePen

[Rodrigo]

Hi @Vizzale and welcome to the GreenSock forums!

 

Just set the start point of your animation to top top and set a relative end point to the number of sections minus one, times the viewport height:

const tl = gsap.timeline({
  defaults: {
    ease: 'none'
  },
  scrollTrigger: {
    trigger: '#animation',
    markers: true,
    pin: "#animation",
    scrub: 0.5,
    start: "top top",
    end: "+=" + ((gsap.utils.toArray("section").length - 1) * 100) + "%",
  }
});

I don't have any experience with Locomotive so I can't tell you exactly what's going on here, but my guess is that for the way Locomotive works the max value is not being picked up correctly. Another alternative that could be less cumbersome is to use the scroller and window height:

const tl = gsap.timeline({
  defaults: {
    ease: 'none'
  },
  scrollTrigger: {
    trigger: '#animation',
    markers: true,
    pin: "#animation",
    scrub: 0.5,
    start: "top top",
    end: () => (document.querySelector(".scroller").clientHeight - window.innerHeight),
  }
});

Happy Tweening!

[Vizzale]

1 hour ago, Rodrigo said:

Hi @Vizzale and welcome to the GreenSock forums!

 

Just set the start point of your animation to top top and set a relative end point to the number of sections minus one, times the viewport height:

const tl = gsap.timeline({
  defaults: {
    ease: 'none'
  },
  scrollTrigger: {
    trigger: '#animation',
    markers: true,
    pin: "#animation",
    scrub: 0.5,
    start: "top top",
    end: "+=" + ((gsap.utils.toArray("section").length - 1) * 100) + "%",
  }
});

I don't have any experience with Locomotive so I can't tell you exactly what's going on here, but my guess is that for the way Locomotive works the max value is not being picked up correctly. Another alternative that could be less cumbersome is to use the scroller and window height:

const tl = gsap.timeline({
  defaults: {
    ease: 'none'
  },
  scrollTrigger: {
    trigger: '#animation',
    markers: true,
    pin: "#animation",
    scrub: 0.5,
    start: "top top",
    end: () => (document.querySelector(".scroller").clientHeight - window.innerHeight),
  }
});

Happy Tweening!

 

Hi @Rodrigo, thanks for the welcome and for your quick reply.
The second solution is super simple and works perfectly. Reading the official documentation I had skipped the possibility of using a JS calculation as the value of the variable. GSAP is really a great tool!

 

I will integrate this solution into my project to see if using ScrollTrigger with this library for smooth scrolling causes other problems.

 

I take this opportunity to ask you for an explanation regarding the property start: 'top top' you suggested. In the case of this animation, the effect is the same, but if another element were to be present before the #animation element, wouldn't it be more correct to use start: 0 (which coincides with the initial position of the scrollbar)? Thanks again.

 

[Cassie]

If you want the animation to start at the very beginning of the page then start: 0 is what you should use, yes!

top top means 'when the top of the trigger element hits the top of the viewport'

Hope this helps!

[GreenSock]

If you define a scrollHeight() method on the scrollerProxy() object, that should solve the problem too (if you use "max"): 

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

[Vizzale]

On 11/30/2022 at 6:27 PM, Cassie said:

If you want the animation to start at the very beginning of the page then start: 0 is what you should use, yes!

top top means 'when the top of the trigger element hits the top of the viewport'

Hope this helps!

In fact, the effect of the two solutions is identical, the choice of one or the other solution is different only on a conceptual level: being the #animation trigger "locked" and not mobile, the value 0 seemed more correct to me. Being new to GSAP it is important for me to understand the tool.

[Vizzale]

Thank you @Rodrigo and @GreenSock the solutions are both valid and work perfectly.