[vue.js transition example]

better re-allocation of resources for simple fades:

See the Pen WrXwZN by jedierikb (@jedierikb) on CodePen

[vue.js transition example]

Hello Greensock community.

 

I adapted this example [http://vuejs.org/examples/modal.html] from vue.js to use greensock to find out what was involved.

 

I hope this example is helpful to others out there.  Suggestions or thoughts welcome.

 

Erik

See the Pen Qyqoyp by jedierikb (@jedierikb) on CodePen

[heads up: likely ffox bug]

You're right -- it does not happen on w10 ff42.  Mac only perhaps.

 

And, interestingly, getBoundingClientRect should work (good suggestion), but does not solve the issue:

See the Pen QjRWyg by jedierikb (@jedierikb) on CodePen

[heads up: likely ffox bug]

And a workaround is to add a textnode to the element.  Since I do not want one there, I set it nearly invisible and very small.

See the Pen PPgvjr by jedierikb (@jedierikb) on CodePen

 

Making it actually invisible does not trigger the repaint.

[heads up: likely ffox bug]

Distilled this bug so far I even removed greensock.

Seems to be a firefox bug with repainting transformed elements when you modify backgroundPosition.

Desperate to find a way to force a repaint; jiggling the window will most times force a repaint of the element.  Any ideas?

Filed this:

https://bugzilla.mozilla.org/show_bug.cgi?id=1227012

 

See the Pen YyMMmv by jedierikb (@jedierikb) on CodePen

[console error on codepen example]

minor issue, if even an issue.  your example is trying to load some js from your server and failing to do so.

 

http://greensock.com/_js/jquery/jquery.ui.touch-punch.js

Failed to load resource: the server responded with a status of 404 (Not Found)

See the Pen yhEmn by GreenSock (@GreenSock) on CodePen

[rotationY 90 not stopping where expected]

Two questions about my sketch.

 

[1]

I expected my tween to rotation: 90 to stop directly on top of the white line in my sketch.  

What am I doing wrong?

Note: there are going to be many of these planes spinning around together so I applied "perspective" to the parent #a instead of transformPerspective (as described here https://greensock.com/css3/ )

 

[2] 

What values would I adjust to make the bottom of the red panel never dip below the bottom of the blue line?  It is okay if the panel swings above the top green line.  I want it to look like the "camera" is on the floor, watching a door open.

 

See the Pen bdQrVQ by jedierikb (@jedierikb) on CodePen

[progress question about duration 0 tweens]

Thanks!  I've many tweens where sometimes they have >0 durations, but sometimes they have to just jump to their destinations.  

 

I could check for duration before tweening and call set or to depending.  But it feels cleaner to just use duration 0.

[draggable on a child to move a parent?]

Is there an example of how you could use draggable on a child element to move its parent element (and the child element)?