Leaderboard

There is this big, big tree. Uuuuh, that's high. I always wanted to climb it. Can I? First touch. The peeling is thick, and itchy, but warm and inspiring confidence. I lay my arms around it, starting to rub up. Hmm? Aaha– Okay– That's how– Nice! It's working. That's all I wanted. No need to leave this robust stem. But wait. What's that? There's a branch! And another? I'm curious– The more I climb this tree –body pressed tight onto it– the fear of these little branches slowly fades. I finally, gently step on one. Sometimes they crackle, but never break! My tight grip loosens up; Cheeks stop scratching as I lift my head– Oh boy! So many branches. And look how high I am! Wait what? There's a bird! And anoter one? I start talking to the birds. More birds. I felt like a king just walking the branches. The birds taught me how to jump on them! And soon I'll fly. Soon. I have never experienced anything similar. Such an easy entrance, .. well .. once you accept the word Tween as a thingy describing an animation One can work with GSAP without knowing anything more but .to, .set, and .from. Easy to learn, hard to master. You decide how far you go. When you are part of this special breed of developers/designers, be careful! Because GSAP will suck you in, won't let loose and change the way you see and work the web. That's what I love most. Thank you guys for that. 4 hour research until 1:30am in my freetime, and still burning so much inside that I had to write this. That's how awesome GSAP is.

Hello @erayner_45092! On looking at the given example, I'd say you will have to work out the ratio between the height of the screen and the height of the SVG. I have noticed that in the BrightMedia website, they are using <canvas> for the line animation, they have it fixed in position and probably just tween the duration of a pre-determined animation as you scroll down. It sits in the center of the screen because the <canvas> element is fixed in place. You can do the same thing with your SVG, you fix the encompassing <svg> into position and tween the .progress() of a timeline as you scroll down the site. Of course, <canvas> will have a better performance than <svg> if you add enough lines. Hope this helps.

MWAAHAHAHAAH! You have been converted! You are now one of US! No escape.

You get the award for the most unique, poetic post in the forums, possibly ever I really appreciate the kind words and enthusiasm! Sometimes we struggle with how to best explain to the uninitiated why they should at least try GSAP. Lists of features can be overwhelming or dull. Comparing it to other technologies can come across as critical or arrogant. Hearing stories like yours makes me want to tap into that experience and unearth what REALLY matters...what's compelling? Now that you've gotten past that initial hurdle with positive results, what would you say to that pre-GSAP version of you? What do you see now that you wish you saw before? @PointC told a really nice story of his experience as well. He has come such a long way and inspires a lot of people today (along with Blake, Jonathan, Rodrigo, Dipscom, Diaco, Carl, and others). Lately I've realized that it's more about a feeling...a feeling of confidence that whatever the client throws at you, whatever you're tasked with, you can rest assured that there's probably a way with GSAP and it won't be too arduous. At least I hope that's true. Anyway, thanks again for taking the time to share the encouragement.

Glad you guys found some solutions. Impressive as usual, Blake. As for adding that kind of option to SplitText, it's not a trivial thing otherwise I'd totally do it. I think you're the only person who has requested this, though I can see why it'd be handy in certain situations. If enough people request it, we'll certainly consider adding it down the road but for now we're focused on a few other features that will likely serve a lot more people (trying to be strategic about where we focus our limited resources). Cheers!

Hello @PointC Definitely an aaaaha moment. That makes perfectly sense. Completely forgot about that one, but will definitely remember to think about that from now on. Thanks again for the enlightenment! All the best!

Thanks @PointC and @GreenSock, I didn't realise I could access the duration of a Timeline like that. Looks like WiggleBounce is ideal for what I was looking to do.

Yeah, if you haven't checked out CustomBounce, I think it'll save you a LOT of time and hassle with an effect like this. https://greensock.com/wiggle-bounce If you don't want to get a Club GreenSock membership, you could still build your own CustomEase and draw the bounce yourself. It'd still probably be easier than stringing together all those tweens (which is fine, of course - nothing "wrong" with it).

