Leaderboard

Hi @teknolyfe welcome to the forum! I would have a tween that runs initially, that then called another tween when it is done and repeats infinitely. In your initial demo nothing was visible, so I used my own shape to get things up and running. The timing could be better for the initial load, but that is easy to tweak. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/OJqBPVb?editors=0010

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!

Sorry, but that's impossible with the way you structured your HTML. It has nothing to do with GSAP/ScrollTrigger - it's the fundamental way markup/CSS/browsers work. The text elements are INSIDE the <div> that has the green background, and your circles are outside that <div>, so you can't tell it to somehow sit inbetween those. You'll need to restructure your markup. Sorry, I don't have time to figure that out for you (we really try to stay focused on GSAP-specific problems here), but I'd recommend temporarily removing GSAP/ScrollTrigger from the equation just so you can focus on your layout. Get things to layer the way you want (so the green is in the back, circles are in the middle, and text is in the front) purely from an HTML/CSS standpoint. Once you've got that, THEN introduce GSAP/ScrollTrigger. Good luck!

Hi @Subhankar welcome to the forum! I wanted to offer you some quick advice about how 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. I've written a guide how to create a card stacking effect. It. explains the thought process how you could go about creating the setup to create any effect you want, so also this effect. Check it out. Hope it helps and happy tweening!

Hi @Black Ducas I've split your reply to its own topic, no need to bother all these people 9 years later. If you would have logged tween you would see that you don't have access to it, because you never pass it to the function that you call in onComplete If you pass the current timeline as an argument to the function, you do have access to it. Check out how functions work in Javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/oNVPPxN?editors=0011

Hi @Rodrigo I removed all of my GSAP code because I couldn't find a suitable way to make it work. Your code snippet really helped me solve the problem I'm truly grateful to you!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/yLwxpjZ Just use two different ScrollTriggers, one for pinning and another for the animation and just do some math in order to finish the animation once the next section appears at the bottom of the screen. This whole setup depends that each section has to be 100vh, getting around that requires more logic and time I'm afraid. Hopefully this helps. Happy Tweening!

The token is solely for accessing the private NPM repo. And you don't even need to use the private NPM repo if you don't want to - when you join Club GSAP, you can download a zip file that contains ES modules and UMD minified files and even a .tgz file that you can npm install locally. Lots of options! Our entire licensing model is based on the honor system and a simple number-of-developers pricing structure. You don't need to enter some API key for every site you use it on or anything like that. It's very simple, and we fully recognize that if someone really wants to steal the members-only plugins, they'll find a way. We also trust that most people want to do the right thing and honor the work of other developers. We aim to treat others the way we'd want to be treated and we believe that if we serve well, the market will recognize and reward that by joining Club GSAP eventually. And to be clear, if your membership expires, nothing will change on your client websites. We don’t inject “phone home” scripts to verify your license status. Functionality doesn’t suddenly stop upon expiration. Inspect the code for yourself if you’d like to verify (that’s why we provide the raw source code). Of course we ask that you not expose your token in a public repository, for example, or share the members-only plugins. In terms of deployment, yes, you can just include the GSAP files in the same way you would any of your other JS files. There's no authentication that happens on your live site or anything - GSAP is just a set of JavaScript files. Let us know if you have any other questions. Enjoy the tools!