Problem with pin and scrub

[kalimschka]

Hi,

I want to create multiple sections where each contains a headline, a short intro text and then a different type of animation, ending with some reference numbers.

 

Each section should be pinned and the content inside should be scrubbed. So far I only got the general Intro Section and the first Content section which currently does not scroll properly.

 

Could someone help me fix the Codepen and maybe add increasing the numbers while scolling?

 

Any help would be much appreciated!

See the Pen jOMmRbB by Kalimschka (@Kalimschka) on CodePen

[elegantseagulls]

Hi @kalimschka,

 

It's tough to really see what you have going on in your codepen. Could you please simplify it a bit? Also, you're still using the old gsap 2 syntax in some areas. Could you update those to GSAP3?

This example should give you all you need for pinning and scrubbing:

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

 

 

[kalimschka]

I've just updated my Pen, deleted some code and updated the syntax.

 

What I want to to:

First animate the headline on scroll (everything else isn't shown yet), then animate the block text and then the orange text. After that the three columns should be animated successively. Each column should fade in and then the percentage number should increase.

 

Every element should stay pinned to whole time.

 

I hope that it is better to understand now.

 

[elegantseagulls]

@kalimschka

 

Thank you for updating your codepen. It's much easier to read now! I think you're just wanting to have everything scrub off the maintimeline, instead of trying to add more scrollTriggers inside the initial pin.

 

Try replacing your JS with this:

 

//
//  PLUGIN REGISTRATION
//

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);


//
//  Create section
//

gsap.timeline({
  scrollTrigger: {
    trigger: '#section-2',
    scrub: true,
    pin: true
  }
})
  .from("#section-2 header h2", {
    opacity: 0,
    y: 150
  })
  .from("#section-2 header p", {
    opacity: 0,
    y: 150
  })

  .from("#section-2 header .arrow", {
    opacity: 0,
    y: 150
  })
  .from(".references", {
    opacity: 0,
    y: 200
  })
  .from("#schlaf", {
    opacity: 0,
    y: 200
  })
  .from("#angst", {
    opacity: 0,
    y: 200
  })
  .from("#depression", {
    opacity: 0,
    y: 200
  });

You can adjust the timing of everything with markers/duration, if needed too.

[kalimschka]

Thank you very much. Sometimes less is more!

[kalimschka]

@elegantseagulls

 

Is there something like .addPause() for my scrollTrigger elements?

I want to give the animations some "breathing space" before being able to animate the next one.

 

I need some extra scrolling space or delay which the user has to scroll without changing the layout or the animations themselves. 

 

F.e 300px additional scrolling height between every of those animations

 

  .from("#schlaf", {
    opacity: 0,
    y: 200
  })
/* ADD 300px scrolling delay here */
  .from("#angst", {
    opacity: 0,
    y: 200
  })
/* ADD 300px scrolling delay here */
  .from("#depression", {
    opacity: 0,
    y: 200
  });
/* ADD 300px scrolling delay here */

 

[akapowl]

 

Hey @kalimschka

 

Understanding, how the durations and position parameter work on ScrollTriggers with a scrub applied, you could achieve adding such a pause by either adding an empty tween to your timeline where you need it with the neccessary duration...

 

 

See the Pen 3b469c518638934c3133c377a109c734 by akapowl (@akapowl) on CodePen

 

 

 

...or you could right away just position things as needed with help of the position parameter.

 

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

[mikel]

Hey @kalimschka,

 

... or ... It depends ...

 

See the Pen poNbJeq by mikeK (@mikeK) on CodePen

 

You have three adjusting screws: the end value (= 'total time'), the duration and in this case the stagger value.
Play with these values and you will see how the ralations behave.

 

Happy tweening ...

Mikel

[kalimschka]

Thanks again for the quick replies! 

 

Setting the position parameter works fine in my project and since I got a whole lot of different tweens it offers better readability than adding an empty tween between most of of them.

 

But adding an empty tween at the end of my timelines also gives some nice extra breathing space!

Also thank you for reminding me about the `end` value. Now my animations look way smoother.