PointC

HI xPalis Welcome to the forums. GreenSock could animate a navigation list like that - no problem. How long it would take you, I don't know. It would depend on how experienced you are with HTML, CSS and JavaScript as well as GSAP. It wouldn't be too complicated though. I'd suggest starting with a simple hover animation and then worry about the drop-downs. Just start with one button and go from there. If you get stuck, you can ask questions here and we'll be glad to help. When you do have a question, we need to see live code so we'd ask that you have a CodePen ready. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ To get started with GreenSock check out: http://codepen.io/collection/ifybJ/ http://greensock.com/get-started-js Happy tweening and welcome aboard.

Hi Jos Welcome to the forums. In addition to Carl’s great thoughts, I’ll throw my two cents worth out there for you. I came into the GSAP world from After Effects too so I can appreciate your desire for that type of workflow for DOM/SVG animation. You’re right though, there is a long way to go before that happens. My personal opinion is that might be a good thing for now. When something becomes so simple to create, a hive mind soon follows and a world of sameness is born. Take WordPress for example. Even though you can design amazing websites using WP, what do you see the majority of the time? The same few themes over and over. Ever seen an agency website with a giant hero image and large letters that say something like “We’re creative and different”? If Adobe invented a new tool tomorrow that was identical to the AE workflow but animated SVG and DOM elements, inevitably you’d see several templates made available. Pretty soon the top templates would be used on thousands of websites and we’d all see nearly the exact same animation everywhere. I don’t object to tools that can make our jobs easier, but rather the lack of creativity that will surely follow. That’s just my opinion though – YMMV. I’m with Carl on the clumsiness of using AI and exporting SVG. That really needs to be improved, but with Adobe and their lack of any real competition, who knows when we’ll see much change. That being said, I have gotten quite used to the ‘Export Selection’ feature when jumping between my code editor and AI during the SVG animation process. I do wish it was one click instead of three to grab said code, but it’s o.k. for now. morphSVG is path to path, but there are ways of automating it. If you name your start and end paths accordingly you can loop through an entire group of paths and make the morphs happen. This is a CodePen I made for another forum question, but it shows you the basics of what could be done. http://codepen.io/PointC/pen/LNLpgB/ o.k. – there’s my two cents worth for you. Best of luck to you. Happy tweening and welcome aboard.

Yep - understood. I just threw that out there so anyone else reading this would know not to expect anything to work correctly in IE11.

I can confirm what Jonathan is seeing. Same behavior in Win7 FF and Chrome for the CSS version. (tested Win7 and Win10) Win7 IE11: neither version works there. The CSS version shows one cube face and just a line for the other two. The GSAP version is showing only one face of one cube. Win10 Edge: The CSS version works, but the cubes are no longer close together. The GSAP version works , but the same animation behavior from FF and Chrome is present.

@Carl - that is slick. I was just sitting here thinking about how we could check the progress of the other two and apply it to the paused button and then you posted your solution. Very nice sir. Hi aleguitar77 Welcome to the forums. I didn't have a lot of time either so I just added a couple things to Carl's pulsating button solution and made three colored divs to represent your side content. Since we're getting the index of those buttons, we can use it to choose which side div comes into view on click and the other two animate out. It's not super refined, but it should help lead you to a more compact piece of code without repeating too many things. var btns = $(".btn") var side = $(".side") TweenMax.set(side[0],{left:0}) //give each button its own animation btns.each(function(index, element){ this.animation = TweenMax.from(this, 1, {opacity:0, scale:0, repeat:-1, yoyo:true}) this.onclick = function() { TweenMax.to(side,0.5,{left:-200}) TweenMax.to(side[index],0.5,{left:0}) } }) http://codepen.io/PointC/pen/EKrrML/ Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi icraig6666 I'm assuming this is an SVG? If so, you need to take a look at svgOrigin. That allows you to use any point in the global coordinate space of the SVG as the origin for those circles. Please take a look at this blog post for the best information. http://greensock.com/svg-tips Hopefully that helps a bit. Happy tweening.

