Jump to content
Search Community

GSAP Motion Path Animation is broke on Chromium based browser!

Mcan test
Moderator Tag

Recommended Posts

Hi, I am trying to create a reveal animation. I am not a beginner but even though I tried everything, I couldn't solve the issue. It works like a charm on Safari but not on Chromium browsers. When SVGs are moving, as soon as they overlap, the bug shows up. Note that if the scale of these SVGs are not big then there is no bug but as the purpose of the animation, the SVGs should be big enough to cover the whole page.

 

Note that to see the bug you have to go to the pen and make the result full screen with the link below. It somehow doesn't happen when the window is small.

 

Please help me, I really appreciate it. Thanks.

See the Pen WNgOJEm by xenoverseup (@xenoverseup) on CodePen

Link to comment
Share on other sites

Hi @Mcan. Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:
 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

I looked at your CodePen on a large screen in both Safari and Chrome and didn't notice anything different. Help?

 

  • Like 1
Link to comment
Share on other sites

17 minutes ago, GSAP Helper said:

Hi @Mcan. Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:
 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

I looked at your CodePen on a large screen in both Safari and Chrome and didn't notice anything different. Help?

 

 

Thanks for your reply!

 

Sorry for the vagueness but when I try to create the animation, just at the beginning, when svgs are overlapping, it seems like the renderer cannot decide which one to render first and there are some terrible flickers. I tried setting z-indexes for each one but still no hope. You can try refreshing the page in full-screen mode to see the bug. Here is a screen recording of the bug.

I

The bug happens when the flowers start to move. In this animation I have a bunch of paths which the flowers have to follow. What is the best and the most efficient way to achieve this? Note that it should be responsive, as well.

 

 

Link to comment
Share on other sites

Hi,

 

I can't see that particular issue neither on firefox nor chrome. Tested in Ubuntu 20 & 22, an iOS 16 iPad and an Android phone. On the phone there is some lag because is not the most powerful one though, but I can't seem to replicate the issue.

Link to comment
Share on other sites

Hi,

 

This is chrome on Ubuntu 22
https://i.imgur.com/rc8Ng78.mp4

 

This is Firefox in the same system:

https://i.imgur.com/afCSrev.mp4

 

As you can see it kind of looks the way it should 🤷‍♂️

 

What you could try is start with just one element and see how that goes, then start adding and maybe you'll find a breaking point of sorts.

Sorry I can't be of more assistance.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

9 minutes ago, Rodrigo said:

Hi,

 

This is chrome on Ubuntu 22
https://i.imgur.com/rc8Ng78.mp4

 

This is Firefox in the same system:

https://i.imgur.com/afCSrev.mp4

 

As you can see it kind of looks the way it should 🤷‍♂️

 

What you could try is start with just one element and see how that goes, then start adding and maybe you'll find a breaking point of sorts.

Sorry I can't be of more assistance.

Happy Tweening!

Thank you!

 

I guess it is just because of my system. Thanks for your time. It helps a lot. I already tried adding them one by one. But it didn't help with the bug. 

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.
×
×
  • Create New...