Jump to content
Search Community

Pinning, Start and End, and how to write the CSS...

Bogomip test
Moderator Tag

Recommended Posts

Ok, so im new to GSAP and ScrollTrigger, and whilst I am getting comfortable with how to do 'it', I have a few questions which are causing me issues.

 

The biggest is the relationship between the CSS, HTML and GSAP. If you look at the codepen attached, in the CSS I have basically set it up as if I were not going to animate it, and then used ScrollTrigger to do the animating and the scroll stuff. ScrollTrigger adds padding I believe which gives it the 'longevity' as you scroll. But this is where I am struggling. 

 

I feel like with the example I should have a panel-one height of 100vh (defined in css) + 2300 rem (the pin height of panel-one defined by 'bottom-=2300rem). Then, 1100rem scrolling into the page the image should start to fade, and have faded out fully within 100rem (quick). 1100 rem after this the pin should lapse and the page resumes scrolling. This code:

 

// panel one pin
    gsap.to('.panel-one', {
        scrollTrigger: {
            trigger: '#panel-one'
            start: 'top top',
            end: 'top bottom-=2300rem'
            pin: true
        }
    })
 
    gsap.to('.panel-one__image', {
        opacity: 0
        scrollTrigger: {
            trigger: '#panel-one'
            start: 'top bottom-=1100rem'
            end: 'top bottom-=1200rem'
            scrub: true,
            markers: true 
        }
    })

 

However it doesn't seem to work like this - I dont know if its how im writing the CSS, or how I am judging the size of the elements but things just dont happen when I expect them to. I have gotten by a little with trial and error but it seems like a poor way to properly understand (and takes a lot of time when trying to create complex animations).

 

Any help or explanations are welcome, as are links to great 'start' 'stop' or layout using ScrollTrigger tutorials!

See the Pen BapLzEp by bogomip (@bogomip) on CodePen

Link to comment
Share on other sites

 

Hey @Bogomip

 

The first parameter in your start always refers to your trigger-element; the second refers to the viewport; 'top top' meaning when the top of the trigger hits the top of the viewport. So when you need to calculate distances like in your example, you want to make sure that you calculate them from the same point.

 

I changed all your 'top bottom' to 'top top' to keep the measurement consistant there.

 

Also, for your first ScrollTrigger that does the pinning you'd want to use the div with the class of panel-one inside of that header-wrap as the trigger to make sure your wrap can act as the trigger for your second ScrollTrigger. Then with regard to this I also put the background-image on the div.panel-one instead ( so it doesn't scroll with the flow ).

 

Does this look more like what you expected? ( check the console in debug-view, it logs the current scroll-position on scroll )

 

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

 

 

 

To keep things a bit simpler, for the ends of your ScrollTriggers you could also simply use relative values like "+=100rem" instead - which translates to: end 100rem from the start.

 

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

 

  • Like 5
Link to comment
Share on other sites

Hi Alex, 

You're right about the padding! 
By default, when you pin an element, padding gets added to push other elements down so that when it gets unpinned, the rest of the content flows in nicely.

Your CSS is set up perfectly - I think the confusion comes in where you have two separate scroll-triggers unnecessarily. 

Here's a little example that (i think) does what you want?

See the Pen c49f9997ea9ec4b9b9d8dde1b444d16e by cassie-codes (@cassie-codes) on CodePen

  • Like 5
Link to comment
Share on other sites

Hi both!

 

Thanks so much for your help - I have been loving using these tools but the start and end have been the only real bane of the process! These explanations help and I am so appreciative of your time!

 

With respect to using '.panel-one' as the pin and the trigger it breaks the flow of the next part (not shown in the codepen for simplicity but is basically just 'panel-two' done in the same way as 'panel-one') - I think because using the class .panel-one seems to mean the page keeps scrolling. I.e. I scroll and immediately any content that comes after it seems to start moving. Pinning the ID works better for further page flow it seems.

 

So I change the fade to: 

 

gsap.to('.panel-one__image', {
        opacity: 0, 
        scrollTrigger: {
            trigger: '.panel-one', 
            start: 'top top-=500rem', 
            end: 'top top-=1000rem', 
            scrub: true,
            markers: true ,
            onUpdate: function(self) {
              console.log( self.scroll() )
            }
        }
    })

If I change the trigger to the class .panel-one it does work but I am not sure why because if I am pinning the ID surely it is the ID panel-one that gets the extra padding....

 

So to summarize:

- I need to pin the ID #panel-one to stop the next content on the page flowing upon scroll.

- I need to attach the effects on the content inside #panel-one (the image and text) to the class .panel-one to make it work.

 

I guess what I am now asking is, in this code:

 

// panel one pin
    gsap.to('#panel-one', {
        scrollTrigger: {
            trigger: '#panel-one', 
            start: 'top top',
            end: '+=1800rem', 
            pin: true
        }
    })

    gsap.to(['.panel-one__image', '.panel-one__text'], {
        opacity: 0, 
        scrollTrigger: {
            trigger: '.panel-one', 
            start: 'top top-=500rem', 
            end: 'top top-=1500rem', 
            scrub: true,
            markers: true ,
            onUpdate: function(self) {
              console.log( self.scroll() )
            }
        }
    })

Why does it work to pin the fade to the class .panel-one and not the id #panel-one?

 

Thanks! :)

Alex

 

Link to comment
Share on other sites

 

🤔 Yeah, in this case that approach of having a different timing for the pin vs the animation would be rather complicated ( or I am just totally overcomplicating things ).

 

See the Pen 478362ecbd89c740fc704643bff7c69c by akapowl (@akapowl) on CodePen

 

 

I think the better and easier approach for your scenario might be to just go with timelines and adjust the duration/position of your tweens on those accordingly. This looks a lot cleaner.

 

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

 

 

 

Does that work better for you?

 

 

Edit: 

I am not sure, what your exact setup looks like with that second panel you mentioned, so I also made a variation of that second pen above, which now also incorporates that gradient-background.

 

See the Pen 722128741e885c2ad810a4d81702f612 by akapowl (@akapowl) on CodePen

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hi akapowl, 

 

Thanks a lot, that does look a significant amount neater than what I had before. The timelines look much tighter than having the multiple calls as well.

 

I appreciate both your time on this - bit by bit im learning :)

 

Alex

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...