Share Posted May 22, 2014 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 Link to comment Share on other sites More sharing options...
Share Posted May 22, 2014 Hello richbai90, and Welcome to the GreenSock Forum! When i go to that link i get an error in the browser console: TypeError: r is undefined http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenMax.min.js Line 14 If possible, to better help you.. can you please setup a reduced example in codepen so we can see your code in action, in a live editable environment. Here is a video tut by GreenSock on how to create a codepen demo example. Thanks.. this way we can better help you and see the behavior you describe. Link to comment Share on other sites More sharing options...
Author Share Posted May 22, 2014 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. Link to comment Share on other sites More sharing options...
Share Posted May 22, 2014 By the way, I'd strongly recommend using z:1 instead of transform:"translateZ(1px)" just because it allows GSAP to skip a step internally (faster) and it keeps your code more concise. Remember, you can control each transform module independently with GSAP (x, y, z, scaleX, scaleY, rotation, rotationX, rotationY, skewX, etc.) - this is one of the big benefits of using GSAP. You can even overlap the timing of those tweens and it all works fine (that's impossible if you define everything in a single "transform" property like CSS does). 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 22, 2014 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. Link to comment Share on other sites More sharing options...
Share Posted May 22, 2014 You forgot to load TweenLite.js - that's the most basic/fundamental thing to the entire platform, and it handles instantiation of all GSAP-related classes. Link to comment Share on other sites More sharing options...
Author Share Posted May 22, 2014 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! Link to comment Share on other sites More sharing options...
Author Share Posted May 22, 2014 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. Link to comment Share on other sites More sharing options...
Share Posted May 22, 2014 Sure, that's the default behavior for tweens. Are you trying to put them all into a sequenced timeline or something? If so, there's no need to do that. Just fire off tweens at-will. In many situations, simple TweenLite.to(...) calls are all you need. Maybe: $(".square").hover(function() { TweenLite.to(...); }, function() { TweenLite.to(...); }); If you still need help, please create a codepen example that we can look at - sometimes it's difficult to troubleshoot blind or try to guess at what's happening in your code. Link to comment Share on other sites More sharing options...
Author Share Posted May 22, 2014 See the Pen xHAsm by anon (@anon) on CodePen 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. Link to comment Share on other sites More sharing options...
Share Posted May 22, 2014 If you look at Jacks hover() example above you can see how there are 2 anonymous functions.. the first one is the rollover (mouseenter) and the second is the rollout (mouseleave). You were missing the second hover() event anonymous function in your example. Here is a forked example of your codepen working: See the Pen EJrdb by jonathan (@jonathan) on CodePen This is what i changed: Notice how i added CSS position:relative to the #stage div, and gave it's children div's position:absolute. (this is very important so it takes your <div> tags out of the flow of the document, so they animate like they should) And I added the second anonymous function for the rollout (mouseleave) see this for more info on the jQuery hover() event handler. Also i added a new TimelineMax() in each anonymous function so it doesnt have to wait, creating a new tween on each hover in/out Does that help? 2 Link to comment Share on other sites More sharing options...
Author Share Posted May 22, 2014 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! Link to comment Share on other sites More sharing options...
Share Posted May 22, 2014 No worries.. we are glad to help! Link to comment Share on other sites More sharing options...
Author Share Posted May 22, 2014 If anyone is curious, here's the final outcome. Thanks again http://richbaird.net/3dFlip/fip.html 1 Link to comment Share on other sites More sharing options...
Share Posted May 22, 2014 Cool effect richbai90 Just an observation.. If you add force3D:true to your tweens.. you can force hardware acceleration. force3D is part of the CSSPlugin. Also have you looked into maybe animating the x (translateX) and y (translateY) property instead of top and left? By doing so you will be able to animate on a sub-pixel level for a smoother animation using x (translateX) and y (translateY). The left and top properties will cause pixel snapping when animating. Some great articles you should check out: Here is an awesome article by the Mighty Jack Doyle explaining about Myth Busting CSS Animations VS JavaScript And here is another article about sub-pixel animation by Paul Irish: Why Moving Elements With Translate() Is Better Than Pos:abs Top/left Nice Job though richbai90 Link to comment Share on other sites More sharing options...
Author Share Posted May 23, 2014 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. Link to comment Share on other sites More sharing options...
Share Posted May 23, 2014 I'm sorry richbai90, I must have replied yesterday before I had lunch. My brain cells were not firing like they should not paying attention about the z .. since your using translate3D().. my bad.. after you add force3D true .. you will notice that the translate3d() will become the silky smooth matrix3d() .. But good job Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now