Jump to content
Search Community

TranslateZ sends image flying off the page

richbai90 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

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

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).

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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? :)

  • Like 2
Link to comment
Share on other sites

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

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 :D

Link to comment
Share on other sites

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

I'm sorry richbai90, I must have replied yesterday before I had lunch. My brain cells were not firing like they should  :huh:  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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...