Hi @alan0buchanan One option would be to move the x position tween off the timeline into its own tween and set its duration to the duration of the bounce timeline. If it were me though, I'd be looking at using CustomBounce for this. It would be easier and you'd be able to add some squash and stretch. https://greensock.com/?sub-product=js-custombounce Hopefully that helps. Happy tweening.

That’s okay @kreativzirkel, I don’t think you copied off my test. I think many of our learning journeys have similar paths so your poetry is like my story. We all start off being intimidated and/or feeling stupid for asking something that is probably simple to an experienced GreenSocker. When you first start the learning process you simply don’t know what you don’t know so understanding how GSAP can make your work easier and more fun can certainly be tricky. It also makes asking questions somewhat more difficult because you’re not even sure how to phrase your query. Asking that first question in the forum is the biggest hurdle in my opinion. Once you get past that initial fear, you’ll be hooked. That’s why I think the GS forum is such a unique place. It’s most definitely a great place to get answers, but it’s also a fun place to hang out and participate in the conversation. Where else can you find an online community of talented people without the usual interweb snarkiness? The forum is one of GreenSock’s strongest promotional features IMHO. I can honestly say had I not started participating around here I’d still be stuck copying and pasting code that I barely understood. Helping others has been the best learning experience I could have imagined. I sometimes look at the number of Guests that are active on the forum and wonder if/when they’ll join the conversation. I lurked for a long time, but that moment to jump in came along for me and it will happen for everyone else when it feels right for them. Of course, you now get CustomEase just for registering in the forum. You don’t even have muster the courage to ask your first question. I hope everyone reading this knows that we’re here to help and we’d love to have you as part of the GreenSock community. Happy tweening. PS I completely agree with @Dipscom. You are now one of us. There is no escape.

I would tell my pre-GSAP, .. wait.. I will, when you guys implement timetraveling in GSAP 3000! I will tell him: You stupid prick! Stop wasting your time on weighing transitions over @keyframes, you already know this will never satisfy you, no matter how many tutorials of awesome css-animation systems you read; auto-facebook-block everyone that gives you Edge Animate code; just ignore that it feels like tween is word you need to study to understand and watch this 90 second video. But seriously, "marketing wise" you guys definitely went in the right direction with the recent page updates. What I personally would focus the most on: 1. Bust a 10 second live code example in everyones faces. Spreading the part of the 90second video, that just codes and plays with the timeline. The good readability and therefore maintainability of TimelineMax is the most impressive and therefore biggest reason to jump into the pool. I see why the 90sec vid has to do "all browsers!" "no bugs!" "awesome sh**!"; but honestly: when I watch it I still think in the back of my head "yeah okay, everybody promises that, come to the point, lady" – You integrate super impressive examples everywhere in the page. They intimidated me. They absolutely don't feel like "this is super easy", and well, these examples just aren't easy. They are relatively easy compared to other methods; still not easy, though. But it is possible to get there. The code of these animations is not a claustrophobic, complicated, sensitive, dark glowing web, that is super hard to unravel. It is more of a brick-by-brick situation. Not much backtracking/back and forth, mostly straight forward, linear, step by step; *out of expressions*. My suggestion would be to feature simplified code making these examples and tie them closer together; the page should more create a feeling of "Hoh? That's it? I could do this;" for newcomers. After all, the way I see it, you don't sell results, you sell a uniquely powerful, intuitive and maintainable way of getting there. 2. Second biggest strength of GSAP is this very forum, the community. I don't know how you guys did it, but getting an answer to a question, quite often a very urgent one, happens insanely quick on this platform. No matter how "dumb" or "trivial" the question seems, I have not experienced anything but very good will to help get the result I want. No bending of the intent to fit into a solution; no trolling or poison like "dude, again the force3D question? Use the search, for Jake's sake!" – There's a vibe of calm acceptance of different skill-levels and a each-one-teach-one mentality here. On top of all that the answers are compact AND understandable, 90% on-dead-center solutions. Pure quality. I don't know how to communicate this to the outside world, but I'm assured if people would know that this is way different from an "usual forum experience"; that you get encouraged to ask your question and you will get hugged, padded and helped; that you can learn very quickly by just browsing and reading the threads; that you can teach even Blake a thing; than we have people streaming in like Web-Woodstock. "Join Web-Woodstock, get high on awesome sh**!" PS: "Uninitiated", I like 8) – How about Unkindled? Or Muggle!

