GreenSock

By the way, you can have a bunch of circles (or whatever) in a single <path> and have it morph into one shape - you'd just need to make sure your SVG authoring program puts them all into the same <path> and of course they couldn't have different fill colors or strokes (because they're all technically the same element). Have fun!

The extra line was related to a line break in the HTML itself, but that has been resolved in the latest version of SplitText. You were just linking to an outdated one, that's all. I'd recommend always pointing to https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js in your codepens (note: that'll only work on the codepen domain).

I see width and height being animated independently as expected. What leads you to believe those aren't working? As for "scale", that's not an attribute. Scaling is done in the transform. My understanding is that some browsers aren't great at rendering transforms on clipping paths though (admittedly I haven't done much testing myself, but I think I've heard this from other people who have).

If I understand your objective correctly, you can use the BezierPlugin.bezierThrough() method and construct the string accordingly like this: http://codepen.io/anon/pen/rLVzja?editors=1010 var values = [{x:0, y:0}, {x:100, y:100}, {x:50, y:200}, {x:40, y:30}, {x:200, y:50}]; var curviness = 1.25; TweenLite.set("#path", {strokeWidth:5, stroke:"red", fill:"none"}); var data = BezierPlugin.bezierThrough(values, curviness); var d = "M" + data.x[0].a + "," + data.y[0].a + " C" + segmentToString(data.x[0], data.y[0]); //the <path> data for (var i = 1; i < data.x.length; i++) { d += "," + segmentToString(data.x[i], data.y[i]); } TweenLite.set("#path", {attr:{d:d}}); TweenLite.to("#circle", 5, {bezier:{values:values, curviness:curviness}, ease:Power1.easeInOut}) //this just helps consolidate some of the code, and ensure that the values are clipped to 2 decimal places. It could be done in a more performant way, avoiding toFixed(2), but my goal here was to keep things simple: function segmentToString(x, y) { return [x.b.toFixed(2), y.b.toFixed(2), x.c.toFixed(2), y.c.toFixed(2), x.d.toFixed(2), y.d.toFixed(2)].join(","); } Docs for BezierPlugin.bezierThrough(): http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/bezierThrough/ Does that help?

If you've animated it with GSAP, you can tap into the _gsTransform object: yourElement._gsTransform.rotation; //rotation in degrees It also has properties like x, y, scaleX, scaleY, etc.

Sorry, I'm not even sure where to start with this. Without knowing exactly the effect you're after, I'm at a loss, but this doesn't sound like an easy undertaking, that's for sure. MorphSVGPlugin lets you animate from one <path> shape to another <path> shape (just by tweening the "d" attribute). That's it. And Physics2DPlugin lets you apply velocity/acceleration/friction to the x and y properties of an element. That's it. You can't really have two completely different effects controlling each of the points on a <path>. They'd conflict. But again, with enough code/effort, it's possible to create virtually any effect. Like I created a flapping cape effect here: http://codepen.io/GreenSock/pen/WQjRXE/?editors=001 but it took a lot of code to map all those points to sine waves, apply stuff in an onUpdate, etc. It's not a simple "oh, morph from this shape to that shape" because of the very particular style of movement in a realistic flapping cape. So this doesn't sound like an effect that'd be simple to create, and we wouldn't be able to burn all the hours to build it for you, but with enough effort on your part you may be able to pull it off. No promises

I think the problem was simply that you neglected to define x and y attributes on the element, like x="0" y="0", so when GSAP tried to get the starting values they were literally "null" which is difficult to tween from. Solution: add x="0" and y="0" to your element.

I can't quite tell if you're joking or not. If you're not joking, can you provide some sort of sample (even video) of what you're looking for? With enough elbow grease, you can accomplish just about anything. But no, it's certainly not super simple to just chuck some physics2D at morphSVG and "poof" get some realistic particle wind-based morphing effect along a whole path.

Happy to look at any suggestions you've got, Blake. @erikb, there is no such parameter for the removeEventListener() method. This is the first time anyone has requested something like that, and it should be pretty easy to work around in various ways, like creating your own bound function as you discovered.

Oh, right, iOS just doesn't show scrollbars like that. It's an iOS browser thing. I think Apple considered it a waste of visual space for a touch device.

I don't think this is related to GSAP. I'm pretty sure it's an issue in your CSS. For example, "object-fit: cover" is not supported in IE. And you've got a bunch of other CSS in there that's webkit-specific.

From the docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/ If you're using radians, Math.PI / 2 is just 90 degrees.

Welcome to the forums. Can you please provide a reduced test case in codepen or jsfiddle so that we can see the problem in context? It's just very difficult to troubleshoot with such a small snippet and no context. I'm not sure what you mean by "a large black-space creep and scale is not accurate". We'd love to help. To learn how to create a simple codepen, see http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Are you saying it doesn't work for you? Do you have a sample (codepen) that shows the issue?

You mean something like this?: TweenMax.fromTo(".box", 2, {scale:1}, {scale:0.33, repeat:-1}); TweenMax.fromTo(".box", 0.5, {rotationX:0}, {rotationX:-90}); var shake = new TimelineMax({repeat:-1, yoyo:true, delay:0.5}); shake.fromTo(".box", 1, {rotationX:-90}, {rotationX:90, ease:Power1.easeInOut}); Obviously you can play with the timing and rotational values, but hopefully the concept is clear. I wasn't sure if you wanted it to keep looping either, so feel free to adjust the number of repeats. There are many ways you could organize this.

Sure, that should be doable for the next release. For the record, the other reason we default to TweenLite is because it's very **slightly** faster performance-wise Though I doubt you'd notice unless you're literally tweening thousands of things simultaneously.

By the way, you don't necessarily need to use a Bezier to do this. If you just want a circular movement, you could use plain trigonometry math inside an onUpdate to apply things. Here's a fork of your demo that uses x/y transforms to do the positioning so that everything stays responsive too (resize the screen and things are still centered whereas in your other version, you were hard-coding values on "top" and "left" that would cause things to get out of whack when the window is resized): http://codepen.io/anon/pen/WxNZXO?editors=0010 I also removed the jQuery dependency. Is that what you're looking for? var radius = 200, items = document.querySelectorAll("nav .nav-item"), navTl = new TimelineMax(), spacing = Math.PI / (items.length - 1), i = items.length; navTl.staggerFromTo(items, 0.5, {scale: 0.5}, { x: -radius, scale: 1, opacity: 1, ease: Linear.easeNone, }, 0.5); while (--i > -1) { items[i].angle = Math.PI; //fabricating a custom "angle" property that we'll tween. navTl.fromTo(items[i], 0.5, { scale: 0.1 }, { angle: i * spacing + Math.PI, css: {scale: 1, opacity: 1}, ease: Linear.easeNone, onUpdate:applyAngle }); } function applyAngle() { TweenLite.set(this.target, { x: radius * Math.cos(this.target.angle), y: radius * Math.sin(this.target.angle) }); }

We received a few questions about this and apparently it was an issue in MailWasher itself and had nothing to do with the TweenMax file. See http://forum.firetrust.com/viewtopic.php?f=13&t=18829. It sounds like they already fixed it.

Hi galahad9gr. Welcome to the forums. We really try to keep these forums focused on GSAP-specific questions. It looks like your question is purely about CSS and you're not even using GSAP in that demo (although you're a Shockingly Green member, so clearly you're a GSAP person which is great!). I wish we had the resources to offer free consulting for all types of web development issues/questions, and perhaps someone here has the time and inclination to pitch in to help you (I hope so), but you might want to try a more appropriate venue like the CSS Tricks forums or Stack Overflow. The codepen you included seemed to be attempting to link to local images and style sheets and stuff, so you might want to clean that up first. Oh, and you don't need to add <html>, <head> or <body> tags in a codepen (those are injected for you).

Is this any better? http://codepen.io/anon/pen/wWwyPe?editors=011 There was an enhancement made to the new Draggable in GSAP 1.18.5 that makes this type of thing easier (note the second parameter of the update() call being true):

By the way, GSAP 1.18.5 was just released and it offers better support for things like this. import { TweenLite, TweenMax, TimelineMax, Elastic } from "gsap"; I got it to work okay in Webpack, Browserify, and RequireJS.

For the record, GSAP 1.18.5 has some improvements for compatibility with Webpack/NPM/Browserify/Node. It was released today. You might want to give that a try.

@RedGlove, your logo looks like the long-lost brother of our GreenSock logo. Wonder-twin powers, activate! Thanks for pitching in. Oh, and warning: be very careful about using window.onresize because by its very nature, you can only have one callback there, thus if another library (or your own code) had already assigned one, and then you re-assign it, that could mess things up (the other code wouldn't fire). To be safe, you'd have to do something like: var oldOnResize = window.onresize; window.onresize = function(e) { yourNewFunction(e); if (oldOnResize) { oldOnResize(e); } }

I didn't notice any major slowdowns but I'm on a fast system. What kind of device are you testing on? It looks like the actual DOM structure is different between those two examples, and I'm curious why you have autoScroll enabled. Perhaps that's part of the problem. Your "smooth" example doesn't seem to offer that same behavior. You also have some arrow <div> elements overlaid on the GSAP one but not the other. And you have overflow:hidden on the body of the "smooth" one, but not the GSAP one. Hiding the overflow could really help the browser avoid doing a bunch of unnecessary rendering work. There are other differences too. Unfortunately I don't have time to pull everything apart and do a detailed analysis for you, but hopefully this gets you moving in the right direction. I'd strongly recommend that when you're doing the comparisons, you make sure that everything is identical as much as possible. And again, reproducing it in codepen will significantly increase your odds of getting a good answer from people in these forums.