bdepalmo Posted October 20, 2020 Share Posted October 20, 2020 Hello, I was hoping someone could point me in the right direction. I am trying to achieve a layered curtain effect where sections are pinned and then reveal the next section. My issue is I want to achieve this effect variable height sections. Height would be set by the content and not be limited to 100% or 100vh. In my included codepen I made the height of the first section 2000px and obviously the breaks as pinSpacing is set to false. This site (https://www.elgato.com/en/wave-1) has an excellent example of what I am trying to achieve. If you scroll down to the "Get Amped Without Clipping" section. See the Pen KKMgZYG by bdepalmo (@bdepalmo) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 20, 2020 Share Posted October 20, 2020 Hey bdepalmo and welcome to the GreenSock forums. So you just want to reveal the content from underneath the previous section? This demo shows how to do that: See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen To modify it to work for variable heights you can't use staggers. Instead you have to manage the ScrollTrigger start and ends manually based on the content height. Something like this: See the Pen gOMwveK?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
bdepalmo Posted October 20, 2020 Author Share Posted October 20, 2020 Zach, thank you for the reply it is much appreciated. Animating the Y axis position of each panel kills the ability to pin a fixed background image on each panel. I was hoping to have a panel pinned to the top with a background image, have the content scroll over it, and then reveal the next panel with the bg image no longer pinned and the sections moves out of view (repeating this for several sections). Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 20, 2020 Share Posted October 20, 2020 Sounds like you need a second ScrollTrigger for each section (on top of what I have) that just pins the background image for the duration of time that you need it to be pinned. To do that you'll need to create an element just for the background image. Link to comment Share on other sites More sharing options...
Netty Posted April 8, 2022 Share Posted April 8, 2022 Hi Zach, first of all to all developers and helping hands: thanks for the great work and the amazing animation library! I am new in doing animations with GSAP, but I am glad to found such a great tool. But.... I have a problem with the Codepen above. I try to animate divs in the panels. And I want to do this for all panels. The animation is working fine with the simple fromTo-Animation (panel 2 and 3). But if I try to start the animation with a trigger (in the first panel), it is not working anymore. Even the markers are not visible. And I can´t find the problem. Target for all panels: I want the animations in the layer to be controlled with the scrub-function and have different animations. Can me help someone? And another question for the animation project4: is it possible to set the x-value for the end position to x: 50%? I tried Xpercent: 50, but without success. THANK YOU! Here is my Codepen See the Pen gOozLvO by nettys (@nettys) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted April 8, 2022 Share Posted April 8, 2022 Hello @Netty That is probably related to the ScrollTrigger in the code you are using having an eventListener attached, that kills ALL ScrollTriggers on refreshInit but only creates those in the sizePanels function from scratch afterwards. ScrollTrigger.addEventListener("refreshInit", () => { // Kill off old ones ScrollTrigger.getAll().forEach(ST => ST.kill()); // Create new ones sizePanels(); }); Since the extra ScrollTriggers you are creating there are not inside that function, they will not get re-created after they have been killed. So you might have to re-think the logic of your approach a bit there. See how it works, if I add the creation of the ScrollTrigger (just the one that is supposed to be running after the blue section for simplicity) to that function instead See the Pen popVeLo by akapowl (@akapowl) on CodePen 1 hour ago, Netty said: And another question for the animation project4: is it possible to set the x-value for the end position to x: 50%? I tried Xpercent: 50, but without success. It would be xPercent instead of Xpercent. Maybe that's why it didn't work for you? ...or did you actually write it correctly but did not get the result you expected? Welcome to the GreenSock forums btw! 2 Link to comment Share on other sites More sharing options...
Netty Posted April 12, 2022 Share Posted April 12, 2022 Hello akapowl, thanks for your answer and sorry for the late response. to be honest, I don´t understand exactly, but I think I understand a few steps: the position of the scrolltrigger in the function - needs to be beforekilling. That sounds good. ok. And I think, I need the Quote panel.classList.contains('blue') && .... for the triggerposition? Am I right? I changed the trigger of all panels to the classes of the animated divs because of having 4 animations. And I now put all the other animations in place and they work. For the animation in the first section I made a "first" panel with display: none. It works. But I think, it is not very elegant. Is there a better way? And how can I manage, that the animation inside the panels first completes before scrolling down the panel itself? Or fix the animation in the middle of the viewport? Or at the top of the panel? I tried with pining the "project"-div. No chance. And I tried a timeline. But I think, theres is my problem with the right positioning of the timeline in the code. See the Pen ExopGRx by nettys (@nettys) on CodePen Link to comment Share on other sites More sharing options...
Netty Posted April 12, 2022 Share Posted April 12, 2022 Ahhh. I forgot: the problem with the percent...solved..I wrote it wrong 🤪. Thank you Link to comment Share on other sites More sharing options...
akapowl Posted April 12, 2022 Share Posted April 12, 2022 That pen was actually not intended as a suggestion for a solution but more as a pointer towards what's the problem with your approach. 1 hour ago, Netty said: For the animation in the first section I made a "first" panel with display: none. It works. Well, if you got it working like that, it works. I wouldn't set it to display: none though but maybe visibility: hidden instead. 1 hour ago, Netty said: And how can I manage, that the animation inside the panels first completes before scrolling down the panel itself? You could even leverage that as a sort of 'cheasing' approach to that - without changing the logic too much and adding those invisible sections in between the others. Something like this See the Pen qBpyvNM by akapowl (@akapowl) on CodePen 1 hour ago, Netty said: But I think, it is not very elegant. Is there a better way? I think you're not wrong about that and there sure is a better way - but you would have to change the logic of how the whole thing works depending on when to trigger what for that. I don't have the time to dig too deep into that, but something like this should work for starters. The heightSoFar being increased by twice the panel's height (after all the ScrollTrigger stuff in the loop) and the trigger's starts and ends adjusted to that. See the Pen WNdKWbX by akapowl (@akapowl) on CodePen If creating everything in loops like that is too much to grasp for you on the logic side of things, though (which for me it is at this moment), maybe try going a much simpler route by just creating the whole thing via one long timeline instead. That should be much simpler to understand. I hope that will help a bit - good luck with the project and happy tweening! See the Pen GRyBLWW by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Netty Posted April 12, 2022 Share Posted April 12, 2022 Thanks a lot. I will try and learn!!!! Happy Day Today! 1 Link to comment Share on other sites More sharing options...
jacopotaba Posted April 17, 2023 Share Posted April 17, 2023 how can i revert this solution for a section wipe from bottom to top like the example in ST demos See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen ? Link to comment Share on other sites More sharing options...
GreenSock Posted April 17, 2023 Share Posted April 17, 2023 8 hours ago, jacopotaba said: how can i revert this solution for a section wipe from bottom to top like the example in ST demos @jacopotaba Is this what you're looking for?: See the Pen KKpLdWW?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
jacopotaba Posted April 17, 2023 Share Posted April 17, 2023 55 minutes ago, GreenSock said: @jacopotaba Is this what you're looking for?: answered here, thank you @GreenSock 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