PointC

Ha! Made you look! Have a great weekend everybody.

I took a look at this too. The original pen is smooth for me in IE11, Edge, & Firefox, but choppy in Chrome. Carl's fork with an image instead of a background-image is perfectly smooth for me in all browsers.

Hi phillip_vale If you set your timeline to reversed, it should work for you. var menu = new TimelineMax({reversed:true}) Hopefully that helps a bit. Happy tweening.

Hey Pedro I just got my copy yesterday and went through the first few chapters last night. It's nice having the Trigonometry chapters in there for a refresher as it's been some time since I've used a lot of it. I flipped through the later chapters as well and it all looks like a lot of fun. Tons of awesome information. I'm glad Blake recommended it, but now I know his secret. He may not actually be an AI from the Matrix, but just a human that's really good at math.

Very nice Carl. You've got the rocket here and the 'planes with parachutes' solution on another thread. If somebody asks about ships or tanks, you'll have a whole military collection happening here.

Hi thirdknife Welcome to the forums. Yep - Shaun is putting you on the right track with easing. In addition to the Ease Visualizer he linked to, you can take a look at these resources I've just made a new GreenSock Easing Playground you can try: http://codepen.io/PointC/full/RaVEpP/ Blake has a Cubic-Bezier Easing CodePen: http://codepen.io/osublake/pen/OyPGEo/ This is the forum post that goes with it: http://greensock.com/forums/topic/7952-javascript-custom-ease/?p=51357 In addition to easing you can gain a lot of control by animating the timescale too. You could start extremely slow and then really ramp it up as the rocket gains altitude. Check out the docs about timeScale(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/timeScale/ Here's a great GreenSock CodePen showing timeScale() animation in action: http://codepen.io/GreenSock/pen/LuIJj/ Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi Sophia Welcome to the forums. Just to add my 2 cents worth to Blake's great answer. In your example, it sounds like you're expecting x to always be at 100 when the timeline progress is at 50%. You have to remember that the only time that would be true would be with a Linear.easeNone applied to the tween. Easing will make a big difference in the x position when the timeline progress is at 50%. Happy tweening.

Diaco makes a cooler solution again - very nice. @2474 I was only giving you the drawSVG info. Diaco has provided a more complete solution so please just follow his pen - that's how it should really be done. Happy tweening.

Hi 2474 Welcome to the forums. It looks like you're trying to tween from the end 2% of the path to the beginning 2%. The drawSVG plugin describes the end state - not the values between. From the docs: Remember, the drawSVG value doesn't describe the values between which you want to animate - it describes the end state to which you're animating (or the beginning if you're using a from() tween). So TweenLite.to("#path", 1, {drawSVG:"20% 80%"}) animates it from wherever the stroke is currently to a state where the stroke exists between the 20% and 80% positions along the path. It does NOT animate it from 20% to 80% over the course of the tween. This is a GOOD thing because it gives you much more flexibility. You're not limited to starting out at a single point along the path and animating in one direction only. You control the whole segment (starting and ending positions). So you could even animate a dash from one end of the path to the other, never changing size, like TweenLite.fromTo("#path", 1, {drawSVG:"0 5%"}, {drawSVG:"95% 100%"}); // you currently have your raindrop variable like this var raindrop = { start: "100% 98%", end: "98% 0", } // if you switch it to this, I think you'll get the effect you're looking for var raindrop = { start: "98% 100%", end: "0% 2%", } // you could also do something like this to start from nothing and grow the size as it falls var raindrop = { start: "100% 100%", end: "0% 10%", } Hopefully that helps a bit. Happy tweening.

Great links Blake. I'm really interested in learning more in this area so I'm gonna get started with your book recommendation.

yep - I see that now. Looks like the 0 duration tween is causing the problem. You can just switch it to this: tl = new TimelineMax(); tl.staggerTo("#dmdAnimation div", 0.01, {autoAlpha:1},0.5) .staggerTo("#dmdAnimation div", 0.01, {autoAlpha:0},0.5,0.5); You could even increase that duration to something like 0.2 for a really slight fade in/out effect if you like. Does that work better?

@Carl - thanks much. The GreenSock re-tweet was picked up pretty quickly by Val and Sarah and from there my Twitter alerts were active all day. It was a lot of fun. @Blake - yep I give you credit. Your comment on my house tour pen prompted me to finally set up a Twitter account and get into this social game. @Jonathan - thank you kindly Sir. @Rodrigo - please come by more often. Showing up under the cover of darkness is fine too. @all of you forum mods and ninjas. Thanks for creating a helpful, friendly community. I've learned so much around here since I got active on the forum last summer. You all inspire me to keep on learning and creating.

You just gotta love tweening timeScale() - what a great technique. exportRoot() took me a while to find, but I've used that a few times as well. Great stuff.

