ScrollTrigger conceptual question

[mrcl]

Hi everybody,

 

I currently working on a landing page where a "hero" is traveling down the page and I thought I had figured it out conceptually but I've ran into some problems. The Pen shows the rough idea of what I try to accomplish and I hope someone can push me in the right direction. 

 

+ The first problem I encountered was that the "hero" is not scrolling in the viewport center all the time. 

+ The second is that the "hero" should stop moving when he arrives at his destination in section 3.

+ And in section 1 where it turns blue as an example of something happening I want to pin the section and animate the "hero" (dividing himself into two pieces and moving left and right, but that doesn't matter really  ) After scrolling x amount the animation is reversing and the journey continues.

 

My main question is if I'm thinking it all wrong and the "hero" is in a fixed position and everything else is moving and I pin the section when needed when I scroll them into view? Or do I have to control different timelines at once? Like I said I'm glad for any hint or codepen example that removes the plank sticking to my forehead

 

Cheers!

See the Pen gOXNmNw by mrclstrtr (@mrclstrtr) on CodePen

[elegantseagulls]

3 hours ago, mrcl said:

+ The first problem I encountered was that the "hero" is not scrolling in the viewport center all the time. 

+ The second is that the "hero" should stop moving when he arrives at his destination in section 3.

I feel like you should be using ScrollTrigger's pin for the hero for these.
 

3 hours ago, mrcl said:

And in section 1 where it turns blue as an example of something happening I want to pin the section and animate the "hero" (dividing himself into two pieces and moving left and right, but that doesn't matter really  ) After scrolling x amount the animation is reversing and the journey continues.

You could just just create a seperate scrollTrigger animation for this, and use that to pin the section, and animate the character's x values.

[mrcl]

It's coming closer to what I have in mind thanks to your advice. Awesome!

I still have one major problem which is how I calculate the distance to end/unpin the hero when arriving in Section 3.

 

ScrollTrigger.create({
  trigger:"#hero",
  start:"center center",
  end:"+=3500",
  scrub: true,
  pin: true
})

 

For now I'm faking the arrival with a double so to say, but it looks a little jumpy. Is there a best practice approach for a situation like this?

Cheers!

 

[elegantseagulls]

4 hours ago, mrcl said:

Is there a best practice approach for a situation like this?

You can set an endTrigger element, to get it to unpin at a specific point: https://greensock.com/docs/v3/Plugins/ScrollTrigger

[mrcl]

Thanks for all the advice so far. It helped a lot. 

Is the position of the endTrigger element recalculated by default on a window resize or do I have to add a listener function somewhere?

And do end values matter when using an endTrigger element?

 

[OSUblake]

1 hour ago, mrcl said:

And do end values matter when using an endTrigger element?

 

If you use end, it will be relative to the endTrigger instead of the trigger.

[mrcl]

Ok that makes sense  , but I'm still in deep waters with the endTrigger element.

I recreated the problem I'm facing in my pen here :

 

 

I thought that how it works is that the hero unpins slightly above the last sections center like with the rest of the animations happening above the headlines. But it gets stuck at the end of the third section and I can't wrap my head around why. 

 

Here's the scrollTrigger I use for the hero

ScrollTrigger.create({
  trigger:"#hero",
  start:"center center",
  endTrigger:".section-4",
  end: "center +=150",
  scrub: true,
  pin: true
})

And here's what slightly happens it all of the sections

const tlSection_2 = gsap.timeline({
  scrollTrigger: {
    trigger: ".section-2",
    start: "top +=150",
    end: "+=1000",
    pin:true,
    scrub:true
  } 
})
.to(hero, { scale:.5 })
.to(hero, { scale:1 });

I've chosen such a big end value to time stretch the animation. Should I better work with an empty tween to achieve this and is this causing the hero not to end up correctly at the destination?

[OSUblake]

Hi mrcl,

 

I've looked at your demo, but I'm not exactly sure what you are having issues with. Can you elaborate more on what the issue is? And have you tried turning on markers so you can see where the start and end triggers are?

 

[akapowl]

Hello @mrcl

 

Are you going for something like this?

 

Since your #hero element is centered up vertically when pinning, you could set the endTrigger to your #destination element with an end of "center center" - translating to: unpin when the center of the #destination element hits the center of the viewport. 

 

Now since you are creating that pinning ScrollTrigger for the #hero element first but then after it you are creating STs that pin different sections on the way to your destination, that first ST can not know about the pinning. So what you could do is add a refreshPriority of -1 to that first #hero-pinning ST, so it gets its calculations done after all the other STs.

 

You'll find more on that in the docs for ScrollTrigger.sort()

 

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

[mrcl]

@akapowlthat is exacly what I meant and what my problem was. Awesome!

Thanks a lot, guys for taking the time to answer and explain.