Jump to content
GreenSock

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

Lines appearing after animation (issue on Chrome, Opera)

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

On Chrome and Opera after animating (opening) div (door) lines around that div appears. Tried adding translateZ(0), but then even worse - lines appears after page loads, you don't even need to animate.. On Mozilla and Edge seems fine.

 

Can GSAP fix this issue?

 

I tried adding something like this on hover event:

TweenMax.to(".door", 2,{rotationY:13, transformPerspective:300, transformStyle:"preserve-3d",repeat:1, yoyo:true}});

 but doesnt work at all..

 

Thanks,

 

Mantvydas

See the Pen KoYPEP by MantvydasBinderis (@MantvydasBinderis) on CodePen

Link to comment
Share on other sites

I can't see anything and I'm using a Chromium browser, could you take a screenshot please?

Link to comment
Share on other sites

Hm, your codepen doesn't seem to use GSAP at all. 

 

Strangely, I noticed that adding "border: 1px solid black" to the door seemed to clear things up in my browser at least. Does that help on your end?  

Link to comment
Share on other sites

Here You can see these lines.

Sorry Jack, I just tried to add GSAP on main code, didnt add to codepen.

 

And with border still the same. Can it be that only on my pc these lines appearing? 

 

How I can make same action using GSAP? Or for such animation there is no need to use GSAP?

lines.JPG

Link to comment
Share on other sites

I don't see those lines, sorry. But here's a similar animation with GSAP:

See the Pen BrEaWX?editors=0010 by GreenSock (@GreenSock) on CodePen

Sounds like a browser rendering issue, possibly related to your video card. Perhaps you'll need to adjust the size of the door so that it's a pixel (or half pixel) larger in each direction. 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hmm,  when I removed 'transition: all 1s ease;',  ofc there is no more animation, but lines are gone!

Link to comment
Share on other sites

6 minutes ago, Mantvydas said:

Hmm,  when I removed 'transition: all 1s ease;',  ofc there is no more animation, but lines are gone!

 

That's probably because there's no more 3D transforms on the element. When there are any 3D transforms, most browsers treat it COMPLETELY differently from a rendering perspective, layerizing it and pushing it over to the GPU to handle in 3D space. 

  • Like 1
Link to comment
Share on other sites

I can see the lines in Chrome on my mac in both the original and gsap version. They don't appear in Safari or Firefox.

 

They appear and disappear depending on window size, sometimes top bottom sometimes left right sometimes all around. I've seen it before on other '3d' objects in chrome where items need to line up perfectly, it's a real pain. A subpixel rendering issue maybe?

  • Thanks 1
Link to comment
Share on other sites

Played with this a bit and ended up with a rather bizarre solution.

 

I added an extra 2 pixels to the size of the door then offset it -1px top bottom which fixed the outline issue however Chrome wasn't done messing up yet. At least not on my machine. Another subpixel display anomaly presented as a semitransparent horizontal line across the door at about 75% of the way down that rotated with the animation. So I duplicated the door object over top of itself and it appears to render solid.

 

Inspired by a photoshop trick I use to make semitransparent pixels more opaque, duplicate the layer a few times and flatten them together.

 

Of course to the people who couldn't see the issue to begin with it looks like I did nothing at all. :shock:

 

See the Pen vRMKNa by Visual-Q (@Visual-Q) on CodePen

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Nice work, @Visual-Q. Very odd that you have to do all that just to get Chrome to render properly. Sheesh. I actually did see that odd line about 75% of the way down the door. SO WEIRD! 

  • Like 1
Link to comment
Share on other sites

Nice work Visual-Q.

 

I was reading this post on Stack Oveflow and was playing around with the css outline property with an inset-style to try and get this to work.

  • Like 2
Link to comment
Share on other sites

7 minutes ago, KerryRuddock said:

I was reading this post on Stack Oveflow and was playing around with the css outline property with an inset-style to try and get this to work.

 

Thanks I'll check it out.

Link to comment
Share on other sites

I'm not too familiar with some of the more advanced rendering options but could css will change or perhaps window.requestAnimationFrame() be used to help Chrome render these things better?

Link to comment
Share on other sites

It boggles my mind that they put a man on the moon in less than a decade when the total computing power of North America was probably less than a single iPhone and after twenty some years the biggest tech companies in the world still can't manage to get css to render consistently.

  • Like 1
  • Haha 3
Link to comment
Share on other sites

13 hours ago, Visual-Q said:

It boggles my mind that they put a man on the moon in less than a decade when the total computing power of North America was probably less than a single iPhone and after twenty some years the biggest tech companies in the world still can't manage to get css to render consistently.

Was thinking the same.

 

Thank you for spending your time just to help me out. I really appreciate it :)

 

You said "I've seen it before on other '3d' objects in chrome where items need to line up perfectly".

What you mean by saying items need to line up perfectly? Line up with what? 

 

Sorry for asking these kind of questions, I am still kind of beginner in coding.

 

Link to comment
Share on other sites

21 minutes ago, Mantvydas said:

You said "I've seen it before on other '3d' objects in chrome where items need to line up perfectly".

What you mean by saying items need to line up perfectly? Line up with what? 

 

Basically where an object on a 3d layer should be flush against some other element.

 

For instance I had a grid of elements that were flush against one another and I was using a card flip/hover effect that kept introducing spaces similar to your outline problem. 

  • Thanks 1
Link to comment
Share on other sites

Yesterday when I removed  'transition: all 1s ease;' and animate it with GSAP,  these outline  'ghost pixles' gone, but there is one last problem with that door animation. When I open the door on Mozilla, top and bottom lines get pixelated, not smooth at all while on all other browsers these top and bottom lines of the door are much more smoother.

Link to comment
Share on other sites

Please try adding this to your .door CSS:

 

outline: 1px solid transparent;

 

Happy tweening.

:)

 

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

25 minutes ago, PointC said:

Please try adding this to your .door CSS:

 


outline: 1px solid transparent;

 

Happy tweening.

:)

 

It really smoothed things up on Mozilla. Thanks Craig!

  • Like 2
Link to comment
Share on other sites

46 minutes ago, Mantvydas said:

It really smoothed things up on Mozilla. Thanks Craig!

 

If you're able to post the final solution as a pen or link I'd be interested in seeing it.

Link to comment
Share on other sites

Sure Visual-Q, here you go.

 

See the Pen KoYPEP?editors=0110 by MantvydasBinderis (@MantvydasBinderis) on CodePen

 

Actualy nothing helped to me so I finally found my own small hack.

To parent div I added:

border:1px solid black;

And for children (door) I added 1px extra to the height and 2px extra to the width and also I set left to -1px.

And voilà! Its worked for me, no more those ugly outlines :)

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

×