Hi @Semblance Just a small correction and this will work fine for you. In your each() loop you are grabbing all the figures and h3s, but you only want the ones within the target <li>. You can make that happen by changing lines 12 & 13 to: .to(($(this).find('figure')), 0.5, {scale:1.1, ease:Back.easeOut.config(3)}, 0) .to(($(this).find('h3')), 0.5, {y:20, scale:1.1, ease:Back.easeOut.config(3)}, '-=0.5'); Here's a fork of your pen: Hopefully that helps. Happy tweening.

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.

The animation module for Angular 1 was a game changer, and has since been copied by other libraries like Vue and React. For Angular 2, they decided to take a different approach, and create their animation engine. At one point in time, they were looking at using GSAP, but went with using a declarative syntax with the Web Animations API instead. The end result has been pretty craptastic. Nobody uses it, not even the Angular Material team. So how do you animate state changes like this without using their engine? transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) I didn't know if that was possible using GSAP, but @apploud shared a script with me the other day that can do something similar, allowing you to create animations like this. "fadeIn => fadeOut": () => TweenLite.to(this.element.nativeElement, 0.5, { autoAlpha: 0 }), "fadeOut => fadeIn": () => TweenLite.to(this.element.nativeElement, 0.5, { autoAlpha: 1 }) It's just a very basic implementation right now, and needs some work, but it could be really helpful for Angular users who want to use GSAP. I don't have time to work on it, but it would be awesome if somebody else could work on it, and maybe make it into an NPM module. Like I said, it's pretty basic right now, so it's not going to work with wildcard or void states like this. // enter transition "void => *" : () => TweenLite.from(this.element.nativeElement, 1, { autoAlpha: 0 }) // leave transition "* => void" : () => TweenLite.to(this.element.nativeElement, 0, { autoAlpha: 0 }) You can see how it works in this demo. https://www.webpackbin.com/bins/-KlC3WIhC60G0V7Ck5CN

Good feedback, @kreativzirkel. It sounds like the speed/compatibility claims don't matter much to folks like you and it's more about the developer ergonomics of the API. @Carl is actually working on a video that I'll make that point really well (in my opinion). It's not a 30-second teaser or anything, but it takes some time to illustrate concepts that could be game-changers for a lot of people workflow-wise. Keep an eye out for that (likely several weeks out at least, realistically). I couldn't agree more that one of the biggest things GSAP has going for it is the community around here. I'm so proud of the caliber of people that hang around here and dish out advice. @kreativzirkel I wouldn't be surprised if we fast-forward 6 months, you'll have a similar story to Craig's (@PointC) and you'll be dishing out advice to others daily. It's a fun challenge.

