Leaderboard

Good Day Fellow GreenSockers, GreenSock has recently released a new video tut on a new ease called ExpoScaleEase for smooth scaling and zooming. https://greensock.com/docs/Easing/ExpoScaleEase This video tut was made by the Mighty @Carl, take it away Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening

In your example you are calling reverse on timeline but timeline's playhead is already at zero so it will never do anything. You can overcome it by passing 1 as progress from which you want to reverse. A better approach is to assign timeline to a variable and use it to play or reverse, which I have done in my example below. You also don't need to use conditional statements while creating events, because you are writing your own project. It only makes sense to do so if you are writing a plugin or something. As for using functions to create timelines, it can be your personal preference but I think it makes more sense for complex animations or where more than 3-4 tweens are involved. Anything less than that just adds complexity to your code which can be written in fewer lines.

@riTemUp here is your codepen example with that slight rotation (rotation:0.01) @GreenSock's Jack advised : Happy Tweening

That actually has nothing to do with GSAP - it's a browser rendering thing. There's some pixel snapping that seems to happen in certain conditions. text-rendering doesn't help either (at least from my tests): https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering The only thing that appeared to help is if you apply a tiny amount of rotation so that it forces the browser not to snap those pixels. So even a rotation of 0.1 can help. Does that fix things for you?

Here is how you can do it, if you don't want decimal points there is line you can uncomment. Also noticed slight issue with logic in @Acccent's demo, numbers won't animate on first click if you click back and forth on both buttons.

This isn't strictly GSAP, more of a general JS question. Is this what you were looking for?

First, thanks for the very nice demo. Had it not been so nicely put together I don't think I would have gotten far. Although using labels to figure out next / prev navigation is cool, it can get messy in situations like this and I want to suggest a different approach. Please visit http://johnpolacek.github.io/open-source-for-fame-and-fortune/ press the right arrow a few times slowly press it a bunch of times like a maniac notice the slideshow doesn't skip a beat and it actually advances faster each time you click the arrow! What is happening is that every slide's animation is placed in a master timeline. There is an array, called positions, keeping track of the startTime of each slide's animation There is a tweenTo() function pretty similar to your goTo() that takes an index value which is used to determine which slide's startTime you need to navigate to. When tweenTo() is called it: increases a timeScale variable updates value of positionIndex (used to grab the startTime of the slide you want to navigate to) creates a tween that tweens the time() of the masterTimeline in a linear fashion (similar to what TimelineMax.tweenTo() does) sets the timeScale() of that tween based on the timeScale variable puts an onComplete callback on that function that resets timeScale to 0 when the tween is done function tweenTo(i) { timeScale++; //speed up if user keeps pushing the button. positionIndex = i; // Tween playhead to new position using a linear ease. TweenMax.to(timeline, Math.abs(positions[i] - timeline.time()), {time:positions[i], ease:Linear.easeNone, onComplete:function() { // Reset timeScale when tween is done timeScale = 0; } }).timeScale(timeScale); } You can see the source of that function on TweenDeck's git repo here https://github.com/johnpolacek/tweendeck/blob/master/js/tweendeck.js#L211 I took your pen and updated it to use this approach. You should be able to click the arrows pretty fast to see the how it works (give the demo focus first) FWIW there is very little chance I would have been able to do this unless I had been cc'd on an email between @GreenSock and @John Polacek a few years ago when they were discussing how to implement this "fast advance" technique that Jack suggested. Much credit goes to both of them!

He's not gonna reduce his forum time. He's just playing Moderator mind games to lull us into a false sense of security. Right now he's planning to overtake @Dipscom and then he's only gotta get through @Diaco and @Rodrigo to take me down.

What? Aw, that spoiled my day. Come on, @Sahil, we love having you around here! Don't let @PointC intimidate you He's only pretending to be insecure. This place just wouldn't be the same without @PointC, @Sahil, @OSUblake, @Jonathan, @Dipscom, @Carl, @Rodrigo, @mikel, etc. And now we've got some others coming on strong as well, like @Acccent, @Visual-Q, @Shaun Gorneau and more. Love it! Battle for that leader board, guys.

@Visual-QIf you console log reversed state and progress in your second example, you will notice that your statement never executes because progress remains zero. You can get around this by setting reversed property on timeline to true, otherwise timeline will play in reverse for the first time. Note that unlike reversed method, reversed property doesn't reverse entire timeline.

