richbai90
richbai90's Achievements
1
Reputation
-
Awesome! Thanks that helps a lot.
-
Does anyone know if it's possible to assign a label to a sequence when that sequence is already relative to another label? for instance: tl.to("#redBox", 1, {x:550}, "start") .to("#blueBox", 1, {x:550}, "start+=0.05", "second") .to("#greenBox", 1 {x:550}, "second+=1"); You can see the codepen here http://codepen.io/anon/pen/vLtlg But from this snippit you see that the bluebox starts relative to start, and I want greenbox to start relative to bluebox. Is this possible?
-
Thanks for the tips I'll definitely add the force 3d onto the properties. The top and left aren't being animated though, z is. The top and left properties are there to keep my images in the right place while being positioned absolutely. These smaller images are actually being cut up on the fly from a larger image and placed into the DOM. Thanks again.
-
If anyone is curious, here's the final outcome. Thanks again http://richbaird.net/3dFlip/fip.html
-
yes so very much! Thank you, I know I was missing the out, I was still trying to get the synchronous in to work. But the real issue was creating a new timeline object so it doesn't have to wait. When I think about it, that actually makes perfect sense. Thank so much!
-
http://codepen.io/anon/pen/xHAsm This reproduces the issue I am having. In this example there may not be a reason for building the elements in memory the way I have, however it is absolutely imperative in my real world scenario which can be seen here http://richbaird.net/3dFlip/fip.html To see the issue, try to hover over both of them quickly. The second must wait for the first to finish.
-
Okay I got that working thanks to your help. I included TimelineLine, TimelineMax and CSSPlugin script files and now it works as expected. I also per your suggestion switched to just using Z:1 instead of the entire transform object. This works great and thanks so much. I did have one more question, right now when I hover over one of the squares, and then another, I have to wait until the first animation is finished before the next one begins. What I would prefer is to have these all occur simultaneously when the mouse hovers over it. Ideally I would like to interrupt the animation and animate it from its current value wherever it is back to initial values. Is there a way to accomplish this? Thanks again for all your help.
-
Oh. Okay, sorry I'm still learning this, and moving away from jquery animations which is what I used to use. This seems much more robust and functional. Let me try your suggestions with a local copy of the files and I'll let you know if I'm still having the issue. Thanks!
-
Thanks, I'll do that. Maybe you can help with this newest issue, I keep getting TimelineMax is not defined when I use a local copy of the GSAP file. This is my code <!DOCTYPE html> <html> <head> <title>test</title> <link rel="stylesheet" href="main.css"/> <script src="greensock-v12-js/src/uncompressed/TimelineMax.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="flip.js"></script> </head> <body> <canvas id="myCanvas"> </canvas> </body> </html> and the JS in the flip.js file var tl = new TimelineMax(); CSSPlugin.defaultTransformPerspective = 200; I keep getting undefined when trying to assign tl to a new TimelineMax object.
-
I would love to create a codepen, but the javascript requires me to load an image onto a canvas element which breaks Same Domain Origin policies. Give me 2 seconds to update that code with a local copy of greensock.
-
I'm using the greensock animation library to animate the translateZ property of an image. This is my code: $("<img />") .attr({ src: piece, class: "pieces" }) .hover(function() { tl.to($(this), 1, {transform:"translateZ(1px)"})}, function() { tl.fromTo($(this), 1, {transform: "translateZ(0px)"}) }) .load(function () { _stageElement.append($(this)); }) } But instead of stopping at 5px it flies completely off the screen. Does anyone know what's happening here and why? Also if it's important after the image flies off the screen, it comes back to its original location, but the hover property doesn't have any effect anymore. I'm not sure if this is a greensock issue or a jquery issue. Here's an example to see what I mean http://richbaird.net/3dFlip/fip.html
