Cefn

In practice I'm calling quite a few tweens and hoping to be able to have a single point in the timeline as a place I can tween back to, regardless of what the last tween happened to be. It could be the only way to do this is manually store all the relevant CSS through JQuery data(...), but this seems like a bit of a nightmare. I'm guessing that reversing a from(...) will only reverse the attributes which that from(...) tween was actively manipulating, and if other tweens have run in the meantime, they won't be reversed. As it turns out the place I want to revert to is the same place the elements were when the page was loaded if that helps simplify the problem at all.

So in conclusion, the least worst approach seems to be to rely on JQuery's css methods, but then override its junked "width" value with a known assignment, as suggested by this codepen which works fairly well. http://codepen.io/anon/pen/rtuyo Ideally it would be possible to also revert to the original values without having to manage this information explicitly. Is there a reliable strategy in Greensock to get back to initial values?

I had a go at using getBoundingClientRect() but this junks the width information too... http://codepen.io/anon/pen/xzFBc ...I suspect this is a bug in Chrome or could be my misinterpretation of what width value I need to be querying.

OK, my stupid. There could be an initial problem to do with the fact that changing individual cells to absolute positioning could affect the position of other cells (because they no longer take up the same space in the layout). If that's true I may need to do a caching run (storing positions) followed by a positioning run (setting positions). The updated version of the Codepen takes account of this, and yet is still doing junk positioning owing to a bug in JQuery width() when applied to table cells I think. The following codepen includes a workaround, ignores JQuery's width, and substitutes a hard-coded value, and finally works, but in a roundabout fashion. http://codepen.io/anon/pen/ewAby

@Greensock thanks for the suggestion. I don't know how transforms would help me exactly, as I need to tween from its current location to a target location relative to the viewport, and I don't know how a transform's coordinate system could help me achieve this (especially given that I can't seem to work out where the element actually is to begin with).

OK, this is a codepen which I believe _should_ work, but doesn't work either in Chrome or in Firefox. Any ideas what's wrong with my logic (or JQuery's offset(), width() and height() implementations)... http://codepen.io/anon/pen/cfsIv

@jonathan thanks for the codepen suggestion it's really fun. This shows the problem, and I'll knock together a solution in a bit. http://codepen.io/anon/pen/GEBvh

I'd like to have some table cells animate from their automatically laid out relative position, to certain designated absolute positions to highlight them, and then have them return to their position in the table. In particular I have a Gantt chart with three selectable cells which I would like to tween from its initial... {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} to a temporary... {top:"0%",left:"0%",width:"100%",height:"33%",position:"absolute"} {top:"33%",left:"0%",width:"100%",height:"33%",position:"absolute"} {top:"66%",left:"0%",width:"100%",height:"33%",position:"absolute"} ...and then tween them back to their initial relative values again. Is there a Greensock way of doing this? If I use a regular to(...) tween with the values above, the 'position' value is toggled monolithically to 'absolute', with the top and left set to 0 so the cells jump to the top left corner immediately, then tween their location and width from there, rather than tweening smoothly from their initial (relative) location. There's probably a workaround, involving JQuery calculating the starting positions for the tween from the rendering engine, but perhaps someone has an elegant way of doing this, as I'm sure I'm not the only one who needs the behaviour.

Thanks for all your contributions. Yeah, I should have noticed the incorrect TimelineLite reference as I'd recognised before that yoyo was TimelineMax only. The approach of tweening my own object properties with onUpdate is quite elegant. However, I believe that for consistency with other degree oriented values (the hue in HSL varies from 0 to 360 degrees), it would be worth looking into wiring HSL to the DirectionalRotation plugin by default as described at http://www.greensock.com/gsap-js-1-9-0/ making it possible to use degrees consistently wherever they appear.

Hi all. GSAP is a great framework, really enjoying using it. However I'm struggling to get Hue tweening using HSL within the Color plugin (via CSS automatic binding). A terse attempt to set a background box which tweens its color slowly through the color wheel is as below, but no change seems to happen. TweenMax.set(".wash",{backgroundColor:"hsl(0,50%,50%)"}); TweenMax.to(".wash",60,{backgroundColor:"hsl(+360_cw,50%,50%)",repeat:-1,yoyo:true,ease:Linear.easeNone}); If I remove the 'set' line, then there are some tweened changes to color, (visible in real time within Chrome when the element is selected) but they don't seem to visit the whole 360 degrees of the color wheel. Can anyone help tell me how this is meant to be specified or is a bug/missing feature with respect to degrees in HSL? For now I have the following kludge in place, but I don't like it much as I think something like the simpler syntax should work... TweenMax.set(".wash",{backgroundColor:"hsl(0,50%,50%)"}); var washTl = new TimelineLite(); washTl.to(".wash",10,{backgroundColor:"hsl(120,50%,50%)",ease:Linear.easeNone}); washTl.to(".wash",10,{backgroundColor:"hsl(240,50%,50%)",ease:Linear.easeNone}); washTl.to(".wash",10,{backgroundColor:"hsl(360,50%,50%)",ease:Linear.easeNone}); washTl.yoyo = true; washTl.repeat = -1; washTl.play();