Translate render issue

[Makssshow 8 Likes (Newbie)]

Hey there!

I have an issue on all browsers, but safari is the worst. When I use

 

gsap.from(".element", {

x: -20, // or y or yPercent, whatever

scrollTrigger: {

trigger: ".trigger",

start: "top bottom",

end: "top 50%",

scrub: 0.1

},

});

 

Elements look like this. It will disappear after repeat animation and depends on scroll speed. How can I fix it?

 

Examples: https://discoverdesignstudio.com/ (mobile version in the bottom)

https://juliaciancifoundation.org/education/ (images moving from top to bottom, text)

 

[OSUblake 18,475 Likes (Superhero)]

It's very hard to troubleshoot a live shoot. Can you make a minimal demo that shows issue?

 

Outside of that, all I can really suggest is to try adding will-change: transform; to some of the elements you are animating. 

[Makssshow 8 Likes (Newbie)]

It works! Thanks a lot!