Everyone makes mistakes and writes too much code when they start their coding journey. Practice and time will make you better at it. Most everything I know has been learned by hanging around the forum and answering questions. There are a lot of great people around here that will help you with GSAP problems and questions as you progress. @Sahil just made it to Superhero status. His new post may give you some encouragement too. Happy tweening.

OH WOW!!! SO MUCH LESS CODE!!! WOW! SO MUCH CLEANER AND SO MUCH MORE ACCURATE TO THE POINT! WOW! THANK YOU! I want to get better at programming - javascript. I'm a novice. Any tips on how to get better? Just keep making mistakes? I'm so thankful for your guidance, if you tutor I'd be happy to learn!

Once again, thank you @Sahil & @OSUblake!

Actually, if it were me, I'd create one timeline and simply play/reverse it on click. That way you wouldn't be creating a timeline on every click, you wouldn't need any menuOpen variable nor would you have to add/remove that .is-animating class. Here's a demo from another thread, but it's the same concept and it'll show you how you could reduce your code a bit and animate it with one timeline. Happy tweening.

If you want it to be fancy, when going eg. from 20km to 20m, you could make it tween down to 1 and have an onComplete callback that changes "km" to "m" and starts a new tween from 1000 to 20 edit: I just realised I invented "km" ! oh well, the logic still works with m and k

Right – as I thought, this is a bit more complex than just rotating two independent elements. I'm not going to make a full demo as it would require more time than I have, but unless you can just rotate each wheel and work with opacity to achieve the effect you want, I think you want many individual parts rotating around one of the centers (depending on what key you're pressing); and you'd save where everything is after each rotation, so that you know what to target next time. In the pen, I'm using classes to do just that. Here's a quick example, hopefully you can figure out the rest Also, I don't know if this is a trend or what (it happened to Sahil just a few days ago), but there is no need to send private messages to people to say you posted something in the thread. Users receive notifications by default when new content appears in a thread they've participated in, and if they turned off those notifications they probably don't want to receive messages. This forum is a source of voluntary help and personally any private message I get makes me less willing to contribute to a thread, not more...

// switch this menuCta.addEventListener('click', menuToggle()); //to this menuCta.addEventListener('click', menuToggle); That should get this working properly. Happy tweening.

If you open the console, you'll see a 'Cannot tween a null target' error. // switch this tlMenu .addLabel('menu-open') .set(this.menu, {className:'+=is-animating'}) .to(this.menu, 1, {opacity: .98, autoAlpha: 1, ease: Power4.easeInOut}, 'menu-open') .to(this.ctaLinks, 1, {color: 'black', ease: Power4.easeOut}, 'menu-open') .to(this.hamburger, 1, {stroke: 'black', ease: Power4.easeOut}, 'menu-open') .set(this.menu, {className:'-=is-animating'}); // to this tlMenu .addLabel('menu-open') .set(menu, {className:'+=is-animating'}) .to(menu, 1, {opacity: .98, autoAlpha: 1, ease: Power4.easeInOut}, 'menu-open') .to(ctaLinks, 1, {color: 'black', ease: Power4.easeOut}, 'menu-open') .to(hamburger, 1, {stroke: 'black', ease: Power4.easeOut}, 'menu-open') .set(menu, {className:'-=is-animating'}); Once I made that change, all the errors went away. Happy tweening.

Hi, a1) When `tweenTo()` gets executed multiple times, multiple TweenMax-instances are trying to tween tl's time, right? I mean, TweenMax.to(tl..) from the first call of `tweenTo()` is not finished yet– Why does this work? (Just realized this is a basic behavior of GSAP which I always took for granted – Curious!) Yeah, the engine realizes that another tween is tweening the time of tl and overwriting kicks in... killing the previous tween It becomes very difficult to follow what you need if you keep updating the same demo and editing the same posts with updated questions. Much better to fork your demo for each revision and also do a new reply. We are not notified when you edit a post so 99% of the time we don't see them. I noticed that timeScale() in the demo I last saw was getting up to 999 which I doubt is what you want: https://greensock.d.pr/W47Eeg As for using labels vs time. When I said your initial label way could get messy I was referring to relying on getLabelBefore() / getCurrentLabel() and stuff while a tween was tweening the time() of a timeline with a super fast timeScale(). It becomes tricky too because you also need to know if you are currently moving the playhead forwards or backwards... do you use getLabelAfter or getlabelBefore(). Again just sort of complicated when there are so many different states that can change quickly based on user input. Yes, you are correct though, the tween that I'm creating on the timeline is very similar to what TimelineMax.tweenTo() does behind the scenes. Also, nice job of using getLabelsArray() to get an array of labels with access to their times. If you still have questions, please post a new (forked) demo with a single clear question, so that I can more efficiently understand what you might need.

