Leaderboard

Ya @Acccent is right about padding being animated and causing the problem. But I was wondering why that should happen? It is happening because you are using box-sizing as border-box so changing padding changes height and width of your box element. You can stop using border-box. Or you can set the parent element's height to auto !important.

This happens because you are changing the padding, so GSAP animates the element to its new padding based on the size of the inner box before it started animating. If you remove the padding rules from the CSS, you'll see that the container box animates adequately. If you'd still like to keep the padding, I guess you could specify the height either with CSS or JS, maybe by calculating it on the fly?

Hi Voo, .delay() can be a bit misleading – when you call blue.play().delay(0.5), you set the initial delay for blue to 0.5s. When you call it again later on, you set that initial delay to 0.5s again, which doesn't do anything because it was already set to that value. The reason it doesn't wait again is because .delay() is only for the initial delay, that is the time before the animation plays for the first time. It is not part of the animation itself (which is why it isn't affected by the animation's timeScale). If you reverse the animation and then play it again, it will go to its starting position, but that initial delay is already 'gone'. If you want a tween that always starts after 0.5s, an easy way would be to use the position parameter like this: blue.to('.blue', 1, {x: '500%', ease: Power4.easeIn}, 0.5); If you want to add a waiting period at the end of an animation, you can add an empty tween like this: red.to({}, 0.5, {}); (or add a label) That way, when you reverse the animation, it will first "tween" nothing for 0.5s, then proceed with the tween that comes before that. (PS: this is a very minor thing, but maybe not everyone is a guy here )

If you want to restrict the filter to the SourceGraphic, you can throw in an extra composite with the source before the multiply. You can do that on a group too. Hopefully that helps. Happy tweening.

Actually I have never played with these filters but what I managed to figure out so far is they are like pluggables. You take one or two filters and plug them into another, it is really interesting topic but I will have to dive deep into docs to figure out everything. So far I managed to do the following demo but it shows dark edges on circle. Maybe @OSUblake and @PointC can suggest something, but I guess using clip will resolve this as well.

This is my workflow as well. Although I do the same thing with Affinity Designer to avoid the Adobe tax. It works perfectly. Grouped layers in Designer get ID'd correctly in the SVG output. Some things don't output well in either Illustrator or Designer though when it comes to SVG output. Layer effects are dicey. Some fill types are quirky. Transform Matrix does odd things. Etc. The trick is to use just simple lines and fills without using more advanced vector features/effects.

I didn't have time to dig through all your code (a reduced test case would be super helpful), but I'll mention a few things: Beware that clearProps removes the inline styles, so if you've got a CSS rule somewhere that'd affect the element, that'd take effect once inline styles are cleared. It's pretty rare that you'd need clearProps at all - is there a reason you're not just setting the scale to the value you need, either in a set() or a fromTo()? In other words, if your goal is to go from a scale of 1.2 to 0.8 and then do that again, it'd probably be better to simply do a fromTo() and specifically define those values (or do a repeat on the tween). You mentioned clearProps:"scale(1.2)" but that's not valid - clearProps is just a comma-delimited list of the inline styles you want cleared, so it'd be clearProps:"transform" or clearProps:"scale" in this case. But again, I highly doubt you need clearProps at all. If you still need some help, it'd be best to have a reduced test case with only the absolute minimal amount of code to reproduce the issue.

Hi @Irfanm Yes - you can certainly create an infinite repeat with a delay. The easiest way would be setting yoyo:true and repeat:-1. Something like this: TweenMax.to("#pathA", 1, {morphSVG: "#pathB", repeat:-1, repeatDelay:3, yoyo:true}); If you want to set a certain number of repeats and then call a function, you'd write it like this: TweenMax.to("#pathA", 1, {morphSVG: "#pathB", repeat:3, repeatDelay:3, yoyo:true, onComplete:onComplete}); function onComplete() { console.log("done"); } More info in the docs: https://greensock.com/docs/TweenMax https://greensock.com/docs/TimelineMax Hopefully that helps. Happy tweening.

The thread you linked has all demos that only run on page load, most probably OP wanted it that way. If you want your clock to run like normal clock then it should track time every few milliseconds. So in your code you just need to update time inside your showTime function, all four variables datetime, h, m, s need to be updated so they will have new time. The clock hands are being positioned by using flexbox and yPercent as -50, that will center them at bottom end. Transform origin is set to '50% 100%' which is at the bottom of the div so it will rotate clockwise from bottom. The rotation value is post-fixed by '_cw' which makes sure that clock will only run clockwise.

I know, right? For their SVG export and save process, Adobe has chosen the Russian nesting doll method.

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.

I was going to post something else, but I'll do that later. Do you have a demo of what you were working on? I'm curious as to what you were doing. And you really don't have to worry about ending a path as that happens automatically whenever you begin a new path. When to start a new path will depend on what you're doing. For stuff that is logically separate, like particles, they probably shouldn't share a path so they can move independently of each other. If you're making something like a grid, then using the same path shouldn't be problem as the grid could be considered a single unit.

yes, thanks, I set it to !important and it works, but there would be more collisions in future. I disagree with the @Acccent statements

Dear Sahil, Thank you for explaining, you're code was just what i was looking for. Thank you! -Hakiko

