Jump to content
Search Community

Extending pin duration while having the 'pinSpacing: false' effect

mamotromico test
Moderator Tag

Recommended Posts

Hi! I'm working in a page that should have a crossfade effect when trasitioning from one section to the next, while also have some animations on each section when they are pinnned. I understand that the usual way of setting up such a page is to use position: absolute; to overlay each section and then just control the visibility of each through alpha/opacity using the ScrollTrigger plugin. Unfortunately this would be fairly complicated to set up in this page and as such a last case resort.

Is there any way to achieve such and effect without relying on absolute positioning?

At first I thought I might be able to pin an element, play all animations of the section, and then "re-pin" it with pinSpacing: false, let the next section come under  the current pin (possibly manipulating the z-index of each section through .set( )), and then do the fade. No luck so far though.

If I could have both the padding of pinSpacing: true and after that the overlay effect of pinSpacing: false, I could probably figure out the rest. The anexed codepen just give you an idea of the document structure and will likely serve as a base for further discussion.

See the Pen eYvOKpg by mamotromico (@mamotromico) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @mamotromico

 

I read your post a few times and I'm still kinda fuzzy about what you're asking. I think you MIGHT be overcomplicating things (but it's likely I'm misunderstanding). You could probably just set it up as one big timeline that scrubs. It's just a matter of getting the timing right. 

 

Have you checked out the demos section to see if there are some ideas you could glean there? https://greensock.com/st-demos

 

Lastly, if you're saying that you want to get a certain effect without having to set up your document structure properly, the answer is probably "no". 

 

Or maybe all you have to do is leave pinSpacing on, but set the margin-bottom or margin-top to -100vh to get the overlap you wanted. Just an idea. 

  • Like 1
Link to comment
Share on other sites

4 hours ago, GreenSock said:

You could probably just set it up as one big timeline that scrubs. It's just a matter of getting the timing right. 

 

Yep, that's how I would probably go about it too in this case.

You'll have to have a good understaning of how durations work with scrub though.

 

To add a little detail to that, here's an example.

For comprehensibility let's say the end of your ScrollTrigger is set to '+=1000%' here.

 

I set the fading-in and fading out tween on that timeline to a duration of 1 each, and the tweens in between have a totalDuration of 8 combined.

That makes the fading in and fading out each have a 'duration' of 100 of those 1000% of the ScrollTrigger - translating to 100vh each

 

4 hours ago, GreenSock said:

Or maybe all you have to do is leave pinSpacing on, but set the margin-bottom or margin-top to -100vh to get the overlap you wanted.

 

Since your goal is to have that crossfading effect between sections, in this case you'd actually want to set the margin-top to -200vh because it takes 100vh to scroll the new section it into position and you want it to be there when the fading out of the section before happens, which would be another 100vh in this scenario.

 

 

 

Here is that example with a bit of see-through for the sections, so you see what's going on behind the curtain.

 

See the Pen 0d8f0a6bd9c45328687d7f689731919e by akapowl (@akapowl) on CodePen

 

 

 

And here it is in full effect

 

See the Pen 77df0769fc457cb448cae09d5a2cb473 by akapowl (@akapowl) on CodePen

 

 

  • Like 2
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...