@bparticle Aren't you using exact code as Blake? It only reverses animation when you close the modal, I can't imagine how polygon gets mangled up. Maybe you need to check if modal exists then play animation otherwise create modal. You can remove points by writing poly.setAttribute('points', '');

I would suggest you first try to identify what it is your goal is. Animation is a fairly broad topic. For instance in my case I haven't made the leap to very sophisticated OOP or math based animation or canvas stuff. My goal is design and communication oriented, mostly how to create effective pluggable functions and frameworks and trying to create efficient workflows for using basic animation in user interfaces etc... Although that Yeti is some pretty sharp UI work so maybe it's time I upped my game. Others here are interested in more esoteric or creative pursuits, so follow your interest, find examples break them down. If it's GSAP based ask questions here, I think you've probably already experienced the value of this forum. Even if it isn't there's almost always someone to point you in the right direction. Good Luck, and welcome to the forum!

I've never heard of this type of thing happening, but I bet there's something really odd about your setup. Is there any chance you can post it online somewhere so we can take a peek? The simpler the better. I'm really curious. I bet we can figure it out once we can see it and inspect it.

Solve!!! I wrote in the html "id=#step-3", my mate found it

Yep - that'll be fine. I'd recommend creating one timeline with your animation and then play() on enter and reverse() on leave. That way nothing overwrites and gets stuck if you hover on/off too quickly. Happy tweening.

Oh @DD77... You really make it hard for us to help you. I know it sounds wingy but you need to make a bit more of an effort to make it easy for people to look at your code. You need to make as simple as you can otherwise you won't get attention. We only have so much time to spend around here that we cannot afford an hour or two going over one person's code if there is four or five others with questions and a much smaller code base to look at. Also, by making it as small as an example you can, you will probably end up seeing ways of simplifying your own code. You didn't even change the title of the pen... One does not know which pen one is looking without refering to the thread. There is so much code in both of your examples that I think your issue is that you have tangled yourself and have too many side-effects in your functions that are causing trouble. Your preloader, for example: - You have a tween inside 'loadProgress' targeting 'progressTl' - But up to that point in your code there is no object declared with a name of 'progressTl'. - Then, afterwards, you do define a 'progressTl' with an onUpdate and an onComplete calls. Why are you returning a timeline on your onComplete? It's not doing anything that return statement. And on your onUpdate you are calling a progressUpdate but, in there you are calculating a 'loadingProgress' variable that you already had calculated in your previous loadProgress function. I have no familiarity with jQuery so, I don't know what the .progress() bit is doing but I guess it is calling the given function a set number of times. Is it calling it everytime the loading of the image updated? And all of that is without even looking at your slider example...

@GreenSock Ya but I am trying to control myself. Don't worry I hope I have made your day again.

In following demo you can see demo by @OSUblake, it is really great demo and perfect starting point for you. You can use that demo to animate those texts. Animating those slides is easiest part, you just have to figure out index of current slide and animate slides using xPercent. Or to save complexity you can slide all slides from one direction only just like those texts.