That's very useful, Sahil, Thank you. I have a further question that, perhaps, you may be able to answer. How would I render, statically, the turbulence (as it appears on the shape above)--without distorting the edges? Is this possible without the use of clip-path? (I'm assuming that I'm close to the 'best practice' to render a texture on an svg). I forked this pen whose background is more-or-less the texture I would like to produce. --However, I notice that turbulence is applied to the background--hence, rectangular in shape--So, while it renders an effective pattern, no shapes/filters "layers" need modification. Would I need to use clip-path in order to say, render a triangle or other polygon, or a circle (as above)? TL;DR: All I'm looking for is to render a bit of noise on an svg that is NOT a rectangle. I am looking to maintain the integrity of the shape's edges while "distorting" the surface to give the element some texture. https://codepen.io/beau_dev/pen/pLvLNJ Many, Many thanks to you & cheers! -Beau P.S. From the stuff I've read, I'm beginning to think that clipping is the only way I'm going to be able to do this.

Thank you very much! This helped me figure out exactly what I needed to do!

Thank you so much! I'm not sure why there were multiple IDs. Alright; thank you!

Hello @harp, I do not quite understand if this is your problem regarding scaling, but I chose to make an example using .fromTo that can help you.

Hi @Irfanm Welcome to the forum and thanks for being a Club GreenSock member. The main problem is you have multiple paths with an ID of 'step0'. I'm not sure which one you wanted to target (IDs should be unique), but here's a fork of your pen with everything working correctly. I deleted everything from your SVG that wasn't in use to simplify things a bit. You could also use a timeline instead of those tweens with delays if you like. When creating a demo, we'd ask that you please not post Club plugin code in the JS panel. You don't need any GSAP related source scripts in there. You can simply add the necessary scripts via the little gear icon in the JS panel. Here's a CodePen with all the CodePen safe Club plugins for use in your demos. Happy tweening.

Great job, Craig! Very helpful. This is pretty much my approach and find it better than most. I still find it a bit ridiculous to have to go through so many "file > export as" steps for each revision. It would be much better if there was an option to either have: a window that shows live SVG code as you make changes a single button "show svg code" maybe someday i'll have the patience to submit a request to the illustrator people

actually i didn't change the webpack.config.js file.This is how the resolve object looks(there are two resolve objects) resolve: { extensions: ['.ts', '.js', '.json'], modules: [path.resolve('node_modules')] },

Like I said above, you actually can't position A by rotating it at the start, because then when you want to rotate it again you'll need to change its transform origin and that will mess its positioning. So you have to position it using translation. Basically, think of it this way: you have 2 sets of 4 balls. B/I/G/E that can just be rotated at the start, with their transform origin still at -100% 0%. And A/J/H/F, that first need to be translated up, and can then be rotated with a transform origin of -100% 100%. let la = S('.LA')[0], lf = S('.LF')[0], lh = S('.LH')[0], lJ = S('.LJ')[0]; TweenLite.set([la, lf, lh, lj], {y: -100, transformOrigin: '-100% 100%'}); TweenLite.set(lf, {rotation: 90}); TweenLite.set(lh, {rotation: 180}); TweenLite.set(lj, {rotation: 270}); (also note how I'm saving the references first, then using those in the tweens – better than using Sizzle or jQuery or whatever to find an element every time.) After you've done that there's still a problem. (I'm only looking at the makeTLnew function here, right?) You're changing the transform origins of the elements, which is the right thing to do, but you're not changing them to the right values: // LB, LE, LI and LG were not translated at the start, so we want them to rotate around the point at the top and to the left TweenMax.set([lb, le, li, lg], {transformOrigin: '-100% 0%'}); // We want LA, LF, LH and LJ to rotate around the point that is at the bottom, to the left (because we translated them at the start) TweenMax.set([la, lf, lh, lj], {transformOrigin: '-100% 100%'}); When you've done that, the "1" rotation should work. You need to apply the same logic to all the rotations. And then you'll need to find a way to save some information about the balls to make sure you rotate the right ones and in the right direction every time, not just just the first time.

You have typo, it should be TimelineMax. Also, are you just including TimelineMax? You will need TweenLite and CSSPlugin to make it work. You can include TweenMax instead that includes both CSSPlugin and TimelineMax and few other common plugins.

You need to use feDisplacementMap and pass two sources to it using in and in2, which would be result of turbulence and the source graphic.

Here is the part 2, I should have just maybe made it into week long series rather than trying to finish it in 2 parts. After about 45 minutes in both parts, I could only finish the basic effect. Not sure if I should make part 3. I might just switch to making smaller videos rather than something longer like this but will see how it goes. As for making videos, it gets overwhelming at times but I am enjoying it and think it will only benefit me.

Hello buddy! It should work! As per @Sahil said... you can use TweenMax alone with CSSRulePlugin....

Here is how you can do it. I have left some comments in the code but most of the math is self explanatory, you can learn these kind of animations using this book: http://lamberta.github.io/html5-animation For better performance you can use opaque canvas.

I've shown how to use external SVG numerous times using ajax. There's nothing magical about it. It just an http request, like everything else loaded on your page. With jQuery http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview And without http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview The other day @MindGamer brought a great idea about using SVG as JavaScript string variables. That way you don't even have to make an ajax call. Using string variables for content is very common approach in libraries like Angular. It's fast and the JavaScript file will be cached. Check this out. Where's the SVG coming from? http://codepen.io/osublake/pen/f9ad0aafc2fa585e60e4b9642ac716b3 Right here... https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/svg-string.js