Gary

Jonathan, thanks for the info and the example! It would require a significant refactoring of ProStyle to support that and would circumvent the intrinsic layering. I'm content with ProStyle not supporting 3D on IE (unless Microsoft every gets around to adding preserve-3d) especially since the majority of Windows users are moving to Edge. Thanks, Gary

Yep, when it comes to 3D, IE just doesn't support it. You can do a bunch of complex math to try and emulate it on a 2D plane, or choose a much better browser. Luckily, Microsoft is moving most of their users to Edge, which does support 3D.

Bummer. I definitely understand the position, as you describe it, though. Thanks, Jack.

You can lay the sides out in 3D space, translating on the Z and setting the transform origin to rotate them into place. Then just rotate the outer div. Here's an example using ProStyle. It's resizeable with trackbar. http://codepen.io/garyc/pen/KdaewM?editors=101

Any chance transformOrigin tweening will be added to an upcoming release? I have a bunch of uses for that if it were added. The attached codepen is an example. I wanted to rotate and move the phone simultaneously but couldn't. To do that I would need to animate the position, rotation, and transformOrigin of the image at the same time. Here's another example. I'd really like to Greensock-ize something like this, but that also requires animating the transform origin.

http://codepen.io/garyc/pen/OyWbpy?editors=101

Works great so far. Thanks, Carl !!! I'll be putting a much more elaborate demo on codepen shortly.

While attempting to set a gradient on the body tag I noticed some weird behavior. If I set a background radial gradient on a div, it works. If I set it on the body, it doesn't. If I set it on both, in an array, it works for both or neither depending on the order within the array. In the codepen, uncomment each of the TweenMax.set() lines in turn, one at a time.

I'm not sure how I could incorporate something like that into ProStyle. It supports an arbitrary number of nested timelines and the duration of the parent timelines are a function of the durations of the children. See https://prostyle.io/concepts/#animation The user can seek anywhere from 0..x on the main timeline and all children are moved to a deterministic position. The codepen that I included has just one set of text but there could be other things being animated. A helper parameter would make it much simpler than callbacks (similar to how yoyo simplifies). I imagine the stagger parameter optionally taking an array instead of number that could have the delay and a boolean for seamless. { stagger: [0.12, true] } I'm not sure how many people would want seamless staggering. Similar to when I proposed xPercent/yPercent, it's something that would be very helpful for me but I don't have enough insight into what most people do with GSAP to know if it would be helpful for many others. I thought I'd at least put it out there for consideration. Thanks!

Clever! I think I can get it to work with this approach. Thanks. (still might be a nice feature to have a variation of yoyo to simplify it)

The yoyo attribute (and method) makes it simple to repeat something back and forth many times. Naturally, the ease is played in reverse every other leg. I’d love to be able to optionally disable that and have it play the ease forward regardless of the yoyo direction. This can be done in JS by duplicating and tweaking what yoyo does internally, but it's very nice having the convenience method. Yoyo is a Boolean. Perhaps it could take a string to trigger this. { yoyo: “easeForward” }

Thanks for the response, Diaco. I can't use repeat -1 in my ProStyle library because the tweens are added to an outer timeline that must have a measurable duration, since it uses controllers like the trackbar. Let me try to explain it better. Here's a fork of my original codepen that has the controllers setup to pause right away. http://codepen.io/garyc/pen/GpZeab?editors=101 Notice that none of the characters are rotated at position 0. It can never be like this in a seamlessly staggered loop. Similarly, if you click on the track bar at the end (position 6.04), no characters are rotated there either. Since there are 19 characters, each staggered 0.12 seconds, position 2.04 shows what the start should look like to make it seamless. (19-2) * 0.12 = 2.04. The overall timeline is currently 6.04 because it is a 4 second animation per letter plus the 2.04 staggering. If I could do it seamlessly, the main timeline would only be 4 seconds instead of 6.04, and at no time would all the letters be lined up.

Oh how I love GSAP’s staggering. It’s so simple, and yet so powerful. The one thing that I wish it could do, though, is seamless staggering. See the animation at http://codepen.io/garyc/pen/OyMmvB?editors=101 I had to add a bunch of repeating to have seamlessness between each iteration. However, eventually the repeating stops, after the last repeat. I know I could set repeat to -1 but that would mess up the outer timeline’s duration (see the trackbar). To get a better sense of what I am talking about, in the codepen, remove the repeat and yoyo in the charAction by changing the anim entry to this: anim:{ dur:4, stagger:0.12, ease:"curve inout" }, rotation:{x:360} The characters all have to stop before the main timeline can start again, so at the beginning and end of the outer timeline there are characters that aren't moving. I’d love to be able to pass in a seamless flag that pre-positions all the characters before the last one, skipping part of the animation, using the ease, and right away starts all of them. It would also handle the end of the timeline by continuing the animation what was skipped at the start for all but the last one So, I wouldn’t need to repeat, the outer timeline would be as short as possible, and the animation could be looped forever without characters stopping.

Yup, that helps. The object methods is really good to know. I don't need it yet, but it looks very useful. The hand-rolled loop is what I am doing now and it works great. I've been using D3.js a lot and have become a fan of the loop-less data interaction with modular data processing functions. For instance, random values like this would be trivial. function randomNumber(min, max){ return Math.floor(Math.random() * (1 + max - min) + min); } tl.to(divs, 5, {x:randomNumber.bind(0,100)}); Writing explicit loops works perfectly fine. The above approach is merely semantic sugar. Thought I'd ask because I have a sweet tooth.

