JanWe Posted October 11 Share Posted October 11 Hi, Pretty new to gsap. I have a section containing a div with a title and a container of images, and a div with a button. What i want is pin the div with the title and the container of images. And also pin the container of images, placed in position absolute, to do stacked images. It's not too bad for now. But when the images are pinned, the position of the images suddenly change : - a top and left position are added to the image And when the last image is unpinned, all the images disappear... I'm a little bit lost and don't understand why. I'm not sure about the way i handled it. Thx for helping me ! See the Pen gOVLZLm by Jan_We (@Jan_We) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 11 Share Posted October 11 Hi @JanWe welcome to the forum! The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Currently you have something like 5 ScrollTriggers that all need to work in tandem with each other. Personally I've found that when you're creating more than one ScrollTrigger you've to ask you your self can this be simpler? Currently you're coming from the angle of scrolling, this is a mistake a lot of people make when starting out with ScrollTrigger, but most of the time it is much easier to start with the animation you want to happen before you even think about scrolling. Before doing anything please read my post about creating a stacking card effect, this will tell you almost everything you want to know. I challenge you to create the animation you want without adding ScrollTrigger to anything and then post back here with what you've tried, even if you've created something that is not working just post it here. We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Good luck and looking forward to what you can come up with! 1 Link to comment Share on other sites More sharing options...
JanWe Posted October 11 Author Share Posted October 11 Thx very much @mvaneijgen with this really helpful documentation !!! Good css trick with the display grid and the grid area !! For the future, il will surely apply the rule : first the animation, THEN scrolltrigger ! Thx again, i learned a lot ! 1 Link to comment Share on other sites More sharing options...
JanWe Posted October 19 Author Share Posted October 19 Hi again, In your static cards logic exemple, how would you do to stack cards with a height of 50vh and an other section after ? Thx Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 19 Share Posted October 19 Do you have a minimal demo? I'll be happy to take a look for you, but I'm not sure what it is you're asking. Link to comment Share on other sites More sharing options...
Rodrigo Posted October 19 Share Posted October 19 2 hours ago, JanWe said: In your static cards logic exemple, how would you do to stack cards with a height of 50vh and an other section after ? You have to wrap that section and the next or previous in a common parent and pin that parent element, as shown in these demos: See the Pen qBLRzVX by GreenSock (@GreenSock) on CodePen See the Pen ZEVpqjb by GreenSock (@GreenSock) on CodePen Hopefully this helps Happy Tweening! 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