Makssshow Posted December 8, 2021 Share Posted December 8, 2021 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) Link to comment Share on other sites More sharing options...
Solution OSUblake Posted December 8, 2021 Solution Share Posted December 8, 2021 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. 2 Link to comment Share on other sites More sharing options...
Makssshow Posted December 13, 2021 Author Share Posted December 13, 2021 It works! Thanks a lot! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now