That looks pretty good to me. Nice work.

Hi gerjogreenwald Welcome. Yep - I agree with Jonathan and Carl - a CodePen would really help answer your questions. That being said, in addition to Carl's great advice and link about compound paths you do have another option. If you've got a lot of paths in each group and want to morph each one of them you can loop through and make that happen. As long as you sequentially number your start and end paths, you can do something like this: for (i=0; i<5; i++) { TweenMax.to("#start"+i, 1, { morphSVG:"#end"+i, ease:Power2.easeInOut}); } Here's a simple CodePen to show you how that could work: http://codepen.io/PointC/pen/LNLpgB Hopefully that helps a bit. Happy morphing and welcome aboard.

Hi donleche Welcome to the forums. I'd probably just speed up the timing a bit and change the eases. Something like this maybe: // push down shortly $img[0].style.visibility = 'hidden'; tl.to($clone, 0.1, { scale: 0.97, ease: Power1.easeIn }); // scale up fullscreen tl.to($clone, 1.5, { x: 0, y: 0, delay: 0.05, scale: 1, width: '100%', height: '100%', ease: Power4.easeOut }); Hopefully that helps a bit. Happy tweening and welcome aboard.

How cool. A rare visit and kind words from the legendary forum ninja. Thank you Rodrigo.

Hey everyone, Warning: self-promotion to follow, but it may help other forum members so here we go. As you already know, easing is an important part of creating a great animation. If you’re at all like me, you like to experiment with a variety of eases and get a feel for how they work in your project. With that in mind, I’ve created a new GreenSock Easing Playground. Yes – we have the Ease Visualizer which is great and I highly recommend it. I wanted to create something a bit different though. My new CodePen offers position, scale and rotation options with 15 ease types in each section. It’s all one big SVG with 45 animations and fully ready to zoom with the viewBox controls. I’ve added a variety of icon choices and color schemes as well. Hopefully you get some use out of it or at least a reminder of how some of the eases look. Special thanks to @greensock, @sarah_edo (Sarah Drasner), @vlh (Val Head) and @snorklTV (Carl Schooff) for the tweets/retweets this morning. It helped push my pen to the top of CodePen for a while which was pretty cool.

Hi Arun Welcome to the forums. I think I'd go with a simple stagger on/off here. You can go from 60+ lines of code down to 3. tl = new TimelineMax(); tl.staggerTo("#dmdAnimation div", 0, {autoAlpha:1},0.5) .staggerTo("#dmdAnimation div", 0, {autoAlpha:0},0.5,0.5); Here's a fork of your pen with that solution. http://codepen.io/PointC/pen/mPmpoW/ You have a few icons that show together so you'll have to rearrange your divs a bit, but this would be my approach for you. Hopefully that helps a bit. Happy tweening and welcome aboard.

Hey again. Here's a super simple SVG mask demo that you can use as a reference. http://codepen.io/PointC/pen/KzmXYK

Hi Acmafali In additional to Carl's great advice, you may also want to consider a 6 mask approach. 3 masks for the circles and 3 for the arrow segments. I only suggest this as a possibility because you mentioned having the circle(s) fill from left to right. A single mask may make the circles fill in a different way than you desire. You would then add the animation for all 6 masks to the timeline for sequencing. I think a Linear ease will be best or you'll see some odd speed changes. You can always adjust the timescale of the entire timeline for a smooth start and finish. When making masks, just remember that anything white will show everything below it and anything black will hide everything. In your case, make the mask(s) white and reveal them with the drawSVG plugin and a position change (for the circle masks if you go that direction with this) The syntax for masks is this: <mask id="mask1"> <path id="pathToBeAnimated" .... /> </mask> <g id="toBeRevealed" mask="url(#mask1)"> <path ..... /> </g> Hopefully that helps a bit. Happy masking.

o.k. - looks like the competition is on. I figured I needed to up my game so I just finished installing some new hardware upgrades to my computer and a motivational wall to my office.

That new leader-board is a pretty cool new addition to the forums. Will Jonathan be giving the rest of us any sort of head start each week? He's just too good and I think he lives here - doesn't he?

Hi chriswyl If you let GreenSock set() that rotation, everything works correctly. TweenMax.set("#mytext", {rotation:30}) Hopefully that helps a bit. Happy dragging.

Hi theller5567 I'll throw my 2 cents worth out there for you. You could also accomplish this without an additional function. Creating a timeline and adding a second stagger that starts a second later can make this pretty simple. var tl = new TimelineMax(); tl.staggerTo(".img", 1, {rotation:360, y:100, opacity: 1}, 0.5) .staggerTo(".img", 1, {autoAlpha: 0}, 0.5, 1); http://codepen.io/PointC/pen/oxZdaL Hopefully that gives you another idea and helps a bit. Happy tweening.