Sticky translate on scroll (ScrollTrigger)

[Perdixo75]

Hey,

I'm new to gsap and i'm currently looking at the ScrollTrigger plugin. I'm trying to create a scrolling effect that i've seen on multiple websites lately. You can see it in action in the "Selected projects" section of the following website : https://brunoarizio.com/ . I thought it'd be a nice exercice to try to reproduce it, but i'm totally stuck.

 

I'm not sure about the mechanics here .. i've tried for 2 hours to reproduce this effect (without the smooth scroll) but i can't make it work.. Any indications would be much much appreciated (with explanations if possible!). 

 

From my beginner point of view, here's what happens  (let's say we have 3 projects) :

- Each project have a different z-index so the first project is on top of the second and so on.

- The second project is moved top so we can only see it's infos (so if the height of one project is 750px, we move the first project -750px on the Y axis and the second one -1400px on the Y axis).

 

Now is the part i can't get my head around using the ScrollTrigger plugin :

- As soon as the project hits the bottom of the screen (minus the height of 3 project infos height), it translates top.

- As soon as its info div hits the top of the screen (pretty much so), the same goes for the second project, and so on.

 

I can't figure out how to translate this to code using the scrollTrigger plugin ... If someone could help me and explain to me what i'm missing that'd be awesome !

 

I've added a codepen but it's a thousand miles away from the final effect, i've modified it a hundred times ...

 

 

 

See the Pen xxgWOxd by Perdixo757575 (@Perdixo757575) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

That's quite a project, never saw it before and to be honest not the best way to get started with GSAP. Don't get me wrong, there is nothing wrong with aiming to Mars (nobody aims to the moon anymore ), but before that you need to actually learn how to build the rocket that will take you there, it's a process. Honestly while the site certainly looks amazing, is quite messy and hard to navigate IMHO. Also keep in mind that you can't actually see any indication of a scroll bar and if you further inspect the styles you'll see that there is no changes in the scrollLeft or scrollTop properties in any of the parent elements, so most likely this site is listening to certain events like mouse wheel, keyboard, touch events, drag, etc. to advance a group of tweens and timelines. 

 

This codepen sample by @PointC illustrates how to listen and react to those events:

See the Pen YRzRyM by PointC (@PointC) on CodePen

 

Perhaps what you can do is use the scrub property in Scroll trigger which advances a tween in a smooth way based on the scroll position:

scrub

Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

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

 

Happy Tweening!!!

[Perdixo75]

@Rodrigo Thanks for your answer. I agree the site isn't easy to navigate. What interest me is only that selected project section part with that "sticky stack" effect on scroll !

 

After looking at what you sent and trying again, i still didn't find the good solution. Here's where i am right now :

 

See the Pen bGgvedy by Perdixo757575 (@Perdixo757575) on CodePen

 

Still having trouble to understand how the effect on the website work 

 

 

[Rodrigo]

Instead of using scrub: true, try a number around 0.5 - 0.7 in order to get a more smooth animation:

gsap.to(".project:not(:last-child)", {
  yPercent: -96 + (projects.length - 1), 
  ease: "none",
  stagger: 0.5,
  scrollTrigger: {
    trigger: ".trigger-container",
    start: () => "top top",
    end: () => "+=" + ((projects.length + 1) * window.innerHeight),
    scrub: 0.6,
    pin: true,
    invalidateOnRefresh: true,
  }
});

Happy Tweening!!!

[Perdixo75]

@Rodrigo Yes i've added a 0.6 value, looks wayy smoother ! 

I've pretty much done it. But i can't figure out how to add a scale effect on each project-container__inner during the scroll of each section..

 

Here's what i have right now :

See the Pen bGgvygv by Perdixo757575 (@Perdixo757575) on CodePen