luffyacekun Posted December 28, 2020 Share Posted December 28, 2020 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 More sharing options...
mikel Posted December 28, 2020 Share Posted December 28, 2020 Hey @luffyacekun, Welcome to the GreenSock Forum. If the first section is fixed, you could pin the second one. See the Pen d791c2c799dfebd97548d1237fcb34b6?editors=1100 by mikeK (@mikeK) on CodePen If this effect is not that what you expect please show your ideas. 2 Link to comment Share on other sites More sharing options...
luffyacekun Posted December 28, 2020 Author Share Posted December 28, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted December 28, 2020 Share Posted December 28, 2020 Multiple timelines isn't an issue in itself. In fact I would probably use multiple timelines in this case. To get sections to overlap check out this demo found in the ScrollTrigger demos section. See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
luffyacekun Posted December 28, 2020 Author Share Posted December 28, 2020 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 More sharing options...
Solution akapowl Posted December 28, 2020 Solution Share Posted December 28, 2020 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 ? 5 Link to comment Share on other sites More sharing options...
luffyacekun Posted December 29, 2020 Author Share Posted December 29, 2020 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 More sharing options...
TCharli Posted March 30, 2022 Share Posted March 30, 2022 Perfect, that's what I was looking for! Thanks for the quick help! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now