Jump to content
Search Community

Text Blur When Adding Pulse Effect to CTA

kevywalton test
Moderator Tag

Recommended Posts

Hey Folks,

 

A minor issue here that would be nice to resolve but not a major problem otherwise. I often use a pulsing effect on my CTA's in HTML5 banner Ads. However, the CTA text always goes a little blurry while the pulse happens. I've added a Codepen to showcase this issue. I have tried adding `font-smoothing: antialiasing` to the element but it doesn't help. Any ideas or is it even possible to get the text to stay sharp (in focus) while the CTA button is pulsing??

See the Pen abZNpyP by hermeticpoet (@hermeticpoet) on CodePen

Link to comment
Share on other sites

Hey Kevy.

 

I'm curious: why go through the trouble of using GSAP then not use GSAP for your animation? :) 

 

But besides using CSS properties like text-rendering, font-smoothing, using a different more responsive font (variable fonts may do better, not sure) there's not much we can add. We're pretty focused on GSAP here :) Another option is to convert it to SVG and scale that instead.

Link to comment
Share on other sites

Hey @ZachSaucier The reason for using classes (javascript) and not GSAP has to do with how the animation is fired (not important here but there was a reason). The codepen is just a sample to show what's going on here, its not fully representative. Unfortunately, I cannot use responsive fonts as the font being used in each case is typically a custom font created (or chosen) by our clients! With regards to using SVG, the text used on the CTA is typically dynamic and coming from a feed. Therefore, SVG text (if that's what you mean, rather than an SVG image) could be tricky.

Thanks anyway, I wasn't too confident that there was much could be done here. I appreciate your assistance and time ;-)

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