A GSAP tale: One goofy guy’s odyssey from knowing nothing to knowing just enough to confuse himself. (This is crazy long so feel free to jump to the epic conclusion). Greetings fellow GreenSockers. The end of this week marks the one-year anniversary of my first post on the forum so I thought I’d take the opportunity to share my 12-month story and hopefully encourage others to jump into the conversations around here. Maybe you’ll recognize yourself in some of the things I’ve experienced. My quick history in a nutshell Web design and coding is a second career for me. After 15 years of owning and operating a photography studio and processing lab (back in the film days - yup - I’m old), the digital camera came along and changed that industry, which necessitated a new career for me. I shifted to video production, which led to motion graphics and finally to web design. Our little agency now offers all those services. The web design clients never needed anything fancy so JavaScript took a back seat to HTML & CSS only sites for a number of years. JavaScript & GSAP: false starts and other obligations I first discovered GSAP a few years ago, but only tried it briefly. It looked cool, but with the time obligations of field video work and motion graphics jobs, it wasn’t something I could work into the schedule. Besides that, it was JavaScript – too complicated I thought. I knew JavaScript was the third piece of a good web designer’s skillset along with HTML and CSS, but I always convinced myself that I didn’t have the time and the sites we built didn’t need it. JavaScript Books + Classes = Fail I did make a few attempts at reading some JavaScript books and working through some online tutorials, but it just never ‘stuck’. Maybe the examples were too theoretical and dry or they were the wrong books and classes. I really don’t know, but I abandoned the learning process a number of times. Cut and Paste mentality Why did I really need to learn anyway? You can just Google what you need, cut and paste some code and presto – you’ve got some working JavaScript or jQuery. I only understood a small portion of what I was cutting and pasting, but hey… it worked so the problem was solved. That’s how I operated for quite some time. What’s a loop? What’s an array? What’s an object? Who cares? Wait a minute. This is ridiculous. Last spring, I was remodeling our company website and I had all these grand visions about making things move and behave in certain ways. Googling for code just wasn’t cutting it. I suddenly felt stupid. “This is ridiculous!” I thought. I should be able to learn how to write my own code. Oh yeah, I remembered that GreenSock thing I had looked at a few times and abandoned. That might work. Maybe I could actually learn how to use it this time. I become a forum lurker I started lurking in the shadows of the forum. After reading a lot of posts, I saw people asking many types of questions from simple to crazy complicated (at least to me). Two things I noticed were that every effort was made to find an answer (no matter the difficulty level of the question) and not one post was condescending or snarky. That’s quite rare on the ol’ interwebs, isn’t it? Hmmmm…maybe I’m in the right place. Oh boy… time to ask a question of my own One of the great things about learning GSAP is you’ll also pick up a lot of other JavaScript and/or jQuery along the way. I kept reading and practicing with some simple tweens, but now I had a question. Dare I post? I suppose, like many others, I feared looking like an idiot even though the forum members and moderators seemed quite nice and helpful. I do several dumb things every day so you’d think I’d be used to it by now. Oh well, here goes. My first question had to do with the indexOf() a Draggable snap array. Within 30 minutes, Diaco and Rodrigo had posted great answers and neither one called me stupid! Yay – how cool. I get hooked on GSAP and the forum About that same time, I decided our company should discontinue on-site video production and switch to studio only filming. I got tired of lugging loads of video gear in and out of buildings – it’s quite tiring and as I mentioned earlier – I’m old. This freed up some time and I decided to dedicate that time to learning GSAP and maybe, one day, even helping others. It wasn’t too long and I actually knew the answer to a forum question. I posted some information and wow – a little red indicator lit up on my control panel. Someone liked something I wrote. How fun – I’m hooked. Carl makes direct contact I continued to learn and experiment. I posted a few additional questions of my own, but I tried to answer more than I asked. If someone posted a question for which I had no answer, I tried to look it up in the docs and figure it out. Most of the time I was far too slow and Jack, Carl or one of the mods would already have the answer posted before I was done reading the question, but it was an interesting way to learn. I did sneak in a few good answers, which led to a private message from Carl. He thanked me for participating and helping in the forums. I thought it was pretty cool that a super smart guy like Professor Schooff would take the time to do that for little ol’ me. My decision to dedicate time to the platform and forum was reinforced. http://i.imgur.com/hdaB73Y.jpg Blake and I have a conversation I don’t recall if it was a back and forth in a forum post or a private message conversation, but Blake told me something that, of course is obvious, but it stuck with me and is important for all of us to remember. He mentioned that we all enter this learning process knowing nothing. If someone of Blake’s considerable skill level can be humble enough to remember first starting out in code, there may be hope for me after all. I guess if you think about it, there was a time when the simple concept of a variable was brand new to all of us. We’re not born with these abilities. They’re learned and we’re all at different points on the educational path. Never feel stupid for not knowing something. Moderator Promotion Throughout the last year, I’ve continued to learn and study both GSAP and JavaScript. Some of those books I abandoned in the past even make sense now. I’ve tried to be active in the GS community and answer as many forum questions as possible. If I’ve answered a question of yours, I hope you found it somewhat helpful. I’ve cranked out some fun CodePens and finally started a Twitter account to tweet them out. I am nowhere near an expert with GSAP or JavaScript, but I know so much more than I knew a year ago. Apparently I know enough to be entrusted with a forum promotion to Moderator status. I’m honored to be included on such an amazing team. 12 months down – what’s next? My agency duties are still numerous so I can’t dedicate full time to coding, but it remains something to which I’m committed and thoroughly enjoy. I started this 12-month GSAP journey just wanting the ability to write my own code rather than cutting and pasting the work of others. I’m confident I have achieved that, but I still have days when a simple piece of code just won’t coalesce in my brain and that can be frustrating. I guess we all have those days, right? I make several mistakes every day, but that’s o.k. too. I learn a lot more from my screw-ups than I ever do when it all goes right on the first try. I plan to keep learning and getting better and when I get stuck, I’ll be able to get an answer from this amazing community. I’ll continue to give back to the GS community by answering any questions that are within my abilities to do so. The super mods: Jonathan, Blake, Diaco and Rodrigo Thank you to my fellow moderators. You guys rock and have taught me so much. @Jonathan – if there is a browser bug, quirk or special fix that you are not aware of, I’ve yet to read about it. Your knowledge has helped me fix many pieces of code before they even became a problem. Plus, if I ever have a question of top/left vs. x/y, I know who I’ll ask. @Blake – if I could be half as good at coding as you, I’d be a very happy guy. Your work always teaches and inspires me. I don’t think you’re allowed to ever stop posting on the forum or we may all show up on your doorstep and ask questions. @Diaco – your code is always so concise. I deconstruct some of your pens and am astounded by how much you squeeze out of a few lines. If I made some of your pens from scratch, I’d have 20 variables, 5 loops, 12 tweens and 80 lines of code. You do the same with two variables and 4 lines of code. Amazing stuff. @Rodrigo – when searching the forum, I often land on one of your past posts and learn a lot. Your knowledge is vast and I wish you had more time to post around here. Your ninja skills are incredibly strong. Our superhero leaders @Carl – I’ve participated in several online forums ranging from graphic design to 3D to video production, but the GreenSock forum is the best and a big part of that is you. You not only provide great answers, but you do it in clever ways with just the right amount of humor thrown in here and there. The collection of videos you’ve made is invaluable and should be mandatory viewing for anyone interested in GSAP. I’ve seen you monitoring the forums at all hours of the day and even on weekends. When you get any sleep I’ll never know, but I thank you for your dedication and sharing your knowledge. @Jack – how you had the vision to start GreenSock and write the first version of the animation platform I can only imagine. I’m glad you did because GSAP is such an amazing collection of tools. The friendliness of the community is definitely following your lead. I don’t understand a lot of what you talk about sometimes, but I know enough to be amazed by your brilliance and talent. You call yourself just a guy who geeks out about code, but you’re more than that. You’re a smart and generous innovator who’s created a special brand and place on the web. I think I can safely speak for the community when I say we all appreciate the time and effort you put into helping us make beautiful and high-performance animations. Thank you sir. The epic conclusion. Well… maybe just a regular conclusion. If you didn’t read the whole post, I don’t blame you. It’s ridiculously long and I’m just some guy you don’t know so I’ll wrap it up with this bit of advice. Whether you’re a genius or feel like an idiot, it doesn’t matter. Try to learn one new thing each day and before you know it, a year will have passed and all those little bits will add up to new skills and abilities. If you’ve never posted on the forum, please jump in and participate. The more voices we have around here, the more we all benefit. If you need an answer, please don’t be afraid to ask a question. Believe me, I’m just some goofy guy in front of a computer. If I can learn this stuff, so can you. As I begin my second year in GreenSockLand, I’m looking forward to learning more, seeing everyone’s work and answering as many of your questions as I can. This is an amazing community and I encourage anyone reading this to set up an account and get involved. My best to all of my fellow GreenSockers. See you around the forums. Edit and Update (July 2020): I just made it to five years of hanging around the forum and you can read the continuation of my journey here. motiontricks.com Finally, without further ado, I introduce you to motiontricks.com - Craig (PointC) PS I made a little CodePen to commemorate my one-year forum anniversary. It’s how I felt before and after discovering the power of GSAP. Enjoy.

