Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Brodiero

pin Spacer adds unwanted top

Recommended Posts

Oddly I can't reproduce this in the stripped down codepen but in my own page the pin-spacer adds a calculated top value to my pinned element, giving it an unwanted offset within the layout.

 

my page looks like this

 

<div class="pin-spacer" style="flex-shrink: 1; display: block; margin: 0px 0px 32px; right: auto; bottom: auto; top: 201.058px; left: auto; position: relative; overflow: visible; box-sizing: border-box; width: 557px; height: 2008px; padding: 0px;"><div id="content1-wrapper-list" class="

whereas the stripped down codepen  - same gsap but removed css/content - has top:auto

 

<div class="pin-spacer" style="float: none; flex-shrink: 1; display: block; margin: 0px 0px 32px; right: auto; bottom: auto; top: auto; left: auto; position: relative; overflow: visible; box-sizing: border-box; width: 383px; height: 968px; padding: 0px;"><div id="content1-wrapper-list" class="md-col-5 md-col services-list mb3 left-align items-start" style="opacity: 1; visibility: inherit; transform: translate3d(0.5581%, 0px, 0px); left: 0px; top: 0px; margin: 0px; width: 383.328px; height: 1000px; padding: 0px; bottom: auto; right: auto;"><ul class="h2 m0 line-height-3 list-style-none "><li><div class="line-height-1 bold pb2 overflow-hidden from-left-off fade-out" style="opacity: 1; visibility: inherit;">Title</div></li>

Any ideas why this may be?

See the Pen abNJLvy by brodiero (@brodiero) on CodePen

Link to comment
Share on other sites

My first guess is that you've got an outdated ScrollTrigger file. Try updating and clearing your cache. 

 

Other than that, it's tough to diagnose blind. Worst case: maybe set pinSpacing: false and manually add whatever spacing you need. 

  • Like 2
Link to comment
Share on other sites

Thanks Jack.

 

pinSpacing is already set to false and i'm using 3.5.0 across the board, have also emptied cache/tried different browsers.

 

I will rebuild the page and try and find the error. Will report back and findings!

Link to comment
Share on other sites

It was an erroneous class superseded by another so I missed it, I guess gsap didn't!

 

Thanks for the steer

Link to comment
Share on other sites

Where am I going wrong with the pin & 'fade-out'? 

 

I'm trying to have the list 'content1-wrapper-list' pin, then at the end of pin it should fade out before intersecting with the header.

 

I can get the two to work independently but combined the 'fade-out' triggers ignoring the pin....

Link to comment
Share on other sites

It seems to be working to me. What do you think is not working?

  • Like 1
Link to comment
Share on other sites

21 minutes ago, ZachSaucier said:

It seems to be working to me. What do you think is not working?

 

The list should pin for the section scroll duration (red or green md-col-7) the each line fade out as it scrolls up.

 

What it appears to be doing is pin, then fades out as the 'original' position reaches the top.

 

Im trying to have a text block pin whilst related images scroll, then as the next section scrolls up the previous pin scrolls out and fades to avoid the header.

 

Commenting out either the 'general fade-out top of viewport' or 'section info pin' illustrates the two things i wish to combine.

Link to comment
Share on other sites

39 minutes ago, Brodiero said:

Im trying to have a text block pin whilst related images scroll, then as the next section scrolls up the previous pin scrolls out and fades to avoid the header.

That is what it's doing? I see nothing wrong in the demo still. Maybe you just want different start and/or end values for some of your ScrollTriggers? Still not understanding what exactly you're wanting.

  • Like 1
Link to comment
Share on other sites

Sorry if i'm not explaining myself well.

Put aside the pinning action for a moment - the text should fade out as 'correct fade' video. 

Combine that with a pin, the text should pin for the duration of the red section, then fade out as 'correct fade'.

 

instead it pins and fades out immediately, not when it visibly hits the ST start & end parameters.

Link to comment
Share on other sites

Ah, so you want the text to still move upward even though it's pinned? If you need to keep the same markup I'd fake it by translating the text in the y direction while you start fading it. Given your setup it might require another ScrollTrigger for the container of the text.

  • Like 1
Link to comment
Share on other sites

 

5 minutes ago, ZachSaucier said:

Ah, so you want the text to still move upward even though it's pinned

Kind of, i want it to pin, then when it reaches the end of the pinning it should fade up and out.

 

No need to keep same markup, that's me just piecing together what i know, would you recommend doing it with a designated scrolltrigger/timeline per pin instead?

Link to comment
Share on other sites

Maybe someone else can understand what you're trying to do :) Perhaps it'd be helpful to just start from scratch and try to do it from the bottom up knowing what you know now. If you have a specific question feel free to ask.

  • Like 1
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.
×