porkpop Posted February 7 Share Posted February 7 Hello! I've got this scrolling accordion effect, and it's working exactly as I'd like, but I want it to begin where the collapsed states sit at the bottom of the frame before starting the scroll. I've attached a reference image to what I'm looking for. It feels like it should be a simple solution but I have been unsuccessful so far. Thank you for any and all help! stackingSections-example.pdf See the Pen yLwqONY by newmanl (@newmanl) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 7 Share Posted February 7 Check out my card stacking guide, it demonstrate how you could setup the basic structure to get all kinds of effects. Hope it helps and happy tweening! Side note, when using ScrollTrigger it is best to leave all the pinning to ScrollTrigger, don't set position: sticky in your CSS, will make things a lot easier! Could help myself, but please be sure to read the post it explains so much and with this knowlage you can build any card stacking effect you want! See the Pen VwRBNEb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
porkpop Posted February 7 Author Share Posted February 7 @mvaneijgen Thank you! I tried to apply this technique, but it's not quite functioning the way I need it to. If it helps, this is functionality i'm trying to recreate in Webflow for a client, which you can imagine means I don't have the most extensive knowledge of js. I tried to apply what you provided and add scrolltrigger, but it's just not quite right. Any advice is greatly appreciated! See the Pen ExMpJBy by newmanl (@newmanl) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 8 Share Posted February 8 Great implementation! Seems to work great at my end, the only thing you'll need to tweak now is the distances everything moves. So in my example everything moved based on the window hight, but for your example you probably want to tab in to the height of the element. You also want to offset the cards by the height of the menu bar (I've just set it to a random value for now) I personally Always like to use a timeline, to separate the ScrollTrigger from the animation logic and have found that a animation is never as simple as one tween and if it it there is always time to optimise later. You now could also look into having the sections snap when you've scrolled a little, check out the snap/snapTo properties in the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Hope it helps and happy tweening! See the Pen oNVPgmZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 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