Search the Community
Showing results for tags 'translate translate3d'.
Found 1 result
-
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 { 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);