PointC

Just to expand a bit on Carl's good information here: A quick tip for reversing path points in Adobe Illustrator. Open path: select the pen tool and click on the first point of your path and it will reverse the points. Closed path: right click the path and make it a compound path, choose menu-window-attributes and then use the Reverse Path Direction buttons. (Note: If the Path Direction buttons are not visible in the attributes panel, click the upper right menu of that panel and choose 'Show All')

Hi Lauren Johnson , You can use a fromTo() to reverse the direction. Just flip the start percentages like this: TweenMax.fromTo(yourElement, 1, {drawSVG:"100% 100%"}, {drawSVG:"0% 100% " }); TweenMax.fromTo(yourElement, 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100% " });

Hi ppdc , Have you taken a look at throwProps yet? Sounds like it might be what you're looking for. https://greensock.com/throwpropsplugin http://greensock.com/docs/#/HTML5/Plugins/ThrowPropsPlugin/ Hopefully this helps.

Haha! I love those comments. Man - I've been doing it all wrong. I was trying to complete my projects with the least amount of code, get paid and move on to the next one. Silly me - I have to get one of those achievement badges. I wonder if those people know that it's Cascading Style Sheet and not Cascading Animation Sheet?

Hey all, I was looking through the 2015 most loved pens on CodePen and thought I'd say congratulations to the following for their cool pens using GreenSock: Sarah Drasner Responsive Huggy Laser Panda Factory http://codepen.io/sdras/pen/waXKPw Chris Gannon All Devices in SVG http://codepen.io/chrisgannon/pen/WvJMXP GRAY GHOST SVG Low PolyLion: Animated Polygons http://codepen.io/grayghostvisuals/pen/RNLgJP There may be more using GSAP, but I haven't looked at all of them yet. These were just some that jumped out at me right away. Some of the CSS animations are kind of nice, but if I'm being honest, I just don't get the "I made this with pure CSS" obsession. I mean, am I missing something here? I look at their lengthy CSS along with all the vendor prefixes and think how easily some of that could be accomplished with just a few lines of code using GreenSock. It seems like a lot of unnecessary work to me. I've said it in another post and I'll say it again. I think there are two types of people in this world: 1. Those who think CSS animations are a good thing. 2. Those who have tried GreenSock. Happy New Year Jack, Carl, Blake, Jonathan, Diaco, Rodrigo and fellow members - I wish you all a productive and prosperous 2016.

Hi sharkey1983 , Yep - you can get stuck like that. You'll want to put each hover effect into its own timeline to prevent that problem. Like this: http://codepen.io/PointC/pen/EPWNQq

Hi coco , Happy New Year to you as well. You're centering all your divs so your travel distance on the x will be from the new origin which is the container center. You said you want to animate from the extreme right side of your container so you have a few ways to achieve that. You can manually calculate that number: container 400px - animated div 100px and divide by 2 for 150px. You can animate from/to left:100%, but this will be a problem because you've centered everything and now the div center point will go to 100% and the animated div will overlap the container. The most foolproof way would be to get the width of the container and the animated div and feed that data into the tweens. I've forked your pen to show you those three options. http://codepen.io/PointC/pen/XXpdmQ/ You can also save some CSS by have GSAP set your xPercent:-50 and yPercent:-50 rather than all those vendor prefixes for translate. You may have seen this GreenSock blog post, but if not, there is some good reading here about xPercent and yPercent: http://greensock.com/gsap-1-13-1 Hopefully this helps a bit.

@Blake - I had no idea CodePen did that. Huh - you learn something new every day.

You're welcome. I made the same mistake not too long ago and Blake showed me the problem with stuck animations. I haven't made that mistake again.

If this is for a nav bar with multiple buttons, you're going to have to set up a separate timeline for each button or you'll run into troubles by getting stuck animations when you hover over and out quickly. Here is a modified version of the same CodePen I showed you before, but this has three boxes all with independent timelines. http://codepen.io/PointC/pen/zroMjE?editors=101

It's a pre-New Years Eve miracle.

Is there a reason you're using all those jQuery finds? You can just change the code to this and it works fine: tlDesktopLinkHover = new TimelineMax({paused:true}); tlDesktopLinkHover.fromTo("line", .25, {drawSVG:"0% 0%"},{drawSVG:"0% 100%", ease:Linear.easeNone}) .fromTo("line", .25, {drawSVG:"0% 100%"},{drawSVG:"100% 100%", ease:Linear.easeNone}) .fromTo("line", .25, {drawSVG:"0% 0%"},{drawSVG:"0% 100%", ease:Linear.easeNone}) .to("rect",.25, {fill:"#000000"});

Hi again , There must be a recursive loop in your code because the error I'm seeing is: Uncaught RangeError: Maximum call stack size exceeded

Hi syntaxReflex , Welcome to the forums. You can chain those sets() as part of a Timeline, but I don't think you can do it the way you have it there. I'm sure I'll be corrected if I'm wrong. This will work though: tl = new TimelineMax(); tl.set("#box", {x:52, y:57}).set("#shadow", {x:127, y:52, autoAlpha:0}); You can also set multiple targets if you're setting the same properties by putting the targets into an array like this: TweenLite.set([target1,target2], {autoAlpha:0}); Part 2 of your question - labels are your friend. For a complete understanding of labels and the position parameter, check out Carl's video: http://greensock.com/position-parameter Hopefully this helps a bit. Happy tweening.

I was going to recommend Carl's book and Petr's training as well, but Carl is too fast and beat me to it. In addition to those things, I think a lot of people forget about the blog right here on the GreenSock site. Lots of great videos and quick tips can be found there. I'd also recommend following a few people on CodePen: Diaco writes some really tight code: http://codepen.io/MAW/ Blake usually approaches things from a different perspective: http://codepen.io/osublake/ The GreenSock pens are always great: http://codepen.io/GreenSock/ The beauty of CodePens is you can fork them and dissect for a better understanding. Finally, when all else fails, you can read the documentation. Actually, the documentation here on the site is so well written I find most of my answers in there. Just make it a habit to read up on one part of TweenMax or a plugin each and every day and then put your new knowledge into practice with a CodePen. Before you know it, you'll start understanding new approaches to everything. Good luck and happy tweening.

Hi ThePixelPixie , Welcome to the forums - you're gonna love GreenSock. The console is showing that your CodePen is just missing the jQuery files to make the magic happen. Click the little gear icon on the JS panel and you can add jQuery via the CodePen interface. You can also add TweeMax in there as well instead of in your HTML. You'd need: //cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js That should get you working. Happy tweening.

That's funny as I was following along on this thread and thinking the very same thing. User attention spans are so short anymore they seem like hummingbirds amped up on Mt. Dew. We actually don't build anything with auto advance on anything anymore. I put buttons and draggers out there so my users can feel like they're in control. With the proliferation of smart devices and apps, most studies you'll find will say that people aren't going to wait for any autoplay on anything - they want to push a button or drag something immediately or they get bored really quickly. I'm just finishing a new website right now with a split screen slider almost exactly like the one being worked on here, but I just placed all the panels off stage with absolute positioning and the user can call any of 4 sections so they can go directly to the new panel without sitting through any wait time, but still get the opposite sliding motion. It's pretty easy if you aren't building it as one giant stack trying to slide through all the panels to get to one on the other end. My two cents worth: go whoop on your client a bit. I'm kidding of course, but it is our job as designers and developers to guide our clients to better decisions. Ultimately though, they do get the final say and I understand those situations all too well. Good luck.

Hey jstafford , You really wouldn't need any dashes or extra length borders to make this happen with drawSVG. It's just a matter of using a fromTo() a couple times to animate the lines. I made a quick CodePen for you: http://codepen.io/PointC/pen/VeKgNX You'll have to adapt it for your use, but it should get you started. Happy tweening.

Hi kathryn.crawford , Jack already gave you the answer, but I was testing your pen locally and can confirm that was the problem. I was just too slow to answer first. Just change the link and you'll be all set: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> PS I was expecting Bill Murray and instead I saw Nicolas Cage. Are you switching celebrities for your CodePens?

You're welcome - happy to help. Yep - I couldn't agree more - this is a great community of really smart people. I've been helped many times around here. I think you'll be all right now, but you know where the forum is should you run into any more trouble. Happy morphing.

Hello again, I made a quick fork of your pen and made one of the paths into a morph to better illustrate things and help get you started. http://codepen.io/PointC/pen/QyEzvr/ I also noticed that you had both logos set to visibility:hidden on your pen. You'd only want to hide the ending path at the beginning. Hopefully this will get you started. Happy morphing.

Hi Patryk D&D , It looks like you're trying to go from a group of paths to a group of paths in one morph. The plugin is path to path rather than group to group. You'd want to pick a path in the first logo that would morph to a corresponding path in the second logo and then each of those would become their own individual morph. Take a look at Jack's demo here: http://codepen.io/GreenSock/pen/WQjRXE?editors=101 Take a look at the first part of the JS - the first morphs - the M to the cape, H to the torso and so on. There are a lot of smaller morphs happening rather than one large one. You've got a couple of logos there with a lot of individual paths so this will be a bit of work to get them all ready to go, but it can be done. Ideally, you'd want to set it up in AI with individual IDs so you don't have to rename them later. Just think about which path in logo 1 could go to which path logo 2 and name them accordingly. Hopefully this makes sense and helps a bit. Happy morphing.

I don't think anyone would question the accuracy of a Diaco answer. I only asked some questions in case the approach was flexible. I was just envisioning some sort of buttons that may solve the problem: Click button1 and the target is set to target1 Click button2 and the target is set to target2 etc.. Then, call the tween in a function and tween the target. In that case, you could have the one tween to manage. Of course, that is creating a new tween so probably not what the OP wanted. I understand the way the question was asked, that the answer is no. I'm just looking for solutions here, not limitations.

Hi armen , I wasn't 100% sure what you were asking. Are you thinking about some event, like a button click, that would change the target? or would some other condition exist that would cause the target to change? or did you mean adding multiple targets to the same tween? You can add multiple targets as an array in the tween: TweenLite.to([object1,object2], 2, {autoAlpha:1}) A few more specifics would be helpful. Happy tweening.

Very nice Tahir. I couldn't agree more on the various ways to solve a problem - GSAP is so flexible. As I was discussing with Blake last week - the members of this forum also use those tools in a variety of ways and it's so fun and educational to see how different people approach a problem. It's funny that you used invalidate() as I was just doing some reading on that yesterday because I've never used it before.