PointC

Thanks Carl. I actually made something similar to your demo when I first started working on an answer for this post, but switched back to the multi-path route for better control.

Nicely done Jonathan! You're working too hard on a Friday night - take some time off - have some pizza or something.

Hi axy2016 , Welcome to the forums. The MorphSVG plugin works path to path - so to make a square morph into three separate circles, you'd have to make your three circles into a single path and I don't think you're going to get the quality you'd like by doing it that way. To get the best results with the most control, I'd say you want to stay with a path to path process. You can make your three initial shapes look like a solid square and then morph to three circles. I made a pen to show you how that could work. http://codepen.io/PointC/pen/yeRXRx I used 2 small squares and a rectangle to create the illusion of one large square and then grouped those three elements so I could control them as if they were just one element. Those three pieces then morph into the circles. The only problem I ran into was that I could see the edges of the three elements making up the 'fake' square even though the positioning was perfect. I solved this by adding a stroke to those paths that matched the background color. I'm not sure what your project is, but hopefully this helps or gives you some ideas. Happy tweening.

Hi SoL2Squiz , Looks like you're having fun getting started with GSAP. The easiest way to accomplish a starting opacity of 0 would be to set() your opacity and visibility with autoAlpha:0 and tween to an autoAlpha:1. Your pen could then be written like this: TweenMax.set(".logo",{autoAlpha:0}); TweenMax.to(".logo", 3, { x: 500, scale: .8, ease: Elastic.easeOut, autoAlpha:1, }); autoAlpha is a combination of visibility and opacity. I personally prefer autoAlpha over opacity because when autoAlpha is set to 0, the visibility is automatically set to hidden for you. That's quite nice as it prevents accidental clicking of elements that have an opacity of 0. Here's some more reading about autoAlpha http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ The set() method is a way for you to set the properties of your target. It's a convenient way to get your elements to the desired starting state before you tween them. More reading about set(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/ Hopefully that helps a bit. Welcome aboard and happy tweening.

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 pauloco , Welcome to the forums. This is really more of a ScrollMagic rather than a GreenSock question, but I can certainly answer it for you. Just add reverse:false to your scene parameters like this: new ScrollMagic.Scene({ triggerElement: '#redBox', reverse:false }) The animation will then play when you scroll down, but stay put when you scroll up again. Here's some more reading about it: http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.Scene.html#constructor Happy tweening.

Just a final thought here. You can group a single element. I made a quick fork of my pen to show you that diagonal movement you were expecting. Notice if I rotate the group with a single child element, the coordinate system rotates, but when I rotate the rectangle by itself, the coordinate system does not change. http://codepen.io/PointC/pen/gPdEOP/ All the best - happy tweening.

Hi again , I don't think anyone meant to be defensive of GreenSock and for my part - I didn't mean to give you info that you already knew. I genuinely thought you were having trouble with the relative positioning. Regarding your current question about rotating the coordinate system, I think I can give you a little bit of info. I completely understand why you'd think rotating a child element would rotate the coordinate system for itself, but it's actually quite good that it doesn't. If you rotated a child element 90 degrees and the coordinate system changed with it, x would now be acting like y and vice versa. Likewise, rotating 180 degrees would cause positive and negative to change. It could get confusing very quickly. In the article Jonathan sent you to, you'll notice she's rotating a parent group of the child to rotate the coordinate system. I made a quick pen to show how you can change the coordinate systems easily by grouping elements. You'll notice in the first SVG, I rotate a group around the child rectangle and it then follows that new coordinate system as you'd expect. http://codepen.io/PointC/pen/zrJyJo Again - I didn't mean to present any information that you already knew. Hopefully future readers that didn't know these things will still learn something from the post anyway. All the best - happy tweening.

o.k. - I think I see what you're saying/asking. It sounds like you're trying to animate an element to a specific set of coordinates relative to the parent SVG ? You're right - it's extremely important to know that all SVG paths, rectangles, circles etc... operate in their own little coordinate world. That means all moves are relative to their own starting position. You're not moving to any specific coordinates of the parent SVG, but rather a specified coordinate/distance from the element's starting point. So all three of these tweens will produce the same results and have nothing to do with the coordinates of the parent SVG: .to(element, 1, {x:100}) .to(element, 1, {x:"+=100"}) .fromTo(element, 1, {x:0},{x:100}) Some may then think to return back the starting point, you'd move x:-100, but you actually move to x:0 (or x:"-=100" would work as well). I made a super simple CodePen to show this: http://codepen.io/PointC/pen/RrYgjo Relative positioning isn't really a quirk of SVGs, but rather an amazing feature because it all scales. For example - say you start with a 1,000 pixel wide SVG with a 100 x 100 rectangle child element in the left corner. To move that to the right side, you'd animate to x:900. Now, assume our parent SVG is scaled to 0.5. The whole thing is now 500px wide, but do we have to change our tween to x:450? Nope - not at all. Everything scales perfectly. You can scale my little demo down and all the boxes move perfectly at any size. It also sounds like you go back and forth between AI and GreenSock so you can change your elements ending position by eye in Illustrator? As you've found out, when you enter the ending coordinates into the tween, it's not going to work like you'd expect. If you do want to eyeball positioning in AI and then feed that info into GreenSock tweens, you have to find the starting and ending coordinates, do a little math to find the difference and then feed the difference into the the tween - not the ending coordinates. So, if you've got an element at master SVG coordinates of {x:80 , y:200} and want to to move it to {x:300, y:300}, your tween would be {x:220, y:100}. Hopefully that makes sense. o.k. - I may have rambled here, but hopefully it helps a little bit.

Hi Acccent , I don't know if you'll find any one specific workflow that works the same for all designers/developers and all projects. You mentioned that you aren't facing any particular problem at the moment, but also said you had some head-scratching on your last project. If you had specific things that caused that head scratching, I'd bet you could get a lot of tips from everyone here to avoid those problems on the next project. The only specific tip I'd offer that works well for me is always design your SVGs at the largest size you'll be needing. I find scaling down causes far fewer issues than scaling up. I'd also recommend keeping an eye on Chris Gannon. He does some fantastic work and posts some helpful videos. Here's one about his alien/UFO animation that has some good information: http://blog.codepen.io/2015/08/03/watch-chris-gannons-svg-animation-workflow/ I'm sure others will jump in with their thoughts, tips and tricks. Happy tweening.

Blake, I think I'm gonna need some proof that you're human. I'm starting to suspect that you're in the Matrix.

Hi devindavid , Welcome to the forums. I'm not sure I followed your question correctly, but I think you're asking how to feed the result of the roadSpeed function into the duration of your tween? That function is currently returning a negative number so adding it 'as is' would result in a negative duration tween, but you can change it to the following: TweenMax.to(".roadLine", -(roadSpeed()), {x:"600px", ease:Power0.easeInOut, repeat:-1, delay:1 }); Hopefully that helps a bit. Happy tweening.

Hi qualityCode , Welcome to the forums. Have you tried animating the viewBox instead of scaling? I made a pen a while back that did just that. IMHO it might just make your life a lot easier. Take a look - maybe it can help you a bit: http://codepen.io/PointC/pen/XbqBmM Happy tweening.

Hi chabari , Welcome to the forums. There were just two little things to change on your CodePen. The first is the z-index for your #first section wasn't set so the #land div (z-index:10) was sitting on top of it. Just setting the z-index higher will solve that part. The second was the from() tween. You'd be better off tweening the autoAlpha there instead of setting the visibility and opacity in your CSS. Tween from 0 to 1 rather than 1 to 0. I've forked your pen with those changes and it works just fine. http://codepen.io/PointC/pen/jWpqww Hopefully that helps a bit. Happy tweening. PS This thread from today has information that should help as well - explaining from() tweens, opacity, autoAlpha and immediateRender. http://greensock.com/forums/topic/13654-autoalpha/

Hi twimbee , Welcome to the forums. You can just set up a master timeline to call the other nested timelines created in your functions like this: function fooOne(){ var tl = new TimelineMax(); tl .add( minimise() ) .add( maximise() ) } I made a quick little CodePen to show you how it would work. http://codepen.io/PointC/pen/obyJEM For a better understanding, you should also take a look at a much more complex example. The GreenSock banner on CodePen is great study material. http://codepen.io/GreenSock/pen/lEiAv/ The GS home page animation also makes use of nested timelines and is very educational. http://codepen.io/GreenSock/pen/yhEmn/ Hopefully this helps a bit. Happy tweening.

Hi orendacc , Welcome to the forums. You should have a look at the pathDataToBezier() method of the MorphSVGPlugin. It converts path data into points that you can use as a motion guide. So not only can you make something follow an arc, but pretty much any type of motion you'd like. Here's some more reading about it: http://greensock.com/morphsvg-update Here's a CodePen to see it in action: http://codepen.io/GreenSock/pen/550e4b59c59355eef809658fbce77ee9 Hopefully that gets you started. Happy tweening.

Hi axy2016 , You just need to switch to a timeline rather than trying to chain those tweens like you have it there. If you switch your code to this: tl = new TimelineMax(); tl.to(pink, 2, {morphSVG:"#red", fill:"#ED1C24"}, "+=1") .to(pink, 2, {morphSVG:"#black", fill:"#000000"}, "+=1"); it all works perfectly. PS Here is a little pen I was goofing with recently that shows a loop of multiple morphs in the middle of other tweens. http://codepen.io/PointC/pen/yejGvb

You know, it's threads like these that show what a unique and cool place the GreenSock forum really is. There was another poster a couple days ago that thought Carl was just trying to sell a Club membership instead of showing a way to solve the problem without a plugin. In that case a Club plugin would have solved his problem quickly and easily and it truly was the best solution. I've been around here for awhile and I've never seen any hard sell of a membership. Instead, I see posts like this one. Jonathan has presented a lot of great information and Carl, as usual, has gone above and beyond by creating a CodePen for the OP and providing more solid information. Club members and non-members get the same great service and attention. I think that needs recognizing once in awhile. Truly cool you guys. My measly two cents worth on the problems Ajar is seeing: everything above is great information and I'd definitely second what Carl is saying about IE and the non specified size of an SVG. IE is major pain with SVGs. One thing that has helped me a few times is the Padding Hack. Here's a great article about it and more about making SVGs responsive. http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ Happy tweening.

Blake - I'm glad you asked that as I was just re-reading this thread and thinking the same thing, but thought I must be missing something. I was really hoping to see a CodePen and find out what se7en is trying to accomplish.

Jonathan - I had a feeling you'd be along with one of your awesome in-depth answers. Great stuff.

If you switch this: tl = new TimelineMax(); tl.to($("#open_top_bar"), 1, {morphSVG:$("#close_top_bar")}, "+=1") tl.to($("#open_middle_bar"), 1, {autoAlpha: 0}, "+=1") tl.to($("#open_bottom_bar"), 1, {morphSVG:$("#close_bottom_bar")}, "+=1") to this: tl = new TimelineMax(); tl.to("#open_top_bar", 1, {morphSVG:"#close_top_bar"},0) tl.to("#open_middle_bar", 1, {autoAlpha: 0}, 0) tl.to("#open_bottom_bar", 1, {morphSVG:"#close_bottom_bar"}, 0); everything is working just fine.

Hi mango-nyc , If I understand you correctly, you'd like to remove those elements completely after the animation? If so, you could do something like this: tl = new TimelineMax({onComplete:theEnd}); tl.to ("#leftBlock", 1.25, {x:2200, transformOrigin:"50% bottom", ease:Power1.easeNone}) .to ("#rightBlock", 1.75, {x:-2200, ease:Power1.easeNone},"-=.5"); function theEnd() { $("#leftBlock, #rightBlock").remove(); } Here's some more reading about taking elements out of the DOM. https://api.jquery.com/remove/ Hopefully this helps a bit.

If you inspect the elements, you'll see that your back link won't work because #submenuCategory1Col2 is sitting on top of #submenuCategory1Col1. You've only moved the child divs of the 2nd column. The 2nd column itself is blocking the 1st column from the click. Add these at line #51 of your JS and the problem will show itself to you. TweenMax.set("#submenuCategory1Col2",{background:"yellow"}); TweenMax.set("#submenuCategory1Col1",{background:"green"});

If I could throw my 2 cents worth out here... I always find discussions like these quite puzzling. It seems like a simple math problem to me. What is your hourly rate? How much time will you save by purchasing a membership? You're talking about $50 for the needed plugin here and I find it difficult to believe that it wouldn't save you $50 worth of time on this project and then you have it available for your next job too. This whole thread started with the words "I've been struggling for two days" so right there you know this plugin would have been a huge time saver so why spend even more precious time trying not to spend a few dollars? On top of that, Carl has built a nice demo to get you started. Beyond that, you know you can always jump back here to the forum and get advice from mods and members absolutely free. Seems like a pretty easy decision to me.

Excellent - I'll be ordering one. After that, I'll need a GS sweatshirt, coffee mug, water bottle, mouse pad, and Jack and Carl bobbleheads.