Jump to content
Search Community

Question about pinSpacing

luffyacekun test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hey, I'm a very newbie, I want to pin a section (section 1) with 100vh length and pinSpacing: true to play an animation with scrub, after the animation done, I want to pin section 1 again with no pinSpacing to get the next section overlaps scrolling in. could you guys show me how to get that result? I've tried some ideas but still haven't got the effect I want. Thank you very much!

Link to comment
Share on other sites

Thank you, I've seen this demo, my problem is I already pin section 2 for changing text animation, if I select section 2 one more time and pin it with pinSpacing: false, then both the changing text animation and overlaps effect run at the same time. I want to have the text is changed completely and then do overlaps effect, could you show me, what is wrong in my setup?

See the Pen PoGEpBX by luffyacekun (@luffyacekun) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hey @luffyacekun

 

The two ScrollTriggers you create for the pinning are being triggered in exactly the same place, so I doubt that would give you the wanted result anyway.

ScrollTrigger will probably just go with the last of the two created ScrollTriggers in this case.

 

I tinkered around a bit with your setup, trying to create two different ScrollTriggers for pining and a seperate one for the animation.

I got to a solution that works exactly like you described, but I can not explain why it does so, because it was more of an accident.

 

The problem, that I don't get myself right now is, that if you create the ScrollTriggers in this order ( pinning with pinSpacing, pinning without pinSpacing, animation only) it seems to work

 

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

 

 

...but if you create them in this order ( pinning with pinSpacing, animation only, pinning without pinSpacing ) it doesn't work 🤔

 

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

 

 

Maybe someone else can shed some light ?

 

  • Like 5
Link to comment
Share on other sites

10 hours ago, akapowl said:

The two ScrollTriggers you create for the pinning are being triggered in exactly the same place, so I doubt that would give you the wanted result anyway.

 

Yeah, in my real project, I have tried to push the trigger down a little bit but it didn't work, so I didn't add it to the demo. 

Thank you for your solution.

Link to comment
Share on other sites

  • 1 year later...

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