Hi Sahil, Thanks for this. The reason I've used functions is because the animations are part of more complex animations on the site, but I didn't want to include this other code because it was unrelated to this issue. I do also have to wrap the event listeners in an if statement because otherwise it throws an error on the other pages of the site (cannot tween a null target) that don't have that button. Although I have subsequently realised I can wrap both event listeners in the same if statement. Thanks again.

I feel like I'm a parrot at this stage just repeating thank you to some of you guys, but seriously, THANK YOU!!! You don't even know how much I appreciate the contributions. Things like this can take hours for a noob like me to figure out & being able to see stuff like this is totally invaluable. Gratz on mod status & Superhero as well btw.

My gut says this is a delay (in IE) with the handoff of the scroll event from the window to the overflowed container. I'm not entirely sure of that, but I would suspect it.

I was playing with the rotation solution as well. It seems that using a slight rotation helps in desktop Chrome and Firefox, but in Safari and mobile browsers still looks terrible. I found that text-rendering solves the problem!! If I use text-rendering: geometricPrecision, the animation runs smoothly in desktop Safari and mobile browsers (at least on iPhone). On mobile the text strokes seem a little more thicker, but the movement is fluid. I modified the codepen with the results that work in my tests. Thank you @GreenSock and @Jonathan !! You saved my day

