PointC

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.

Hi Raistlin celli has posted some good links so you can learn the basics of the DrawSVG plugin. I looked at the link you posted and I see some segments of the animated stroke go behind the man in the photo while others animate in front of him. If you're asking how to accomplish that effect, the short answer is masking part of the path. For a more detailed explanation of the process, I just added a new post to the SVG Gotchas topic which has a write-up about how to approach that type of animation. You can read it here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=58229 Here's a direct link to the CodePen I made for that post which shows an animated stroke going around the subject of a photo. http://codepen.io/PointC/full/ZWEqdK/ Hopefully that helps a bit. Happy tweening.

Have you ever wanted to bring the 3RD dimension into your project with the DrawSVG plugin? Using a series of masks we can simulate an SVG stroked path navigating around or through a subject in a photo. This path can be solid, dashed, dotted or whatever you like. My new demo uses some things from my post above about animating dashed strokes with masks, but goes a bit further. Get wrapped up in the swirling 3D lines of the DrawSVG plugin: http://codepen.io/PointC/full/ZWEqdK/ If you want to use this technique, here’s a bit of info: Start with the photo you’re using at the maximum size you think you’ll need. (Note: You can responsively swap to smaller versions as long as you maintain the same aspect ratio.) Create a new AI file the exact same size as you biggest photo. Import the photo for use as the background while designing your SVG. (Be sure to also create a plain rectangle that’s the same size as the SVG so everything lines up at export time) Draw the stroke that will be wrapping around/through the subject to your liking. Duplicate that path and make it #fff – this copy will be the mask. Unlike my earlier post where I mentioned making the mask path wider than the original, this time it needs to be the exact width as the underlying path. If it’s wider, you’ll inadvertently be showing extra parts of the original path at perpendicular intersections. (Note: making a duplicate path for a mask reveal is only necessary if you want to use dashed strokes. If you’re using solid strokes only, you can simply animate them directly with the DrawSVG plugin.) At all points where the stroke should be going behind the subject, draw a polygon over the subject with a color of #000. All these polys will be a part of your SVG mask along with the stroke mask that will animate. The polygons will be static but will scale perfectly. For my demo, I used three separate strokes to create a simple tube effect as it draws and you can see a bit of the perpendicular intersection reveal problem if you watch for it. It’s not too bad, but something to keep in mind. As mentioned above, if you’re using a solid stroke and don’t need dashes, no mask path will be necessary and this isn’t going to be an issue for you. You would just need your subject masking polygons. Finally, I put the image into a containing div and let the image drive the size of it. Place your SVG into the div with absolute positioning and a width of 100% so it can scale along with the image and containing div. All that’s left after that is to control the mask reveal and animate any changes in the stroke that you like. Note: the demo uses the DrawSVG plugin which is a Club GreenSock perk at the Simply Green membership level. I highly recommend it. Happy tweening everyone.

Yep - that is definitely one of my favorite GreenSock features. It's one of those things that might take a new user a bit to discover, but once you find it, you'll wonder how you went without it. Easing an individual tween is certainly nice, but animating an entire timeline from/to a buttery smooth* start or finish with one line of code - now that's powerful and so cool. *Disclosure: 'buttery smooth' phrase is completely stolen from Jonathan.

Hi kleeman If you'd like to smoothly accelerate or decelerate a timeline you can do that with timeScale() Something like this: TweenMax.fromTo(yourTimeline,1,{timeScale:1},{timeScale:0}); Here's a nice GreenSock pen that shows it in action: http://codepen.io/GreenSock/pen/LuIJj/ Hopefully that helps a bit. Happy tweening.

Ha! I was just thinking the same thing. I completely missed that.

Hi marcamos Nice demo. I think you can get what you need by putting the yoyo on the tween rather than the timeline. var tl = new TimelineMax(); tl.staggerFromTo('.box', 0.5, {scale:1}, {scale:1.1, repeat:-1, yoyo:true}, 0.1); Here's a fork of your pen with that change. http://codepen.io/PointC/pen/wGwvRp Hopefully that helps a bit. Happy tweening.

Hi skyeinc9@gmail.com Welcome to the forums. Diaco is one of our forum superheroes and he has an excellent CodePen showing text on a path along with changing the text as it tweens: http://codepen.io/MAW/pen/VLbYBL/ I just adapted his code for use with your SVG and made a quick CodePen for you: http://codepen.io/PointC/pen/yemdqR/ I added a second tween to the timeline for your fontSize animation. .to("#theText", 5, {fontSize:50},0); You can certainly adjust that to your liking. Hopefully that helps a bit. For future questions, if you'd create a CodePen, that would get you the best answers. Here's a link on how to do that: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening and welcome aboard.