Hi chrisk2020 The reason that happens is that the timeline isn't initially reversed so it won't play on the first click. On the first click the timeline actually reverses even though you don't see anything happen. Now that it's reversed, everything will work as you expected from click two onward. Don't worry though, it's an easy fix. Simply add reversed:true to your timeline and that will solve the problem for you: var menuTL = new TimelineMax({paused:true, reversed:true}); Happy tweening.

Interesting - a rare glimpse at a Carl question rather than the usual awesome superhero answer. I guess that's proof that he was once human like the rest of us.

Hi CraigS Cool name. In addition to the great advice and info from Carl and Dipscom, I'll throw my two cents worth out for you. You have an additional option by pausing the timeline in the function and playing it when you add it to the master timeline. So two lines of code would change in your pen: var tl_b = new TimelineLite({paused:true}); // pause it in the function .add(b_tweens().play()); //play when adding to the master timeline Happy tweening.

o.k. - looks like everyone is giving some great answers so I'll throw my 2 cents worth out here too. I was curious about all the timelines being created for this effect. You could actually make this whole thing happen with a couple staggers and a tween for the progress bar. var slideTime = 1.5, stayTime = 5, tl = new TimelineMax(); tl.staggerTo(".imgSlide", slideTime, {autoAlpha:1},stayTime+slideTime) .staggerTo(".imgSlide", slideTime, {autoAlpha:0},stayTime+slideTime,stayTime+slideTime); TweenMax.from(".progress", tl.duration(), {transformOrigin:"left", scaleX:0, ease:Linear.easeNone}) http://codepen.io/PointC/pen/pyqVBy/ Hopefully that helps a bit. Happy tweening.

Hi caemostajo Looks like you got your cube working. It's looking good. I added a repeat:-1 to your main timeline and I don't know if I'm just missing it, but I'm not seeing anything strange. What exactly do you mean by distortion? Is this in all browsers? Is it only on CodePen? Maybe others can spot the problem, but I for one could use a few more details please. Happy tweening.

Hi Rob In addition to Carl's great advice about setting the transformOrigin on those elements once, you can also define a default ease to help 'DRY up' your code. I think that gets missed sometimes, but when you're using the same ease over and over, it can be helpful to define a default. It looks like Linear is used on the majority of your tweens so you could add this code: TweenLite.defaultEase = Linear.easeNone; // you can still override it on individual tweens, but unless you specify otherwise, you'll get the default There's my 2 cents worth of advice. Happy tweening.

If you do happen to want to reverse paths in Illustrator here's a quick tip: 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')

Ha! I have to read more closely. I thought this was a debate between using Animate CC and using GreenSock. I saw the shape tween part of the question and got all excited about telling someone about morphSVG. In case it's not obvious - I love that plugin.

Hi pocketrockets I think the short answer to most of your questions is yes. GreenSock can animate just about anything. You can have multiple tweens and timelines to create almost anything you can imagine. It seems like your biggest question is about SVG shape tweens. You definitely need to have a look at the morphSVG plugin. It will blow your mind. http://greensock.com/morphSVG http://greensock.com/morphsvg-update Here's a CodePen collection with more examples of morph: http://codepen.io/collection/naMaNQ/ The GS getting started video: https://greensock.com/get-started-js The GreenSock Jump Start Collection on CodePen is very helpful too: http://codepen.io/collection/ifybJ/ Hopefully these links gives you a good start and understanding of what's possible. Happy tweening

Hi christi4n Welcome to the GreensSock forums. There would be a few ways to make this happen. My personal approach would be to set up a function with an autoAlpha tween that gets called onComplete and run on the first two passes through. On pass three, that tween isn't run and everything stops. Something like this could work for you: var i = 0, tl = new TimelineLite({onComplete:stayLit}); tl.set("#one, #two", {autoAlpha:1}) .to("#one", 1, {x:100,y:100}) .to("#two", 1, {x:100,y:100}); function stayLit() { i++; if(i<3) { TweenLite.to("#one, #two", 1, {autoAlpha:0, onComplete: function() {tl.restart()}}); } } Here's a quick CodePen with that solution for you: http://codepen.io/PointC/pen/MyZgao/ Hopefully that helps a bit. Happy tweening.

