amitr95 Posted June 24, 2023 Share Posted June 24, 2023 I feel like close with this one, but cannot get two items to work in my demo: I want the next card to appear from off screen. At the moment, card 2 is visible at the bottom of card 1 When scrolling up, I want the card that is slowly hiding, to scale down The effect I'm trying to emulate can be seen on this website: https://swagapp.com/ See video here: https://i.imgur.com/Rnthq26.mp4 I thought the cards were touching because of the start and end triggers, but playing with those yielded the same results. Any advice? See the Pen qBQqMYx by amit_rai95 (@amit_rai95) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted June 24, 2023 Share Posted June 24, 2023 Hi, Maybe this example can give you a good starting point: See the Pen XWxOwVp by GreenSock (@GreenSock) on CodePen More details can be found on this thread: Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
amitr95 Posted July 1, 2023 Author Share Posted July 1, 2023 Hi @Rodrigo, Apologies for the late response, was AFK for a while. Nevertheless, happy to say I've made progress regarding the scaling aspect of my query. However, I still can't get the next card from the pinned card to come from off screen (the next card is always touching the bottom of the top card). Any insight on how I can achieve this in my use case? Your demo link isn't showing anything for me on scroll? See my latest demo here: Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 2, 2023 Share Posted July 2, 2023 If you disable all your javascript and just scroll over the page normally, you will see that all your cards are touching, so this will also be the case when you enable GSAP. The best course of action would be first make sure your HTML and CSS are 100% correct, before you even think about adding any GSAP code. Laying out your elements the correct way is the most important rule to learn when working with GSAP. See the Pen oNQwvdq?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen So if you want a gap between your elements, add a gap between them. See line 22 of your CSS . If you are happy with the gap (you could also make the gap dynamic using something like vh, but I'll leave that up to you) enable GSAP again and if you want to change it at a later stage be sure to disable GSAP and change your CSS. Hope it helps and happy tweening! Side note: you should never animate your trigger element! in you scaleDown tween you animate the card element, which is also a trigger element. Best cause of action is to wrap all your .stackCard elements in an element called .stackCardTrigger and use that as the trigger element. Right now it seems to work ok, but you will encounter an issue if you keep doing it like this, so the best thing to do is just to never animate your trigger element. See the Pen poQwzKg?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen 3 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