Jump to content
GreenSock

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

Question about pinSpacing

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 post
Share on other sites

 

Thank you @mikel here is my currently setup, I want section 3 to overlap section 2.

It's out of topic but I read somewhere that have more than one timeline is not neccessary, how to setup a good timeline in this in this situation ( I'm currently have 3 timelines).

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

Link to post
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 post
Share on other sites

 

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 zYKpwma 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 PoGEjYz by akapowl (@akapowl) on CodePen

 

 

Maybe someone else can shed some light ?

 

  • Like 5
Link to post
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 post
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.

×