Ivan Mocs Posted March 12 Share Posted March 12 I have 2 animations, The main animation is a sliding section, and the 2nd animation is a sliding card that is placed inside the sliding section, is it possible to pin the sliding card to the sliding section? See the Pen NWmrXwO by adeivan (@adeivan) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 12 Share Posted March 12 Instead of pin: true, you can also set pin: ".thisSpecificElement" if you want to pin a specific element. I'm not sure which element you want to pin, but give it a shot. Link to comment Share on other sites More sharing options...
Ivan Mocs Posted March 12 Author Share Posted March 12 12 minutes ago, mvaneijgen said: Instead of pin: true, you can also set pin: ".thisSpecificElement" if you want to pin a specific element. I'm not sure which element you want to pin, but give it a shot. This is the sliding card I'm referring to See the Pen XWqRPrr by adeivan (@adeivan) on CodePen I tried using this, but the card is not stacked pin: ".panel .section-2", pinType: "fixed", Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 12 Share Posted March 12 Check out this post I've made. It shows you how you could setup your CSS to create any card stacking effect you want with GSAP. After reading the post you probably want to pay special attention to this demo from the post . Hope it helps and happy tweening! See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
Ivan Mocs Posted March 12 Author Share Posted March 12 17 minutes ago, mvaneijgen said: Lihat postingan yang saya buat ini. Ini menunjukkan kepada Anda bagaimana Anda dapat menyiapkan CSS untuk membuat efek penumpukan kartu apa pun yang Anda inginkan dengan GSAP. Setelah membaca postingan, Anda mungkin ingin memberi perhatian khusus pada demo dari postingan ini. Semoga membantu dan selamat tweening! Lihat Pena See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen oleh mvaneijgen ( @mvaneijgen ) di CodePen Wow, I didn't expect to be able to do it with such a simple code, thank you. Link to comment Share on other sites More sharing options...
Ivan Mocs Posted March 12 Author Share Posted March 12 Hello, I have a sliding card like the this See the Pen XWqRPrr by adeivan (@adeivan) on CodePen , but I can't seem to use it in my case, I made a new approach like this how to make the animation the same as the previous code? so the new card enters the container > about 50% of the card enters the container > scale down to 0.8 > after the scale down is 100% complete > then opacity to 0 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 13 Share Posted March 13 Have you seen this demo I linked? It does axectly what you want, but it also rotates, so just remove the rotation to have it only scale. Keep in mind: 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. See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Ivan Mocs Posted March 13 Author Share Posted March 13 22 minutes ago, mvaneijgen said: Pernahkah Anda melihat demo yang saya tautkan ini? Ia melakukan apa yang Anda inginkan, tetapi ia juga berputar, jadi hapus saja rotasinya agar skalanya saja. Perlu diingat: Hal terbaik yang harus dilakukan saat bekerja dengan ScrollTrigger adalah menghapusnya! Ini tampaknya berlawanan dengan intuisi, namun ScrollTrigger hanya menganimasikan sesuatu saat digulir, jadi fokus saja pada animasinya terlebih dahulu dan hanya jika Anda puas dengan animasinya, tambahkan ScrollTrigger kembali. Dengan cara ini Anda dapat fokus pada satu bagian pada satu waktu dan itu akan menghemat banyak sakit kepala saat debugging. Yes, I have seen it, but how do I get the card position to start directly from the first card? Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 13 Share Posted March 13 Than don't include the first card in the selector and change the timing a bit, see JS comments See the Pen LYvZBjo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
Ivan Mocs Posted March 13 Author Share Posted March 13 24 minutes ago, mvaneijgen said: Than don't include the first card in the selector and change the timing a bit, see JS comments Thankssss, my problem has been solved, sorry for bothering you See the Pen MWReBVG by adeivan (@adeivan) on CodePen 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