Hi kempo I'm not sure I completely understand your question, but my guess is that you need three stopping points in the animation so three divs can be shown at once. (except, as you said, at the beginning and end). The current problem is that you're using only one stopping point, pausing for 0.1 seconds and then animating the div off screen. My solution for you would be to use the aforementioned three stop positions and then stagger the divs. The code I used: var tl = new TimelineMax(), time = 0.9, //animation time to move between positions thePause = 0.2; // time to wait before the next move tl.staggerTo(".number", time, {left:200,top:50},time+thePause) .staggerTo(".number", time, {left:100, top:0}, time+thePause, time+thePause) .staggerTo(".number", time, {left:0, top:50}, time+thePause, (time+thePause)*2) .staggerTo(".number", time, {left:-100, top:100}, time+thePause, (time+thePause)*3); Here's the CodePen: http://codepen.io/PointC/pen/RaqOGJ/ Hopefully that helps a bit. Happy tweening.

Hi WA007 Welcome to the forums. I like that animation - very nice. To my knowledge, this isn't a limitation of the drawSVG plugin, but rather SVG itself. Right now, we get center aligned strokes on everything. Support for inner and outer alignment is coming, but there are some things that need to be figured out first. Here's a bit of info about that: https://www.w3.org/TR/svg-strokes/#SpecifyingStrokeAlignment As far as a workaround now, maybe two copies of the path with the stroked version slightly smaller than the filled version so it appears that the stroke is aligned inner? Others may jump in with additional ideas, but that's the first thing that comes to mind for me. Happy tweening and welcome aboard.

That's great Carl. I have nothing to add to the answer here other than my mind is still blown every time I use the morphSVG plugin. The morphing itself is amazing, but when you add in the ability to generate motion guide data for the BezierPlugin, it's an incredible addition to the GS plugin collection. So cool.

I didn't know that. That's quite handy. Several months ago (at Blake's recommendation) I installed Chrysto's GSAP sniffer. That's been a nice little extension too. For anyone not familiar with it - it's a Chrome extension that lights up green with the GS version number when you're on a site using GSAP. More often than not when I see something awesome, that little icon is glowing green so GS is being used quite a lot out there. If anyone wants to install the extension, here's the link: https://chrome.google.com/webstore/detail/gsap-sniffer/ohjmhldioopcachmenfnhlbgmkaohgbb

I thought it was a little strange that the minute hand never moved in your original pen, but now I see you're trying to match what's happening in that video. In that case, we can take the repeat off the timeline and add it to the first tween so that does a complete loop 3 times. Then we add a tween to the timeline that moves the hour hand 90 degrees into the 3 o'clock position like this: var tl = new TimelineMax(); tl.to(".hour", 1.04, {rotation: 360, ease:SteppedEase.config(12),repeat:2}) .to(".hour", 0.32, {rotation: "+=90", ease:SteppedEase.config(3)}); Here's a revised pen: http://codepen.io/PointC/pen/vGQKwd/ Happy tweening.

You didn't think of it because it's Saturday and you should be out having fun instead of working.

Hey jimeast Just open the file and there will be comments at the top with the version and date. Happy tweening.

Hi Arun I think you may be working too hard on this animation. You're showing and hiding the same SVG 12 times to get an animated clock hand. We can make your whole animation a lot easier by animating the hour and minute hands of the clock. If you want it to jump to each position on the clock, steppedEase is perfect for that kind of thing. Your code would then look like this: tl.to(".minute1", 3, {rotation: 360, ease:SteppedEase.config(12)}) //we then update the hour hand rotation on each repeat of the timeline More reading about steppedEase: http://greensock.com/docs/#/HTML5/GSAP/Easing/SteppedEase/ If you don't want the jump animation of the hour and minute hands, you can get a super smooth clock using a Linear ease. I've made a CodePen for you with both types of clocks. http://codepen.io/PointC/pen/grQOdK/ I think doing it this way will save you a lot of code and make changes much easier. Hopefully that helps a bit. Happy tweening.

ah... o.k. - you could set up a variable to get the window height and divide by 2 like: var h = window.innerHeight/2 and then animate the y position to that value. Here's a simple CodePen with that possibility: http://codepen.io/PointC/pen/yOQLMr/ Depending on what you're doing, you may have to update that variable on a window resize event. Does that help? Happy tweening.