Jump to content
Search Community

glitch in css after GSAP animation

greykrav test
Moderator Tag

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

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

Link to comment
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
Link to comment
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? 

 

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