Jack - when do you sleep? Somebody reports a bug and you have it fixed and updated within hours. What a world this would be if all software companies responded to their users like you do. (I'm looking at you Adobe) The cape is so appropriate. Fantastic stuff.

You're welcome. I'm happy to help. Happy tweening.

Hi doggard Welcome to the forums. Thank you very much for providing the CodePen. I think we can make your code quite a bit shorter using a loop. Then you wouldn't need to use the timeScale() and delayedCalls to get your pauses between numbers. Here's what I used: var ones = $('#ones'), tens = $('#tens'), childTl = new TimelineMax({repeat:-1}); TweenMax.set(ones, {yPercent:-90}) TweenMax.set(tens, {yPercent:-90}) for (i=0; i<10; i++) { childTl.to(tens, .20, {yPercent:"+=9", ease:Linear.easeNone},"+=1") // the "+=1" is the pause - adjust to your liking } Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/BjXYdN/ Hopefully that helps a little bit. Happy tweening and welcome aboard.

Hi urtopal Hopefully Jack or Carl will come by with the 'why' part of this answer as I'm curious myself. I did notice the following: // this works as expected myTimeline.to(".element", 2, {skewY:50, skewX:50}) myTimeline.to(".element", 2, {skewY:"-=50", skewX:"-=50"}); // this does not myTimeline.to(".element", 2, {skewY:50, skewX:50}) myTimeline.to(".element", 2, {skewY:0, skewX:0); I'm not sure why.

Yeah - putting the ID on the SVG or group rather than the path can trip you up. I did that quite a few times when I first started using the DrawSVG plugin. I still accidentally do it once in awhile, but now it's an easy fix.

Hi chinmay Welcome to the forums. I'm not sure I completely follow everything in your question. I understand you want the click to overwrite the hover tween which is not a problem. Here's a little pen showing that in action: http://codepen.io/PointC/pen/BjgqJz/ As you can see in my demo, you can click at any time and overwrite the hover tween. I'm not sure what's supposed to happen after that though. Should the hover no longer work once the user has clicked on the element? So.. basically the user clicks and the background position is locked into place? I'm just not sure about your desired outcome. If you could provide a CodePen demo and a few more specifics about what's supposed to happen, that would really help in getting you the best answer. Please follow this link to see how to create a CodePen demo. Thanks. How To Create a CodePen Demo Happy tweening.

Hey fellow GreenSockers , Out of curiosity, I was looking through the members list today and noticed quite a few names with 0 posts plus a whole lot of guests surfing through the forum. If you’re hesitant and just looking for the courage to jump in, I wanted to encourage anyone who has never posted to please do so. If you’ve searched the forum and found your answer, that’s great. If you didn’t find the answer you needed though, please don’t be afraid to ask for help. This is an amazing community of very smart people that will bend over backwards to help you. The caped superheroes - Jack and Carl - are here for you along with the awesome moderating team of Jonathan, Blake, Diaco and an occasional appearance by Rodrigo the forum ninja. In addition, there are many helpful fellow members as well. I too lurked for a long time before posting my first question. I guess it was mostly fear of looking foolish that held me back. I can’t promise you that you won’t feel a little foolish from time to time (I make foolish mistakes every day), but I can tell you that nobody in this community will ever make fun of your questions. Once you get in here and start talking to others, you’ll be hooked and your learning will be accelerated by doing so. So – please join us. Follow this easy 3 point plan to jump into the community: Create an account (if you haven’t done so yet) Make a CodePen demonstrating your problem Post your question and wait for the magic to happen I look forward to seeing you around the forums. Happy tweening everyone. That is all. PointC out (mic drop)

Quick Tip: Animating dashed strokes with the DrawSVG plugin I've seen a few forum questions about animating a dashed line in SVGs. The DrawSVG plugin won’t draw a dashed path. If you try, it will remove your stroke dash array and turn the stroke solid. DrawSVG works by making one big dash and animates the offset. But you can create this effect with one extra step during the SVG creation process. Simply create your dashed stroke(s) as usual and then: Duplicate your dashed path Remove the dashes of the duplicate Make the duplicate solid white (very important). I also like to add a few pixels to the duplicate stroke width for safety This new solid path stroke will act as the mask for your dashed stroke. This gives you the ability to animate the appearance or disappearance of the dashed stroke by animating the mask path with the drawSVG plugin and maintain full control of the dashed-stroke color, width, dasharray etc. I’ve created a CodePen to show how this can work for basic shapes, squiggly lines and maps. Behold the amazing, exciting and groundbreaking dashed lines demo: http://codepen.io/PointC/full/zrQLvO/ o.k. – maybe it’s not that exciting Hopefully it helps someone with this type of effect though. One additional note: my demo utilizes the DrawSVG and morphSVG plugins. You can experiment with these on CodePen, but to use them in the wild you will need a Club Membership - which I highly recommend. Happy animating everyone.

o.k. - this is a little weird. Now I'm seeing it in Chrome 48 on Windows 7 too. I pulled the pen down for local testing and I do see this in all browsers Win7/Win10. For clarity sake, I made the class of .-sub into .open-sub. If you use a hyphen in the .open-sub class name, the bug appears, but if you use an underscore instead everything works as expected.