Leaderboard

Hi @Jimboc welcome to the forum! I would create a timeline for your setup and then move the one bar to the left and the other to the right using two separate tweens. The fancy calculations you do are great, so be sure to keep them in mind for you next project, but here we can also use xPercent which allows you to move the elements based on there width using a percent value. I’ve placed some comments in your JS to better explain things, please be sure to read through them! 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. Just removed the comments from the set up to see how it would work on scroll. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyrgzxp?editors=1000

After finding this post and discovering that perspective effects don't work inside inline SVG files, as well as the "rotationY" tweens with GSAP, I made it using CSS variables and setting an upscale in relation to the angle using some utilities (+ a small shadow effect). Not the perfect result, but much better than nothing and my client was happy with the final result. I hope this helps in this case too, maybe some improvement ideas will come... https://codepen.io/jester6/pen/XWGxRMm

@mvaneijgen Thank you so much for this! So your approach DID work, but for some reason, it made everything so glitchy and slow. however, it did maintain the header/footer of the browser to remain all the time, oh and I cannot PULL TO REFRESH using this approach , maybe I'm doing something wrong? So I tried " ScrollTrigger.config({ ignoreMobileResize: true}) " which I got from the document you provided, and it worked even better. Normalize Scroll Approach: https://candid-churros-7c0625.netlify.app/index2.html Ignore Resize approach: https://candid-churros-7c0625.netlify.app/ Thank you for pointing me in the right direction much appreciated.

Yeah, I'm not a fan of the pens @Rodrigo shared. There is nothing wrong with them, and it is really cool to see what complex things are possible with GSAP, but when you're new they are hard to understand and I personally find it difficult how to modify them! The post I'd shared walks you to a process that in my eyes seems much easier to understand and because of this easier to modify! And the one golden rule to keep in mind is 'all ScrollTrigger is doing is animating your animation on scroll', nothing more! So if we first focus on the animation at hand everything else will be a piece of cake! See here, we have 5 cards with the first one visible and they all get stacked on top of each other. Please read the post above, because it walks you to the process on how to create this with CSS (which is really important) Then we animate all the cards .from() some position. Now if this is the animation you want you can uncomment the ScrollTrigger code in the demo to see how this would work on scroll. I've set the snap property in ScrollTrigger to 1 / 4 which if converted gets your a value of 0.25, which in turn means snap to a point in the timeline (animation) in increments of 25% where the start of the timeline is 0% and the end 100%, so snapping will occur at 25% of the timeline 50%, 75% and 100% (eg 4 times for the total of 5 cards minus the first one). There are much more settings for the snap property, see the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZEPqpdN?editors=0010

Awesome. Tested on my own code and works perfect. Thanks a lot, outstanding support.

Ah, special characters like that weren't supported on SVG elements, but I just implemented a workaround for the next release which you can preview at: https://assets.codepen.io/16327/TextPlugin3.min.js And it seems to resolve things: https://codepen.io/GreenSock/pen/yLwRNwe?editors=1010 Better?

Hi, On top of the great advice by @mvaneijgen maybe these demos can provide a good starting point: https://codepen.io/GreenSock/pen/abQNBVv https://codepen.io/GreenSock/pen/XWOJGVV https://codepen.io/GreenSock/pen/VwGyzge Hopefully this helps, Happy Tweening!

Hi @not6248 welcome to the forum! There is no GSAP code in your demo, we love to see what you've tried already, that way we can see your thought process and thus better help you understand the tools! Also if you want to get the most out of these forums... Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/, also 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. I've also written a guide how you can go about creating a card stacking effect, this will also work for panels! But as stated before you first have to create the animation before you think about ScrollTrigger also when working with ScrollTrigger it is beter to leave all the pinning and sticky-ing to it, instead of setting it via CSS. We would love to see what you've tried and hope with this info you can find your solution, just post back here with a minimal demo that does have some GSAP in it and tackle one question at the time! Hope it helps and happy tweening!

Yep. I assume you wanted something like this?: https://codepen.io/GreenSock/pen/VwREZpM?editors=1010