Jump to content
GreenSock

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

glitch in css after GSAP animation

Recommended Posts

I am going to make a splashscreen with GSAP and fade into this bootstrap card. 

I stacked the fontawesome icons w css instead of making it in illustrator. 

My question is why there is a quick glitchy flash of the border surrounding the smaller second icon. You might have to refresh the screen to notice it. I am using chrome.  If its not noticeable in the above pen use this pen instead youll notice the glitch in the shape of the border radius surrounding the eye and its the same problem as the above pen. 

 

See the Pen VwZJwax by kravmaguy (@kravmaguy) on CodePen

 

Am I doing it this correctly? Do i even have to worry about the glitchy flash because I will make a GSAP splashscreen which will proceed this card so by the time it gets to it it should be fully loaded and I dont have to worry about the user seeing the glitch? 

 

See the Pen jONvVgJ by kravmaguy (@kravmaguy) on CodePen

Share this post


Link to post
Share on other sites
1 hour ago, greykrav said:

why there is a quick glitchy flash of the border surrounding the smaller second icon.

I see a visual glitch before the font icons load. Not sure what you're talking about related to the border...

 

1 hour ago, greykrav said:

Do i even have to worry about the glitchy flash because I will make a GSAP splashscreen which will proceed this card so by the time it gets to it it should be fully loaded and I dont have to worry about the user seeing the glitch? 

Most likely you don't have to worry about it, but why don't you just make the splash screen and see?

 

I'm not sure what you're wanting our help with here :) 

  • Like 1

Share this post


Link to post
Share on other sites
39 minutes ago, greykrav said:

please tell me how to fix this glitch, circled in red: 

 

Do you have a GSAP question? You probably have a problem in your css, like position.

*, *::before, *::after {
	position: relative;
}

 

 

  • Like 3

Share this post


Link to post
Share on other sites
On 10/17/2019 at 9:10 PM, OSUblake said:

Do you have a GSAP question?

I don't think its a GSAP question per say.. But can you please advise anyways.

How do I keep the button size static while the text is changing and also keep the width of the text inside it the same so that the icons do not change position inside the button while the text is changing. on line 64 in the html is a button with changing text. In the CSS section on line 186-192 ive added some stuff to deal with this. I have figured out how to keep the button size static but do not know how to prevent the icon stack from shifting around when the text changes. How can I prevent the icon from changing its position inside the button while the text is changing? 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×