This is odd, I get this strange bug:
var mainTL = gsap.timeline();
mainTL.from(".text2", {duration: 0.5, x:"+=80px", autoAlpha:0, ease:"power4.out"}, 0.5)
.from(".phone", {duration: 1, scale:0.7, x:"+=250px", y:"+=400px", ease:"power2.inOut"}, 0.5);
I discovered it only happens when both the items start at 0.5. So If I change the code for one of them to 0.6 it's fine:
mainTL.from(".text2", {duration: 0.5, x:"+=80px", autoAlpha:0, ease:"power4.out"}, 0.5)
.from(".phone", {duration: 1, scale:0.7, x:"+=250px", y:"+=400px", ease:"power2.inOut"}, 0.6);
I've created gifs, as the codepen doesn't produce errors. Any tips appreciated