Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dennisvg

Strange slowly appearing flickering line at edge of SVG animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi GS,

 

This can be a bit of a difficult question; I hope not.

I've created a page with 24 different svg GSAP animated "audio players". (see: www.dennisvangaalen.nl/clockworks )

 

I used the Semplice module in wordpress as a framework with custom javascript for the players (all SVG is code).

 

Now I've noticed that at the edge of some of the players (of the most right column) a strange slowly appearing white flickering pixel line shows up, only when playing the timeline/audio.

 

It's only doing this in Chrome I believe. I found some things about -webkit-backface-visibility: hidden; 

-Tried to apply that to the SVG's.

-Plus did somehting like this (to see if maybe the SVG is not completely stable in width or so.. and some white of the background appears (?)):

 

.column, .row, .content-block, .sections, .content-container, .column-content, .content-wrapper, .container, #content-holder, .is-content, {
      background-color: #00000 !important;
      backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

 

- But it won't help

- The flickering line is not always visible; it has to do with scaling the browser as well

- Therefore I think it's most likely something with the Semplice template

- Or Chrome webkit

 

I attached a screendump to show what I see; in case you guys don't see anything happen (which would be great some how I believe)

 

Nonetheless I wanted to share this with you, since I'm breaking my head and maybe some one recognises this?

Hope you can help or clear things up for me.

 

(and btw– maybe my JS script is not one of the most efficient; it's how I was able to manage to make it work :-))

 

thanks,

Dennis

 

 

Screen Shot 2018-01-16 at 20.27.35.png

Link to comment
Share on other sites

Interesting project. Very cool.

 

I didn't see the flickering. I'm sure it exists as you say, but its very tough to trouble shoot these things. My best guess is just a weird browser rendering quirk. I really don't think this is something related to GSAP or that can be fixed with GSAP. 

 

If you can reproduce it on a smaller scale in CodePen or something perhaps we can take a deeper look. Can't really dive into your production site that well.

Link to comment
Share on other sites

@Carl Thank you and thank you very much for the quick response, much appreciated.

 

Yes, I indeed thought so too. I'll see what happens if I manage to reproduce it on a smaller scale; however I set up each player independently before copy them to the production environment. They all work(ed) fine.

 

I guess I'll go along with your best guess; which does help me – It's good to know you didn't see the weird line; and positive that I most probably didn't use GSAP incorrectly.

 

I think for now I know enough,

thanks again!

 

Dennis 

Link to comment
Share on other sites

I could not see any flickering either or a line on the side. Pretty cool animations!

 

Tested in Windows 10 in latest Chrome and latest Firefox :)

  • Like 1
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.

×