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.