Jump to content
Search Community

pin Spacer adds unwanted top

Brodiero test
Moderator Tag

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

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

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

 

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

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...