Both translate and translate3d being applied but only translate Tweening

[RealMakAttak]

 Hello Forum,

 

Hope someone can help, I've looked everywhere to no avail.

 

I am translating the "y" position below, using a tweenmax timeline within scrollmagic, it works fine but on mobile it looks very jittery. I thought it must be something to do with hardware acceleration now being activated. When looking at the resulting code in developer tools, what I can't under stand is why the actual animation is implemented, inline, like this:

 

element.style {

1. transform: translate(0%, -68.0272%) translate3d(0px, 0px, 0px);
   

}

 

 

I tried using both a tiny z value, and force3d to try and get the translate3d to animate but neither worked. I didn't even realise it was possible to do both translate and translate3d at the same time.

 

Why is GSAP doing this? How can I change it to just use translate3d?

 

 

Here is the code below that I am using:

 

 

var secondtl = new TimelineMax();

           secondtl.from(".image-two", 2, {y:'20%', ease:Power0.easeNone}).to(".image-container-two", 2, {y:'-100%', ease:Power0.easeNone}).to(".image-two", 2, {y:'80%', ease:Power0.easeNone}, "-=2");

            

            

            var triggerElementOneOuterHeight = $("#explanation-box-one").outerHeight(true);

            

 

            var secondOne = new ScrollMagic.Scene({

 

                triggerElement: "#explanation-box-one",

                triggerHook: 1,

                offset: triggerElementOneOuterHeight,

                duration: "200%"

 

            })

         .setTween(secondtl)

         .addIndicators()

         .addTo(controller);

[Carl]

The short answer to your question is that percentage based values must be set via translate as translate3d will only honor px-based values.

 

GSAP does normal x/y transforms using translate3d() or matrix3d() (depending on browser support and other conditions).

However, if you use a percentage value for x/y it will push that over to translate(). In your case GSAP uses translate(X%, Y%) to move the element based on the values you provided AND uses translate3d to get the element layerized and hardware-accelerated.

 

Its actually a very cool benefit to have independent and simultaneous control over % and px-based values. 

Check out this release post from v 1.13: http://greensock.com/gsap-1-13-1 for more info and demos showing the benefits.

[RealMakAttak]

I've been messing around with this and it seems that when you use pixel values, you get the 3dtransform but when you use % values, you get the usual transform.

 

Anyone know why that is?

[RealMakAttak]

The short answer to your question is that percentage based values must be set via translate as translate3d will only honor px-based values.

 

GSAP does normal x/y transforms using translate3d() or matrix3d() (depending on browser support and other conditions).

However, if you use a percentage value for x/y it will push that over to translate(). In your case GSAP uses translate(X%, Y%) to move the element based on the values you provided AND uses translate3d to get the element layerized and hardware-accelerated.

 

Its actually a very cool benefit to have independent and simultaneous control over % and px-based values. 

Check out this release post from v 1.13: http://greensock.com/gsap-1-13-1 for more info and demos showing the benefits.

 

Completely understood Carl, yes that is beneficial. I didn't realise I would get a hardware acceleration effect without translate3d() having a value other than 0 - there must be something else causing the jittering.

 

Thank you very much for your help.