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