Jump to content
Search Community

Trouble with fromTo and translate3d

dblaise 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

Hi there,

 

I'm having a bit of trouble using TweenMax, TimelineMax and fromTo. Here's my code:

 

in_from = {
    'transform': 'translate3d(100%, 0, 0.1)'
};
in_to = {
    'transform': 'translate3d(0%, 0, 0.1)'
};
self.state.tween_in = TweenMax.fromTo(
    self.target,  // This is a DOM object
    self.deck.props.transitionSpeed,
    in_from,
    in_to
);
 
I'm pretty sure I'm using it correctly. I think I am because if I use just .to() it works correctly. :-/
 
Thanks,
 
Dave
Link to comment
Share on other sites

Hello dblaise, and Welcome to the GreenSock Forums!

 

If you are using any from, fromTo, staggerFrom, or staggerFromTo ..

 

Then you probably need to add the special property immediateRender:false.

 

fromTo, staggerFrom, or staggerFromTo tweens have immediateRender set to true by default.. so they run immediately at runtime.

 

Taken from TweenMax Docs:

  • immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, set immediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

If possible can you set up a codepen example so we can see your code in action to better help you.

 

Here is a video tut by GreenSock on How to create a demo codepen example.

 

:)

Link to comment
Share on other sites

I believe your problem to be is that your using negative percentages instead of pixels for the first parameter of your translate3d() transform. Try using pixels and see if you have the same behavior.

 

And just for your own information, The CSS property equivalent in GSAP are:

 

translateX = x

translateY = y

translateZ = z

rotateX = rotationX

rotateY = rotationY

rotateZ = rotation

 

If you set force3D:true as a special property.. it will force hardware acceleration and use matrix3d() for better performance

  • Like 1
Link to comment
Share on other sites

Yah the pixels work, I noticed that a while ago but my particular implementation does require percentages. Does Greensock not support that? I could easily revert to using translateX but translate3d() is proven to be more efficient. I need to squeeze every last bit of performance I possible can at this point.

 

Let me give this another shot and I'll get back to you.

Link to comment
Share on other sites

Hi Dave,
 
Sure you can use percentages, just use GSAP native syntax Jonathan mentioned, try this in your code:

var t1 = TweenMax.fromTo(
  document.getElementById('redBox'),
  1,
  {
    x:"-100%",
    opacity: 0,
    immediateRender: false,
    force3D:true
  },
  {
    x:"0%",
    opacity: 1
  }
);

var t2 = TweenMax.fromTo(
  document.getElementById('blueBox'),
  1,
  {
    x:"-100%",
    opacity: 0,
    immediateRender: false,
    force3D:true
  },
  {
    x:"0%",
    opacity: 1
  }
);

As Jonathan pointed force3D is a replacement for adding a translate z value, that works only for that particular element.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Actually, a little clarification. We don't support percentage-based tweens for translations (2D or 3D).

 

Take a look at this demo: http://codepen.io/GreenSock/pen/vxupf

 

It has 2 tweens, one % (red) one px (blue).

They are both paused halfway through. 

You'll see the percentages are ignored, and the tween uses px values in the matrix3d.

 

Here's a little background if interested: http://forums.greensock.com/topic/8148-animating-x-with-percentage/?hl=percentage

  • Like 2
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...