Pinned sections with animation

[zuppa]

My example is working in the way I want it, its just a little bit bugged ( ex: it was supossed to stop the black overlay from growing until the middle of the screen, and then it started scrolling, and appears the next slide), right now its overlaping the animations, but I'v made this using a padding-bottom, in wich I think it's not the best approach, how can I achieve this with GSAP's utils the correct way?

See the Pen BaQwGNb by msmzuppa (@msmzuppa) on CodePen

[tailbreezy]

  
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".cascade .item").forEach(panel => {
  
  let fundo = panel.querySelector('.fundo')
  gsap.timeline({ //cria timeline
    scrollTrigger: {
      trigger: panel,
      scrub: true,
      pin: true,
      pinSpacing: false, 
    }
  }).to(fundo, { width: "100%"}); 
}); 

 

or with different syntax

 

  
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".cascade .item").forEach(panel => {
  
  let fundo = panel.querySelector('.fundo')
  ScrollTrigger.create({
    trigger: panel,
    scrub: true,
    pin: true,
    pinSpacing: false,
    animation: gsap.to(fundo, { width: "100%"})
  })
}); 

 

• start: 'top top' is default

• setting an explicit duration of a scrub tween doesn't do much (they get default 0.5s, change it only if needed (not in this case))

• pinSpacing: false means you will start overlapping the next image, you have to somehow space them out if you don't want that

[akapowl]

 

Although it won't fix your issue, using tailbreezy's first code example above is a good idea. It's a little easier to read than what you have. In that same vein; using a proper formatting (this espacially with regard to your CSS) helps yourself and others wrap your head around what's going on more easily.

 

For the issue - I would probably handle it this way:

 

1) Instead of a padding-bottom: 100vw I would space the sections by using a margin-bottom: 100vh.

 

2) Create two seperate ScrollTriggers for each of your sections - one that handles the animation with an end of "+=100%" and another one that handles only the pinning - with an end of "+=200%" (twice the duration of the other trigger)

 

 

gsap.utils.toArray(".cascade .item").forEach(panel => {
  
  let fundo = panel.querySelector('.fundo')
  
  gsap.timeline({ //cria timeline
    scrollTrigger: {
      trigger: panel,
      scrub: true,
      start: 'top top',
      end: '+=100%'
    }
  }).to(fundo, { width: "100%"}); 
  
  ScrollTrigger.create({
      trigger: panel,
      pin: true,
      pinSpacing: false, 
      start: 'top top',
      end: '+=200%'
  })
  
});

 

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

 

 

On a sidenote:

If you only have that single tween in that timeline, you could also just hook that scrollTrigger to a individual single tween instead of a timeline. And if you can, try to avoid tweening on properties such as width or height if possible - instead you could set the width you want and instead tween the scaleY from 0 to 1, for example - that should be more performant.

 

Hope this helps - and welcome to the forums  

 

[ZachSaucier]

1 hour ago, tailbreezy said:

start: 'top top' is default

This is incorrect. The default start value is "top bottom".

[tailbreezy]

6 minutes ago, ZachSaucier said:

This is incorrect. The default start value is "top bottom".

 

I did check my console, before I stated that.

 

  var st = ScrollTrigger.create({
    trigger: panel,
    scrub: true,
    start:'top top',
    pin: true,
    pinSpacing: false,
    animation: gsap.to(fundo, { width: "100%"})
  })
  
  console.log(st.start)

 

    start:'top top'

 

 

 

    start:'top bottom'

 

 

//    not setting start: "..."

 

[ZachSaucier]

Ah, the pin: true is set. That changes the default value to "top top". My mistake  

[mikel]

 

I would like a glossary with all - 'the hidden' - defaults.
Maybe more hints in GSAP 3 Cheat Sheet might be helpful.

 

Happy tweening  the defaults ...

Mikel

[ZachSaucier]

The docs should cover the default values when there are default values. I updated the docs for the start and end properties to be correct for this situation. You might need to hard refresh to view the changes.

[tailbreezy]

I think a quick search(cmd+k) similar to what Vuejs and Tailwindcss has with algolia would be stellar.

 

 

[ZachSaucier]

10 minutes ago, tailbreezy said:

I think a quick search(cmd+k) similar to what Vuejs and Tailwindcss has with algolia would be stellar.

The docs already have a search. Is there something in particular about the searches that you mentioned that our search doesn't have?

[tailbreezy]

I like using them, they are much better experience. 

Having them available from everywhere is also huge for usability (key combo).

 

For example how to see the defaults for scrollTrigger pin.

I would prefer pressing Cmd+K, typing ScrollTrigger defaults, select the best option and go.

Right now I have to click the docs, wait for the http response (takes a few secs), click exactly over the input box, type ScrollTrigger (not that smart to understand scrolltrigger defaults), go to scrolltrigger plugin page, start scrolling (these pages are very long), and hopefully find what i need.

No bueno.

 

[zuppa]

4 hours ago, akapowl said:

 

Although it won't fix your issue, using tailbreezy's first code example above is a good idea. It's a little easier to read than what you have. In that same vein; using a proper formatting (this espacially with regard to your CSS) helps yourself and others wrap your head around what's going on more easily.

 

For the issue - I would probably handle it this way:

 

1) Instead of a padding-bottom: 100vw I would space the sections by using a margin-bottom: 100vh.

 

2) Create two seperate ScrollTriggers for each of your sections - one that handles the animation with an end of "+=100%" and another one that handles only the pinning - with an end of "+=200%" (twice the duration of the other trigger)

 

 

gsap.utils.toArray(".cascade .item").forEach(panel => {
  
  let fundo = panel.querySelector('.fundo')
  
  gsap.timeline({ //cria timeline
    scrollTrigger: {
      trigger: panel,
      scrub: true,
      start: 'top top',
      end: '+=100%'
    }
  }).to(fundo, { width: "100%"}); 
  
  ScrollTrigger.create({
      trigger: panel,
      pin: true,
      pinSpacing: false, 
      start: 'top top',
      end: '+=200%'
  })
  
});

 

 

 

 

 

On a sidenote:

If you only have that single tween in that timeline, you could also just hook that scrollTrigger to a individual single tween instead of a timeline. And if you can, try to avoid tweening on properties such as width or height if possible - instead you could set the width you want and instead tween the scaleY from 0 to 1, for example - that should be more performant.

 

Hope this helps - and welcome to the forums  

 

 

Thank you very much akapowl, and thank you all that entered this topic this works as I expected, but again, I have a question, can I do something like this?

I want to do this, because I have my menu bar above, and I don't want the items to be the height of the screen, but the height of the screen minus the menu bar height

 

end: '+=100% - ' +  $(".barramenu").height()

 

gsap.utils.toArray(".cascade .item").forEach(panel => {

  let fundo = panel.querySelector('.fundo') 
  gsap.timeline({ //cria timeline
    scrollTrigger: {
      trigger: panel,
      scrub: true,
      start: 'top top',
      end: '+=100% - ' + $(".barramenu").height()
    }
  }).to(fundo, { width: "100%"}); 

  ScrollTrigger.create({
    trigger: panel,
    pin: true,
    pinSpacing: false, 
    start: 'top top',
    end: '+=200% - ' + $(".barramenu").height()
  });
});

 

 

[ZachSaucier]

Sure, use a functional value and you can put whatever you'd like in there: 

end: () => "+=" + (elem1.height() * 2 - elem2.height())

 

[zuppa]

That's what I thought, hahah, alright.
A huge THANK YOU ALL for the team GreenSock for all this amazing plugins