PointC

Hi ZizhengTai Welcome to the forums. I'm not 100% sure what your needs are, but you can have a look at the Velocity Tracker. http://greensock.com/docs/#/HTML5/GSAP/Utils/VelocityTracker/ It's part of the ThrowPropsPlugin Javascript file which is a Club Member plugin, but you can certainly read more about it and see if it's what you might need. Hopefully that gives you a few ideas. Happy tweening and welcome aboard.

Yep - that did it. IE is so much fun. Great work on the fix Ninili.

Happy to help. I'm glad you got it working. It looks good.

That pen is quite clever. Unfortunately, I'm seeing the same thing in Edge as Jonathan mentioned about IE11. I'm also curious about svgOrigin fixing this issue since MS never wants to play nicely with the other kids. I'm debating who I should stare at angrily today about their handling of SVGs - MS or Adobe Illustrator.

Jonathan - congratulations - 2,000 likes! Anyone that nice and popular should be buying the pizza tonight.

HaHa! Love it Blake. I'm adding that to all future projects.

Hi sorciereus If you want to see a really nice 'from the center' text animation, you should take a look at this pen from Diaco. (one of our forum superheros) http://codepen.io/MAW/pen/OVqBBq/ That pen is using the SplitText plugin which is a Club Membership perk, but may be exactly what you need. Hopefully that helps a bit. Happy tweening.

Hi DanChadney I think part of the problem here is using a big circle as a mask for your arrow path. Getting the timing right on that can be a bit tricky. Since you're a Club member, you can use the drawSVG plugin to help with this. I did a little write-up about revealing dashed strokes with the drawSVG plugin and masks here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=57942 As part of that post, I made a demo which should help you quite a bit. I have a little airplane flying over a map revealing a dotted path as it moves. This is basically the same thing you're doing with the arrowhead and path. Here's the CodePen: http://codepen.io/PointC/full/zrQLvO/ Hopefully that will give you some ideas and a direction to go with your project. Happy tweening.

Hi lateek35 Welcome to the forums. Are you reversing after you play like this: var myTimeline = new TimelineMax( {paused:true, onComplete: function() {myTimeline.reverse()}}); myTimeline.play(); or did you mean that you just want to reverse the tween without playing it first. If you want to do that, you could try this: // reverse from two seconds myTimeline.reverse(2); // or you could set the timeline to reversed and then just a reverse() should work var myTimeline = new TimelineMax( {paused:true,reversed:true}); myTimeline.reverse(); Hopefully that helps a bit. For future questions or more detailed answers, a CodePen example will get you the best information. Please check out this link to learn more about creating one: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening and welcome aboard.

Hi omarel Welcome to the forums. Looks like it's just a typo. // you had var tl = new TimeLineLite(); //should be var tl = new TimelineLite(); // no capital L in 'line' Happy tweening and welcome aboard.

Hi marcamos Looks like you may have found your answer, but I think you are just looking for the toFixed() Method. http://www.w3schools.com/jsref/jsref_tofixed.asp console.log(tlMaster.totalProgress().toFixed(2)); console.log(tlMaster.totalTime().toFixed(2)); Happy tweening.

Hi benmandv Welcome to the forums. If I understood your desired outcome, you could do something like this: $(".face4").on('click', function(e){ TweenLite.to($(this), 1, {opacity: 0, onComplete:function(){tl.play()}}); }); tl = new TimelineMax({repeat:-1,paused:true}); tl.from(".box1", 2, {autoAlpha: 0}) tl.to($(".box1"), 1, {opacity: 0}) tl.from(".picture2", 2, {autoAlpha: 0}) tl.to($(".picture2"), 1, {opacity: 0}) tl.from(".picture3", 2, {autoAlpha: 0}) tl.to($(".picture3"), 1, {opacity: 0}) tl.from(".picture4", 2, {autoAlpha: 0}) tl.to($(".picture4"), 1, {opacity: 0}); You could also put the timeline into a function and call that function onComplete, but in this case I think setting it up this way will be better so all the .from() tweens will fire immediately and hide those picture elements for you. Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi ald603 What I usually do is add a testing label and move it around as I need to only view parts of a timeline during the design process. Something like this: tl = new TimelineMax({paused:true}); tl.to(element,1, {...}) .to(element,1, {...}) .add("testingLabel") .to(element ,1, {...}); tl.play("testingLabel") Here's a really simple CodePen showing it in action. http://codepen.io/PointC/pen/GoPNwP Hopefully that helps a bit. Happy tweening.

Hi benoit I think the easiest way is just using @font-face.You're probably loading that font for other parts of your project anyway so all the fonts of the SVG can match everything. If you make all the text into paths, you'll end up with a much bigger SVG. Leaving it as text will also give you the ability to make quick text changes without going back to your original AI file. Here's a fork of your pen with a simple toggle to change the font in your SVG: http://codepen.io/PointC/pen/aNNbVm/ Hopefully that helps a bit. Happy tweening.

Oh man - I haven't been smacked down in an answer battle with Carl in awhile. I'll be at the emergency room getting my injuries treated.

Hi Cothien Looks like you're missing the text plugin. You can add that with this: http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/TextPlugin.min.js You also had your div ID a little off. //just switch this: <div id="#test">yrdy</div> //to this <div id="test">yrdy</div> If you add that plugin and make that small switch to the div ID, it all works perfectly. Hopefully that helps. Happy tweening.

