PointC

Probably still dizzy from yesterday's 'You Spin Me Round' CodePen.

@Blake - I'll give you one guess - what song was stuck in my head all afternoon? Thanks for that!

Hey there , I took a look at your site and I see the blurriness in Chrome, but it's sharp for me in Firefox and IE. I think you're seeing the Safari and Chrome (webkit) bug of blurring while upscaling. You mentioned setting force3D to auto, but force3D defaults to auto so you may want to try force3D:false. I hope this helps.

You can just add the ID to the SVG rather than a containing DIV. <svg xmlns="http://www.w3.org/2000/svg" id="yourDivNameHere" version="1.1" x="0px" y="0px" viewBox="0 0 354.4 87.1" xml:space="preserve" enable-background="new 0 0 354.4 87.1" preserveAspectRatio="xMidYMin" filter="url(#glow)">

I laughed, I cried, it was an emotional roller coaster of a movie. If you see only 1 Carl video today, this is the one you want to see. @Carl - seriously - very helpful and it all makes perfect sense when you really stop and think about it.

You're welcome. Yes - you are correct - that plugin is for members, but you can certainly try it on your CodePens for practice. If you haven't played with any of the other member plugins yet, you're gonna love the ThrowProps plugin. I use that on many of my projects. That and the MorphSVG plugins alone make a Shockingly Green membership well worth it. Happy tweening.

Hi there stephenburgess8 , I didn't see the MorphSVG plugin loaded on your codepen. Once I added that, your hamburger menu morphs to the X. http://codepen.io/PointC/pen/XmPjRO Just click the little gear icon on the JS panel and add the plugin: //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=10

Hey Sunnyday , Try this: TweenLite.fromTo(_elem, 1, { drawSVG:"100% 100%" } , { drawSVG: "0% 100%" });

I saw the tweet today from Greensock recognizing Diaco, Blake and Jonathan for their outstanding answers in the forum which was coincidental timing as I was just thinking what an education it is to read answers from these guys. I don't know what you three do for a living, but I'm not sure how you get any sleep with work and answering all the questions. I, for one, thank you very much for the time you spend educating us mere mortals. Of course, Jack and Carl are the superheros that bring us the tools and the forum where the mods strut their stuff - so thank you two for that as well! The forum is so extensive, I rarely have to even post a question as it's already been asked and answered so a quick search is all it takes. It's some of the best education around. My thanks to all of you!

Diaco vs Carl Little old PointC accidentally wandered into the Battle of the Titans here.

Hi Kathryn, I took a quick look at your pen and noticed that jQuery/UI and the MorphSVG plugin were not loaded so the console is showing some errors looking for those scripts. If you need a path to the MorphSVG plugin, you can find it on this GreenSock pen. http://codepen.io/GreenSock/pen/rOjeRq I don't know if that's the only problem, but it should get you one step closer.

You can draw the stroke starting at 100% 100% and animate it to 0 100% which gives you a reverse. Here's your pen again without the x rotation I did on the other one. http://codepen.io/PointC/pen/bVKLBP

A super fast and easy way is to add a rotationX:180. http://codepen.io/PointC/pen/QjxaRR

Hey everyone , This isn't GSAP specific, but it came across my Twitter feed today and I thought it looked like a pretty handy little tool for creating paths without having to jump into other vector software so I thought I'd share it with the forum. http://anthonydugois.com/svg-path-builder/

Hi there AdObeOne , You just need to assign an ID or a class name to you path(s). You can then add them your other elements that you are animating with DrawSVG. If you have a look this Greensock CodePen: http://codepen.io/GreenSock/pen/jEEoyw you'll see that on line 10 of the JS there are multiple classes that are being drawn. Then have a look at the SVG and you'll see those class names assigned to several paths in the SVG. I hope this helps.

I tried this locally as well and can confirm that the CSSRulePlugIn doesn't seem to set the pseudo element when the stylesheet is external (internal worked fine). Whether this has something to do with bootstrap or not - who knows? As Jonathan mentioned in your other post about this problem, pseudo elements can be a bit tricky as you're finding out. As I mentioned in the other post - rather than fight this uphill battle with pseudo elements and extra plug-ins you can create the same effect by appending a div to each of those <li> elements. I forked your pen and switched those :before elements to an appended div with the same CSS. Now GSAP can animate/set any of those underline elements without the extra CSSRulePlugin. http://codepen.io/PointC/pen/OyvPeL

Hi TDT If I understand you correctly, you could do something like this: $(window).resize(function() { w = document.documentElement.clientWidth; TweenLite.set(yourDiv,{backgroundPosition:w/2+"px"}); } });

You can use textShadow and boxShadow for some cool glow-like effects. Have a look at this documentation for more details: https://greensock.com/css3/

Jonathan is giving some great advice. I would (and do) create DOM elements for this kind of hover animation. A simple jQuery prepend would work great in your case. It just seems like a road loaded with problems when you use pseudo elements. That being said, if you absolutely need to use a pseudo element you should take a look at this Greensock pen which uses the CSSRulePlugin and deals with styling pseudo elements. http://codepen.io/GreenSock/pen/atgzI

TweenMax does load the CSSPlugIn, but not the CSSRulePlugin. I've honestly never used it so I'm curious to hear from the 'big guns' on this one.

I see Jack and Jonathan are both online now, so hopefully they can clarify that. I'm curious about it myself since I haven't actually tried tweening pseudo elements.

I may be incorrect, but doesn't this need the CSSRulePlugIn since this is a pseudo element? https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSRulePlugin/

Hi there, I took a quick look at your codepen and noticed that all the scripts are up in the HTML rather than in the javascript section of the Codepen so I don't think any of them are running. The console is also showing some errors as you're loading jquery and bootstrap from other sources and it's coming back with a 404 error. If you move that javascript, strip the head head elements from the HTML section (not needed on codepen) and load jquery from CodePen, I think you'll be a lot closer to what you want - or at least a lot closer to debugging any problems.

Hi unpaidintern , I believe smoothOrigin is for SVG only at the moment. It isn't going to work on regular DOM elements. If you look at this page: http://greensock.com/svg-tips - at the bottom Jack mentions possibly adding smoothOrigin for DOM elements in the future, but I don't believe anything is available at this time. If I'm wrong about that, I'm sure someone else will correct me. Here is a revised version of your pen with the rectangle rotating correctly. http://codepen.io/PointC/pen/ZbrLPG

Hi there d11202 , You didn't have a CodePen so I made a really quick one using your HTML above. http://codepen.io/PointC/pen/qOpeEV I set the color change for a dragStart, but you can also set it for a click. I hope this helps. PS For future reference - a CodePen is usually the fastest way for others to help with your questions. Check out this post on how to make one: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/