Leaderboard

<script src="./thirdparty/TweenLite.js"></script> <script src="./thirdparty/plugins/MorphSVGPlugin.js"></script> <!--this MUST be loaded after the plugins for GSAP\Tween--> <script src="./thirdparty/require.2.1.4.min.js"></script> Got 'er fixed. Thank you for the response! Sorry, it was Friday at 3:30, I was frustrated, and the idea of breaking out my simple project was lost in "don't punch the screen, don't punch the screen". Basically requirejs needs to be loaded after the es5 stuff. Before, and it doesn't know what to do. Now if you'll excuse me, I have a date with a stackoverflow response.

Hi @bignose Welcome to the forum and thanks for joining Club GreenSock. If I understand your question correctly, you'd want to use the position parameter on the autoAlpha stagger tween. Your first stagger duration is 1 second so you can set a position parameter of 1 second on the autoAlpha stagger and it will start when the first element in the first stagger tween completes. tl.staggerFrom("grid-item", 1, { y:-10 }, 0.3); tl.from("grid-item img", 1, {autoAlpha:0 }, 0.3, 1); More info about the position parameter: https://greensock.com/position-parameter Hopefully that helps. Happy tweening and welcome aboard.

Hi and welcome to the GreenSock forums, Thanks for the demo. Does reversing the animation do what you want?

@Carl meant that we can't really troubleshoot a live site (or page) as we have no idea what should be happening and no way to edit the code. If you can create a simplified demo that shows the GSAP related problem, we're more than happy to help with that. Thanks and happy tweening.

Hi @jiggles78 I'd recommend focusing on one animation piece at a time and try to recreate it. It's like the old saying: "You eat an elephant one bite at a time." Eventually all those little animations will make a great website. I don't know of any tutorials that will take you through every aspect of the showcase sites, but Petr Tichy has a deconstruction playlist on his YouTube channel. You may find it helpful. https://www.youtube.com/user/ihatetomatoesblog/playlists Hopefully that helps. Happy tweening.

Thanks Craig! Although, I was able to read and watch tutorials about positioning parameters before, it turns out that my animation offsets were a bit off. I'm still getting the hang of it. Thanks again, and GSAP is fantastic.

I also read the question a few times and got a bit lost too. It does seem to be an overwrite issue with those new timelines and targeting the same class. If you could you just take this step by step and create a simpler demo, I'm certain we can point you in the right direction. Happy tweening.

Is there any way you could create a more reduced test case without all the steps necessary? I tried clicking on the "This triggers the alert overlay" button and immediately got a JavaScript error: Same thing when I click on the perimeter overlay button. Maybe I'm totally misunderstanding the directions. I read your question about 4 times and it's still pretty fuzzy to me what exactly you want to happen or how that corresponds to the 60-ish lines of code. It looks like you've embedded a function call into your timeline, and that function creates a whole new/different timeline that infinitely repeats. So every time you play that first timeline again, it's triggering that function call which creates another timeline again...and again...(each time) and you're likely getting overwriting or odd starting positions based on the timing of clicks. That's not a problem with GSAP, though - that'd be just a logic issue in the code. For example, if the infinitely repeating animation is halfway through one of its iterations when that function gets called and the [redundant] animation is created, it'd start from the current values at that time (which are halfway through an iteration). See what I mean? Just looking at the code, I get the strong impression that there are just some logic issues and there's likely a much cleaner way to structure your animation logic but I'm not entirely sure how to advise you because I don't understand all the goals and requirements. Again, a very simplified example of just a part of this would be super helpful, and then you can build up from there. In other words, try baby steps first rather than attempting to wedge every ounce of functionality into the logic in the first place.

Ironically, the "/latest/" CDN link you're using, https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js, is really old. CDNJS dropped support for "latest" years ago, so it's way out of date. Please use the most recent version, 2.0.1. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js I'm running out the door, so I don't have time to wrap my head around all the steps and what might be happening, but I figured I'd tell you about the version thing and see if you can give that a shot and let us know if you still run into the problem.

Welcome to the forum. There are numerous threads about parallax available. You can use the forum search feature to find quite a few. Here are some to get you started. Happy tweening.