Does GSAP have any intrinsic support for calling a function to get a vars value? Given an array of divs and an array of data, with one datum per div, it could look up a property value. For example: var data = [[20,50],[25,41],[22,10]]; function getX(index) { return data[index][0]; } function getY(index) { return data[index][1]; } tl.staggerTo(divs, 5, {left:getX, top:getY}, 1); I don't think it does, but thought it was worth asking. If not, might be a nice future enhancement.

It's working!!! First, your explanation makes so much sense. I didn't realize that you were just having a div process the transform. Clever. Allowing xPercent and yPercent to be set along with the transform property works like a charm. I continue to be blown away by the amazing Greensock support. I look forward to the next release with this included. Thanks to both of you! Gary

Wow. Thank-you for spending the time to create that. !! Your "inner" div is what I was calling "outer" in my last post, and the items were the "inner". The extra "outer" div in the example is not needed, except maybe to crop with overflow:hidden (but that would lose support for 3D rendering) The example is manually creating an inverse matrix. e.g. rotate(-90deg) in CSS and rotation:90 in GSAP. I agree that it can be done manually, ..but the demo avoids the hard part. It uses CSS to place the items and then GSAP to move them. Try using GSAP for both. Particularly, try it with 3d rotation, translation, and scale. Because GSAP has a constant order-of-precedence (which is a good thing) then just negating the rotation/position and inverting the scale is not enough. Sure, you can hand calculate (not easily) the equivalent, but it is much easier to use the negated values and apply them in reverse order. This is exactly what impress.js does. We kind of went off topic. Using GSAP to animate a transform property, regardless of my use case, appears to not handle percentage offsets, either xPercent/yPercent or translate(-50%,-50%). I think this might be a bug because that code is probably far older than the relatively new percentage offset properties. I'm hoping that there is an easy way to apply them and still use the percent values. Any thoughts on that? Thanks for your help, Gary

Thanks for the reply! Yes, what Impress.js does is exactly what I am attempting to do, but with Greensock instead of CSS animation. Impress.js does an inverse matrix, just like what I am talking about. You're right, I could just move the inner div into the center of the outer div, but what about all the rest of them? It's much more performant (and simpler) to tween the one outer div than each individual inner div. The best example I can provide is Impress.js. I'm trying to make one in GSAP.

I'm building a Prezi-like zoom effect where the the viewport zooms into div content. To do this, the outer div needs to be set to an inverse matrix of whatever inner div will be brought to focus. GSAP builds the matrix by applying the transform parts in a constant order (which is brilliant, by the way) as described in the CSSPlugin docs. For the outer div, I can't just set the transform parts directly because the order of operations will be wrong. So, instead I am using the transform property with a string, where the string has the parts in the opposite order. This seems to work fine except that the xPercent and yPercent variables are stripped. In the attached code pen, I am setting a no-op transform (no translate, no rotate, 100% scale) but with center alignment using xPercent/yPercent. I then attempt to set the inverse using the transform property. This is also no-op, since the inverse of 1 is 1, so there should be no effect. However, it loses the center alignment.

Hi Jonathan, Thanks for the response! Yep, clearProps definitely avoids the issue. I'll petition to get it changed in the library so clearProps isn't needed. Thanks, Gary

Oh, and I meant to say this: I know that inset can't tween. It will pop to the new value like if you try to tween a font-family or text-decoration. I use to() instead of set() because the user may or may not have used inset and I want the other shadow values to animate nicely if they haven't toggled inset. It seems that the inset "popping" doesn't work correctly though. Does that make sense? My user might set zero or more shadows in any configuration, with or wthout inset. I just pass them into gsap.

Thanks for the help. I'm aware of how to resolve the basic example in the codepen using techniques like you suggest, but thanks for the suggestions. I'm pointing out what I think is a bug in the GSAP library. Using the codepen I gave try doing these things in order: Click the Shadow 2 button. The shadow will animate in as expected (bottom-left, blue, not inset) Then click the Shadow 1 button. The shadow switches to inset and animates in as expected. Then click the Shadow 2 button again. It animates back to the bottom-left blue but does not switch to not-inset. However, I think the internal state does think that it is not-inset but didn't render it to the css. I think that because if you then click the Shadow 1 button again, it animates not-inset and then pops to inset at the end of the tween.

Setting a shadow with inset works correctly, but then setting it without changes everything but doesn't clear the inset. The codepen is a very simple example. I know clearProps could be used in this example, but is not ideal for my actual use case with multiple user-supplied shadows. Any thoughts how to toggle inset on/off?

Thanks, Carl. clearProps is exactly what I was looking for. I'm not familiar with autoWidth, is that a jquery extension?

The attached codepen centers text on the screen, and by default auto-sizes the div to the text content. It auto-sizes because white-space is set to nowrap in the .text css class. I can then animate to a width using GSAP, by clicking the 500/800 buttons. To undo the width and go back to auto-size, I need to set the width to "auto" and the white-space back to "nowrap". However, this leaves behind width and white-space attributes in the element that aren't needed, and weren't there originally. It works fine in the codepen, but I'd prefer to remove the unneeded attributes instead because there will be many text elements in play. I tried setting them to undefined but that didn't work. Is there a way to do that using GSAP or do I need to manipulate the DOM directly? I'm concerned that manipulating the DOM directly will leave the GSAP tween state misaligned with the DOM. Bonus question: Any thoughts on how to animate back to the auto-sized width? Thanks, Gary