Radim Posted January 30 Share Posted January 30 Can't find out why the sections are jumping from bottom when scrolling... Any help would be appreciated. Thanks a lot. See the Pen zYbRdpp by Radim-Stolina (@Radim-Stolina) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 30 Share Posted January 30 Hi @Radim and welcome to the GSAP Forums! Are you trying to do something like this?: See the Pen BabYJae by GreenSock (@GreenSock) on CodePen The main key was to remove the styles you have to translate the contents and use a from() instance: https://gsap.com/docs/v3/GSAP/gsap.from() Is always better to let GSAP handle all your transforms, especially if you plan on animating those properties. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Radim Posted January 30 Author Share Posted January 30 Hi Rodrigo, of course I did, but the goal should be a "sticky" content as shown in my pen... Regards, Radim Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 31 Share Posted January 31 Hi @Radim, I've written a guide how to create these kinds of "stacking cards" effect, it is really detailed and it shows you how you can go about thinking of creating these kinds of effects. Instead of trying to explain it again here I will link to the post with a demo that is really close to the effect you're looking for. If you still need help after these tips please let us know what you've tried and what is not working. Hope it helps and happy tweening! See the Pen abMbwYd by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
Radim Posted January 31 Author Share Posted January 31 Hi mvaneijgen, thank you very much. I'm sorry, but I don't see the desired result anywhere... Any other help would be appreciated. Regards, Radim Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 31 Share Posted January 31 Still what have you tried with the info given? We love to help around here, but we're not here to create the effect you want for you. We're here to help you understand the tools, so that you can build what ever you like. The post I've shared walks you through the process of how to create these kinds of effects and the pen shared is your effect, but the animation is in reverse and there are some extra tweens, so my advise copy the pen start removing the animations you don't need and take if from there. When you get stuck post back here and show us what you've tried and what is not working. That way we can see your thought process and thus better help you understand the tools! Hope it helps and happy tweening! 2 Link to comment Share on other sites More sharing options...
Rodrigo Posted January 31 Share Posted January 31 Hi, As Mitchel mentions there are several ways to achieve this depending on the setup you have. Here are a couple of demos: See the Pen zYpdvZR by GreenSock (@GreenSock) on CodePen See the Pen XWOJGVV by GreenSock (@GreenSock) on CodePen Happy Tweening! 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