PointC

You're very welcome. Glad to hear you're enjoying GSAP. This is an incredible community of helpful people so please don't hesitate to post any additional problems or questions. Reduced demos always appreciated. Happy tweening.

The 'i' is the index of that element. You can use 'i' or 'index' or almost anything you like really, but most of the time you'll see those two. The 'element' is the DOM element that is part of the jQuery object. It's what 'this' will be referring to. We don't actually need them to make this work. You could change the code slightly and get the same result: // change line 1 to this $(".icon").each(function() { // change line 11 to this $(this).hover(makeItWork, makeItWork) Here's some good info that will explain it in detail: https://api.jquery.com/each/ Hopefully that helps. Happy tweening.

Hi Sloan Thrasher Welcome to the GreenSock forums. That's a good question. camelCase should be used for all the hyphenated properties. You just drop the hyphen and make the first letter of the second word uppercase. So font-size becomes fontSize, background-color becomes backgroundColor etc. GSAP can animate any numeric property and can set non-animatable properties. Sounds like you found autoAlpha. That is a combination of opacity and visibility. When you use autoAlpha and you set it to 0, the element is automatically set to visibility:hidden. Handy for many situations, but you can use opacity if you like. scale is just scale if you want uniform scaling or you can use scaleX or scaleY as well. You'll find a lot of great information in the docs for the CSSPlugin http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ Hopefully that helps a little bit. Happy tweening and welcome aboard.

Carl - that is slick.

Hi ohem Just change the morph target to the path name inside the clip-path instead of the clip-path id. Once I did that, it all worked fine. // change this .to("#clipper", 1, {morphSVG:".smoothCircle"}, "endIntro") //to this .to("#clip", 1, {morphSVG:".smoothCircle"}, "endIntro") Happy morphing.

Yeah - there's a lot going on in there. Carl is absolutely correct about the 360 problem. If you change line 206 to this: .to(spinitemstep5, 1, {rotation:"+=360", autoAlpha:1, delay:0.2, repeat:2, transformOrigin:"center center"}) // I didn't look through the whole thing, but anywhere else you have 360, you'd want to change to +=360 it works fine for me. I think the FF problem is coming from the redundant scripts you're loading in CodePen. You're loading TweenMax and TimelineMax. Once I switched your pen to load only TweenMax and jQuery it seems to work fine in FireFox for me. Happy tweenng.

Hi cpshop Welcome to the GreenSock forums. I think this blog post can help you. Lots of great info about perspective: http://greensock.com/css3/ Happy tweening.

Hi phillip_vale You're on the right track with jQuery each(). This will create a separate timeline for each of the icons that can easily play/reverse on hover. $(".icon").each(function(i, element) { var tl = new TimelineMax({paused:true, reversed:true}), desc = $(this).find(".desc"), graphic = $(this).find(".graphic"), shadow = $(this).find(".shadow"); tl.from(desc, 0.5, {ease:Power2.easeInOut, autoAlpha: 0}, "hover") tl.to(graphic, 0.5, {ease:Power2.easeInOut, y: 10}, "hover") tl.from(shadow, 0.5, {ease:Power2.easeInOut, scale: 0, autoAlpha: 0, transformOrigin: "center"}, "hover"); $(element).hover(makeItWork, makeItWork) function makeItWork() { tl.reversed() ? tl.play(): tl.reverse(); } }); In this solution, we use the same function on hover over/out and either play or reverse the timeline depending on its current state. Here's a fork of your pen with the solution I've listed above. http://codepen.io/PointC/pen/yJYwgz/ Hopefully that helps. Happy tweening.

I tested it for you on a couple machines and it looks perfect. I can't reproduce your pixel error in any browsers.

Hi hiytrebla Welcome to the GreenSock forums. That's pretty strange. Could you please make a quick CodePen so we can test it live ? http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Thanks and happy tweening

Hi nickLoffer Welcome to the GreenSock forums. You can use onComplete for the timeline and/or the tweens. Here's a simple example: http://codepen.io/PointC/pen/VjvxzP/ Happy tweening.

Hi atelierstudios Welcome to the GreenSock forums. I looked at your pen, but I was a bit confused by your question. I'm not seeing any 'Step 5' to click. I only see Step 1 and Step 2. When I click those, the animation seems to spin correctly. I see the little circle rotate around the outside ring each time I click. Could you give us a bit more information or make sure you're seeing the problem in the CodePen? Thanks.

I get the same results as Blake. Also on Win 10 Chrome - nothing. FF - sporadically. Edge - works each time. Edit: Windows 7 results IE 11 seems fine FF - worked a few times Chrome - nothing

Hi Sam I'm not sure I completely understand your scenario, but you can kill() a tween or set up a new one that overwrites the old. You could also feed variables into it via a window resize event. Without seeing some code, it's hard to say the best way to achieve your goal. If you could please create a CodePen for us, there are a lot of great people around here that can give you some answers. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Thanks and happy tweening.

Those darn code gremlins are everywhere. No problem. Let us know if there are additional issues. Happy tweening.

Hi quintonjason I exported your pen and tested it locally with no problems. Are you getting any console errors? I assume you're not seeing the warning about a CodePen only file? Kind of tough to say for sure. Maybe a typo in the path? When are you loading the scripts? At the bottom of the page? In an onload event? Can you post a screenshot of your code? Thanks.

Doh! That's right - now I remember that. I sometimes do a docs search and get 0 results even though I know it's in there.

I'm not sure if it's in the docs or not. I first read about it in a forum post, but a quick search of the docs doesn't yield any results for me. I'm sure Jack or Carl can let us know if it's in there or not. In the meantime, a similar question was asked and this post may help you: http://greensock.com/forums/topic/9211-need-help-with-properties-in-gstransform-object/ Happy tweening.

That is good to know. I personally always use camelCase, but I see quite a few forum questions and CodePens like the one above that use hyphens and they usually seem to work fine so I was curious about it.

Hi phillip_vale The easiest way to do that is alternate play/reverse of the timeline on click. Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/XKbEBQ/ Happy tweening.

Width and height are no problem for a mask or clip-path. Scale is a whole different matter. Here's a pen showing two circles. One revealed by a mask and the other by a clip-path. http://codepen.io/PointC/pen/MewvjM/ You'll see that scale will actually work in some browsers, but is not the way to go for cross-browser support. It's best to stick with width/height and x/y to animate masks and clip-paths. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask If you'd like to skip the masks and clip-paths, you can also animate the viewBox for some nice reveals and animations. I wrote about that in the SVG Gotchas thread here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=57502 Hopefully that helps a little bit. Happy tweening.

Jack already gave you the answer, but here's a little pen to get you started. http://codepen.io/PointC/pen/vKOmzq/ Happy tweening.

yep - adding those x/y attributes should make everything work for you. I made this as an answer to another question a couple months ago, but it's a good reference for a simple SVG mask. http://codepen.io/PointC/pen/KzmXYK Happy masking.

Hi gmw Welcome to the GreenSock forums. I saw your topic title and thought maybe this was a whole different kind of problem. You can fix that by putting the clip-path on a group rather than the rectangle itself. <g id="beerWrap" clip-path="url(#SVGID_2_)"> <rect id="beer" x="27.3" y="72.7" fill="#FFB241" width="177.6" height="183.8"/> </g> Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/oLXjvr/ Hopefully that helps a bit. Happy tweening.

I think he actually prefers his full title of Sir Blake the Awesome Wizard of Code.