PointC

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/

Sounds like ScrollMagic would be perfect for your needs. There's a nice tutorial here: https://ihatetomatoes.net/simple-scrollmagic-tutorial/

Thanks very much! I knew it would be simple. indexOf() was all I needed.

Long time reader – first time poster. Love the forum and GSAP. I’m in awe of all the cool stuff being created by everyone. This is probably quite simple, but I’m more of a designer than a Javascript guru. I’m learning though. If I have a draggable with throwprops set to true and an array defining my snap points, how can I retrieve the array position number that the draggable snapped to onThrowComplete? I don’t need the position of the draggable element, but rather the position in the array that was used. So, if my snap array were [100,200,300,400,500] and the draggable settles/snaps to 400, how do I retrieve the value of 3 from the snap array onThrowComplete? Thank in advance.