Hi Roms Welcome to the forums. You would have a couple choices for that. In your case, the staggers are the same for both tweens so you can add a second target to the tween. If the staggers were different you would use the position parameter to start both tweens at the same time. I've included both options: // since both staggers are the same, you can just add a second target to the tween like this tl.staggerFrom("#SKETCH1 g, #SKETCH2 g", 50,{opacity:0, ease:RoughEase.ease.config({ template:SteppedEase.config(20), strength:200, points:200, taper:"out", randomize:true, clamp:true})},0.1) // if the staggers were different you would use the position parameter to start both at time 0 tl.staggerFrom("#SKETCH1 g", 50,{opacity:0, ease:RoughEase.ease.config({ template:SteppedEase.config(20), strength:200, points:200, taper:"out", randomize:true, clamp:true})},0.1) tl.staggerFrom("#SKETCH2 g", 50,{opacity:0, ease:RoughEase.ease.config({ template:SteppedEase.config(20), strength:200, points:200, taper:"out", randomize:true, clamp:true})},0.1,0) // the 0 is the position parameter You can learn more about the position parameter here: http://greensock.com/position-parameter Hopefully that helps a bit. Happy tweening and welcome aboard.

You can add a 2 second pause by changing the last tween to this: tl.staggerTo([".line1",".line2",".line3"], 1, {autoAlpha:0}, 0.25,"+=2"); That will make that tween wait for 2 seconds before it starts. That's the position parameter and you can use it to easily add pauses or by making the value negative, it's a way to overlap tweens. Be sure to check out Carl's great video about the position parameter here: http://greensock.com/position-parameter Happy tweening.

Hi again the.bolmanator Your 'Z' animation is looking good. The 'auto' you're thinking of is autoAlpha. It's a combination of opacity and visibility. From the docs: autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.If you want to stagger the fade-outs you can do that with staggerTo(). Please try changing the last part of your timeline: //instead of this tl.to(".line1", 2, {opacity:0}) .to(".line2", 1.5, {opacity:0}) .to(".line3", 2, {opacity:0}) // see if this is more to your liking tl.staggerTo([".line1",".line2",".line3"], 1, {autoAlpha:0},.25); All the autoAlpha info is in the docs for the CSS PlugIn: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ Here's all the reading, some CodePens and a video about staggerTo(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/ Hopefully that helps a bit more. Happy tweening.

Hi C.Surieux I'm not 100% sure what your question is, but GreenSock is very useful for any type on animation you want to do. If I'm understanding your desired outcome, scaling menu height on hover or sliding menus on/off screen by clicking an image is no problem at all. If you're asking how you start your project, I'd say just put together all the basics of the page/site with some plain divs, placeholder text and the <ul> or however you're designing the menu. I wouldn't worry about final styling on anything until the animations are the way you want them. If you haven't visited these pages yet, I'd take a look at them to get an understanding of the basics: http://greensock.com/get-started-js http://greensock.com/jump-start-js If you have specific problems as you're setting up the animations, everyone around here will be happy to assist you. A CodePen will always get you the best answers. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps a little bit as you get started with your site. Happy tweening.

hmmm... I suppose we shouldn't overlook the obvious here - I don't see TweenMax being loaded in the code you posted. If you load Draggable without TweenMax, you will still get the draggable is not defined error. Could TweenMax be missing? Edit: you can also use TweenLite, but will need the CSSPlugin too.

That sure sounds like Draggable isn't loaded. //you have this <script src="gs/min/utils/"></script> // have you tried this ? <script src="gs/min/utils/Draggable.min.js"></script> Does that help?

Hi RhinoRudi Welcome to the forums. To rotate a certain number of times, you could set up a separate loop and rotate +=360 each time through, but for simple tweens, the easiest approach is to just multiply 360 * the number of rotations you want. You said you want your SVG to scale up from a small white dot into the rotating arcs. If it were me, I'd add a white circle to the SVG, group all elements together and rotate and scale the group. As the rotation starts, you could then fade out the white circle and fade in the rotating arcs. That's exactly what I did in my fork of your pen which you can see here: http://codepen.io/PointC/pen/BKyvop I'm not sure if this is exactly what you meant, but hopefully it helps a little bit. Happy tweening.

Hi i.am Welcome to the forums. It's actually five separate images. If you take a look at the reduced CodePen that Carl made, you'll see the code for the images: <div id="browserIcons"> <img src="//www.greensock.com/_img/browser-chrome-big.png" width="82" height="80" /> <img src="//www.greensock.com/_img/browser-safari-big.png" width="77" height="86" /> <img src="//www.greensock.com/_img/browser-ie-big.png" width="82" height="74" /> <img src="//www.greensock.com/_img/browser-firefox-big.png" width="82" height="83" /> <img src="//www.greensock.com/_img/browser-opera-big.png" width="69" height="75" /> </div> Happy tweening.

Hi the.bolmanator Welcome to the forums. Some of your lines look like they're animating in the wrong direction simply because of the way they were first created. It may look backwards to our human eyes, but the browser just assumes that's the way we want the direction to go. It all depends on where the first point of the line is placed. Don't worry though, if a line is 'backwards' you can easily animate it in reverse without having to recreate the SVG. The easiest way to do that is by animating the line in reverse with percentages. // this is forward .fromTo(element, .5, {drawSVG:"0% 0%"},{drawSVG:"0% 100%"}) // this is reverse .fromTo(element, .5, {drawSVG:"100% 100%"},{drawSVG:"0% 100%"}) I've forked your pen with those changes so you can see how it works. http://codepen.io/PointC/pen/YqPwPy/ As far as naming elements with classes or IDs, it's up to you. GreenSock will handle either just fine. What you can do though is make a group of lines and then animate them at the same time. In that case you wouldn't need to name the individual paths with any classes or IDs. Say you have a group called '#myLines' and there are 20 different paths that you want to draw. You could then animate them like this: .fromTo("#myLines path", 1, {drawSVG:"0% 0%"},{drawSVG:"0% 100%"}) Hopefully that helps a bit. Happy tweening.