PointC

Hey Lynx , Looks like you may be looking for the quick start video and information posted here: http://greensock.com/get-started-js#loading

Thanks Jack. I actually didn't think it would work, but in my experiment with it wrapped in a containing div, it does animate the text so I was foolishly trying to make it work.

Hey everyone, I'm trying to use SplitText with some SVG text and having some difficulty. I've tried using a parent div of the SVG, but I lose positioning and other pieces of the SVG. I've tried using an ID on the text element itself, but it seems to not give any size to the array of divs. More details are in my CodePen. Thanks. PS the TextPlugin and ScrambleTextPlugin work perfectly with my SVG text.

Hi cormack , GSAP can animate most CSS properties. Complete reading is here in the docs: http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

Hello BadAnderson , I think the simplest approach to different tweens at different screen sizes would be to tween between classes. You could have a class name to size your logo and tween your element to it. That class can then be set in your media queries to different percentages for different screen sizes. Here's the class tweening from the docs: Allows you to morph between classes on an element. For example, let's say myElement has a class of "class1"currently and you want to change to "class2" and animate the differences, you could do this: TweenLite.to(myElement, 1, {className:"class2"}); And if you want to ADD the class to the existing one, you can simply use the "+=" prefix. To remove a class, use the"-=" prefix like this: TweenLite.to(myElement, 1, {className:"+=class2"}); Note: there are some css-related properties that don't tween like IE filters, but almost every css property is recognized and animates great. Also, there is a slight speed penalty when a className tween initializes because the engine needs to loop through all of the css properties to see which ones are different.

Hey Diaco and Blake , Thanks so much for the info and Codepens - I greatly appreciate it and both of those are so much better than what I wrote. Uggggh - I have so much to learn. Thanks again.

