Jump to content


Translate render issue

Go to solution Solved by OSUblake,

Recommended Posts

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)


Screenshot 2021-12-08 at 17.25.30 1 Medium.jpeg

Screenshot 2021-12-08 at 17.27.33 Small.jpeg

Screenshot 2021-12-08 at 17.31.34 Small.jpeg

Link to comment
Share on other sites

  • Solution

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. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.