This might be a job for three.js. https://threejs.org I think you could rotate a jpeg on a plane to achieve it to a certain degree but it would still be a flat image so it wouldn't have the same effect, the example you show looks like a 3d model. Beyond my pay grade on this forum though sounds like something for Blake or one of the other big guns.

It seems very overwhelming at first, but every little bit of knowledge you gain starts to add up and suddenly you find you're starting to know how to do stuff. Just keep practicing. I asked a similar question a while back which led to a worthwhile discussion.

I think you are that good, you've just got yourself tangled up. Reduce your slider to just a simple timeline animation, then we can help you solve your performance issues. Then you can abstract it into functions and whatever you need for added functionality, and probably at that point people here may be able to give advice on how to do that as well once we understand what you're doing.

Thanks for the further clarification. The use cases you explained are all valid and few people take the time to document and understand the complexities of what could happen when you let a user bang on a keyboard and / or swipe quickly. As we have discussed together the GSAP API is loaded with hooks that allow you to: tween to and from any portion of a complex animation (timeline with nested timelines) change the speed of that tween at any time fire callbacks when that tween is done assess the amount of time between where the playhead is and the section (or label) you want to tween to You've proven yourself very capable of knowing how those things work. For what you want to do it does sound like you need another layer of logic that tracks currentDirection and previous direction to further decide what to do with the timeScale. Unfortunately, i just don't have the time to go down the path of coming up with a bullet-proof solution that can account for all these different user interactions and performing all the custom logic and calculations necessary to get it all smooth. It could literally take hours. I definitely feel like you are close and on the right path.

Oooo nice idea!!! I'll see if I can implement that

I'll do the same for the k/m and that should work perfectly!

That's happening because you are declaring your menuOpen variable inside your menuToggle() function. Each time you click the menu button it sets the value to false. // please move this outside of your menuToggle() function let menuOpen = false; Happy tweening.

I thought every one should see this Carl, Great video (as always).

Thanks, Jonathan!

Below pictures when click first number 2 and next 3

Here is very basic demo of how you can rotate elements on key press using GSAP. Right now they just rotate 90 degrees at a time but you can develop them into more complex behavior, it can be done using GSAP.

I have to agree with the basic sentiment here your code seems awfully convoluted for what you are trying to achieve. I'm sure there is a logical construction here but it's pretty hard to trace all the interactions and figure it out without spending a lot of time studying it. I might suggest maybe strip out all the functions and constructors just try to make a simple timeline or set of tweens that achieves the animation you want successfully then figure out how to layer on the additional functionality. I've looked at this a couple of times but each time I decided as others have that I wasn't going to sink an hour or two of my time deconstructing what you've done before I can even get to helping out.

Thanks Craig. Ya I am trying spend less time on forum actually, can't decide yet if I should reduce down to an hour or take break for few weeks. But you should not take any breaks because my eyes are on leaderboard next two spots are target for sure. More people might try to catch up after my next post.

@Sahil - two things. 1. Congratulations on achieving 1,000 likes and Superhero status. You're a terrific addition to the Moderating team. Well done! 2. I'm gonna need you to slow down a bit. At this pace you're gonna catch up to me and I'm just too insecure to handle that.

@OSUblake I love these detailed replies from you. If you ever want to compile stuff like this into a guest blog post on greensock.com, we'd be happy to do that. Or a recurring "Blake's tip of the day" Nice work as usual.

Hi and welcome to the GreenSock forums. The way I'll do it is to create a timeline, add the elements to the DOM and after add the GSAP instances to the timeline and finally when all the elements are added play the timeline. Also you could make a function to create the animations and call that function after all the elements are added to the DOM. This is a very simple example, but hopefully is enough to get you started: http://codepen.io/rhernando/pen/BzAYao