Hey everyone, I can usually get things working fine, but quite often I seem to over complicate some things or take the wrong approach so I'm looking for some advice. I've got 4 buttons that will each have their own independent SVG animation on hover. (For the purposes of the Codepen, it's just a simple box inside each button.) The four timelines are set up as variables. I'm using a data attribute (that matches the timeline variable name) on each button to choose the timeline to play. Everything works fine, but I'm just looking for advice on the best way to do this. To convert the data-attribute to the variable name and allow it to play the timeline, I've found two ways 1: eval(varName) 2: window[varName] Both methods seem to accomplish the task, but I've read a bit that says eval() is bad and poses problems, while other info says it's fine and poses no security problems if no data is coming from the user. So.. which is better... or is there a completely different approach to this that I'm missing? Thanks.

Hey sjerrentrup, I think you may also be asking about seek. Once you add the label as Diaco has suggested you can them simply jump to it by using tl.seek("yourLabel")or you can also jump by time: tl.seek(2) will jump to 2 seconds.

Correction - after Carl's post, I tried the Codepen again on a different PC with the latest version of FF(39) and it is indeed showing some y positioning problems. The other PC I tried has an older version of FF (30) and works perfectly fine.

Hi 48DESIGN , I just took a look at your CodePen in Chrome, FF and IE and I'm seeing the exact same animation in each browser. No strange y positioning is showing up in Firefox. Maybe you've changed something since your original post, but at this time, I don't see any browser differences.

Hi cormack , I just did that very upgrade not too long ago. I went from Shockingly Green to Business Green so yes - you can upgrade to a different license at anytime. Jack and the GS team are awesome at taking care of the community. I'd highly recommend the ShockinglyGreen level for the throwProps plugin alone - it's really cool! Happy tweening.

Hi dada78 , You may want a from() or fromTo() tween to not be immediately rendered in some animations. This forum post has a really good explanation of times you may want to set it to false: http://greensock.com/forums/topic/10137-understanding-fromto/

Hi cmaxster, I may be wrong, but your problem may be a lack of the CSSPlugin with Tweenlite. It's automatically loaded with TweenMax, but with Tweenlite, you'd have to load the CSSPlugin separately. I'd give it a try.

Hi Yes!, Looks like your Codepen wasn't loading GSAP and the variable m had quotes around it. Please try this: http://codepen.io/PointC/pen/JdaeeW

Hey everyone, I saw this post this morning about GSAP and the massive increase in usage: http://blog.builtwith.com/2015/07/22/entire-internet-javascript-usage-january-july-2015/ Congratulations GreenSock team! It got me wondering if anyone is compiling a list of cool sites using GSAP. All the Codepens and tutorials are great, but I always enjoy seeing the final result on live websites. I know there are some links from here in the examples section (which are quite fun and interesting), but the blog post linked above says they are aware of over 500,000 sites using GSAP so there must be some pretty interesting stuff out there. If anyone has links to inspirational designs, I'd certainly love to see them.

Are you needing to round to the nearest integer? http://greensock.com/docs/#/HTML5/Plugins/RoundPropsPlugin/

Hey Jack, I'm not seeing anything performance wise that I can't live with, but I'm also not animating/scaling hundreds of elements at the same time. Most of our work has maybe a dozen elements moving at once. You always have to think about the end user and browser performance so I try to keep my SVGs as clean and simple as possible while still getting the client's message delivered. Most of the scaling I was referring to was just the initial size of the users screen. I don't usually scale too many elements up to the full stage size, but even when we do, I think it looks pretty good in most browsers. Scaling everything to full screen at once can be a bit noticeable. That's why I was excited to see your viewBox animating addition in the new TweenMax. I don't know if there will be any performance/rendering difference between changing the viewBox vs scaling the entire SVG, but I'm excited to give it a whirl. BTW - Sara Soueidan just posted a new entry about the viewBox and it's power: http://sarasoueidan.com/blog/svg-art-direction-using-viewbox/ The bottom line for us is: SVG is the future so we're embracing it with open arms. Hopefully browsers will improve rendering performance with each new release. If we want to deliver a Flash-like experience with searchable text that is SEO friendly I'm not seeing another way right now so we're all in. Of course, most of our web animation work wouldn't even be possible if not for GreenSock so thanks for an awesome product!

Another great teacher is Sara Soueidan. She is writing loads of great information about SVGs. I'd highly recommend following her and reading her in depth blog posts. She's also a huge GreenSock fan. http://sarasoueidan.com/blog/svg-coordinate-systems/

Positioning in animation is always tricky, but trying to design a website/animation that looks perfect from a widescreen monitor down to a smartphone is downright maddening sometimes. Have you experimented with any SVG animation yet? We're switching nearly all of our animations to SVG . The beauty (beyond the obvious scaling of the vectors) is you can set up an entire 'stage' in Illustrator or any other vector based program with all your elements at their desired starting (or ending) position and animate them with GreenSock while having complete control over the CSS. Each element is sitting at it's own zero/zero coordinates so if you move one of the items to {x:400} it will move 400 units from it's current position. The really awesome part is that when the SVG scales down for smaller screens, that tween doesn't need to change - all the animations stay in proportion. Just start at the largest size you'll need and work from there. Quite often, I'll start with a nice size document - say 1600px by 1000px and layout all my vectors on that stage to set the scene. I then bring that into my HTML via an inline SVG and set all my GreenSock tweens. Set your main SVG to 100% width and everything scales down beautifully. Another big plus to an SVG workflow is adding new elements after you've started your animation. Simply go back to your original vector illustration and add your new items anywhere on that stage you'd like them to start. After that, simply save a new SVG with only that element selected (and a background rectangle the same size as your stage), cut/paste the new SVG into your existing HTML and presto - its now part of the master SVG. To me, the whole process is a lot like making a Flash animation. You just have to wrap your head around the viewBox of the SVG. Once that makes sense, you load up your GreenSock, layout some SVGs, grab some snacks and create something awesome. Honestly, between GreenSock and SVGs, I'm like a kid in a toy store - the possibilities are endless. Best of luck to you.

Thanks Jack - that is great news. Animating that viewBox is a powerful technique and I just can't use CSS animations ever again after getting hooked on GreenSock. Any idea on the official release date for the new TweenMax version?

Thanks Rodrigo - I'll have a look. It just works so easily with CSS animate, I thought the attribute plug-in would be just as easy.

Have you read this yet? It's been quite helpful to me. http://greensock.com/svg-tips

I'm not sure what I'm doing wrong on my test SVG, but the viewBox attribute doesn't want to animate. Setting the value works fine and the end value is correct, but the viewBox simply changes to the new value rather than animating to it. http://codepen.io/PointC/pen/XbqBmM It works perfectly using animate within the SVG: http://codepen.io/PointC/pen/GJdBJw

IE should behave if you specifically tell it height and width( in pixels) of the SVG and then animate the internals groups, paths, circles, lines etc... If you use percentages for the size of the SVG, that's where it tends to go off the rails without the padding-bottom hack. I personally use the padding-bottom hack in a containing div for most everything inline so I don't have to worry about IE causing trouble.

IE can be a pain since it usually needs to be told what size the SVG should be, but that doesn't help much with responsive design. The padding-bottom hack works quite well for inline SVGs. Here's a detailed article which should help: https://css-tricks.com/scale-svg/