No joke, just read Craigs story for the first time. Funny how we describe so many things almost identically. Funny how I now feel stupid now effectively repeating what he already said. :[ I didn't crib, Mommy!

Here's an idea: Basically I'm doing the work up-front instead of on every onUpdate. You simply feed in an animation (could be a tween or timeline) and a function that checks whatever condition you want and returns true or false. It'll iterate the progress to find the spot at which that condition changes to true and spit back the playhead time. You can then use that however you want - in this case, it's to place your other animation(s) into the timeline. // this function is the key - it iterates over the timeline at large (20%) increments until the condition is true, then reverses by half the amount (10%) until it flips back, then half that amount forward, etc. for 20 direction-changes (you can change that number by feeding in a precision parameter). This is typically better than just iterating by a certain small amount because it affords greater precision in less loops. function calculateTimeAtCondition(animation, condition, suppressCallbacks, precision) { precision = precision || 20; suppressCallbacks = (suppressCallbacks !== false); var startingProgress = animation.progress(), inc = 0.2, progress = inc, curState = false; animation.progress(1).progress(progress, suppressCallbacks); //jump to the end and back to the start to ensure that all nested tweens are rendered/instantiated while (--precision > -1) { while (curState === condition() && progress > 0 && progress < 1) { progress += inc; animation.progress(progress, suppressCallbacks); } curState = !curState; inc *= -0.5; } animation.progress(startingProgress, suppressCallbacks); return animation.duration() * progress; } I also cached a few variables to make the condition-checking faster but that's relatively minor. The other problem with the way you were doing it previously is that it'd keep firing those new animations once the condition is true (on every onUpdate) which probably isn't what you wanted. This new way prevents that and would be much faster at runtime for the actual animation(s). Does that answer your question?

Hi @artche95 Welcome to the forum. I'm not quite sure what you're asking here, but it looks like you may want to build a drop down menu? If that's the case, @Rodrigo has a nice demo showing how you could achieve that. Hopefully that gets you closer to your goal. Happy tweening.

Try this article from Sara Soueidan to learn more about the SVG viewBox and coordinate system. https://sarasoueidan.com/blog/svg-coordinate-systems/ Happy tweening.

Hi @rgfx Instead of querySelector which only returns the first element matching the query, please try querySelectorAll which returns a NodeList. var test = document.querySelectorAll('.text'); Hopefully that helps. Happy tweening.

I also use dummy tweens to make timers... // Calls your callback every 2 seconds TweenMax.to({}, 2, { repeat: -1, onRepeat: myCallback });

Probably not. Those are 2 separate actions, so a plugin isn't going to be of much use.

You can usually find whitespace in between words.

At last! In the end it was a logic issue. To be honest, I lost track of the order of things and probably had planned it poorly. It seems to work now and doesn't break too horribly. If you manage to break it, let me know. Luckily I did not have to change the underlying idea so, it builds on top of all we have worked in this thread. It is not the most elegant solution, there will be better ones, specially if we combine a different element structure but that would be beyond this challenge. Another day, who knows? There are couple of things that have been moved but, apart from the clicking logic, all is the same as in previous stages. Have a look, see if it makes sense and let me know if you have any questions. Hope you had fun in this journey. Happy Tweening! Pedro

Lerp it! This is what drives most animations and graphics, linear interpolation. function lerp(start, end, progress) { return start + (end - start) * progress; } All it does is find a value in a range based on a percent. If you're moving from 0 to 300 and you're 50% the way through, how far along are you? var x = 300 * 0.5; // 150 What if you started at 50 instead of 0? var x = 50 + (300 - 50) * 0.5; // 175 You've probably written a lerp function without even knowing it. Random returns a value between 0-1, so it's just like a percent. function random(min, max) { return min + (max - min) * Math.random(); } However, lerp isn't too exciting on it's own. After all, it's the same thing as a linear ease. But we can make it exciting. Lerp a target value with the same progress to create a natural looking ease out animation. You can do the same thing for your scrolling animation. You just need some value to chase after. Really simple example using the modifiers plugin. Watch as the pink circle chases after the blue circle. And for more ideas on how you can use lerp, check out my ModfiersPlugin collection. Almost every demo uses it in one way or another. http://codepen.io/collection/AWxOyk/

I do that all the time? So Yes.

I usually use Animate CC because it's a faster workflow for me; especially, like Davi said, when it comes to fonts, masks, and QA; and also when it comes to positioning things. The ability to import custom HTML templates has also expedited my workflow. In some situations, if I need to use SVG or 3D transforms, or if I can use Google Fonts, or if it's such a simple banner that it doesn't make sense to load the whole CreateJS library, I do hand code with HTML/CSS/GSAP. I probably use Animate 85% of the time though.