Jump to content
Search Community

Text Glow

LewisOne 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

So, I wanted to animate a glow around some text, but was not happy with the size of the glow size and since css does not have spread like box shadows do I tried this quick fix:
 
TweenMax.set(".text", {
    textShadow:"10px 0px 20px rgba(255, 255, 255, 1)",
    textShadow:"-10px 0px 20px rgba(255, 255, 255, 1)",
    textShadow:"0px 10px 20px rgba(255, 255, 255, 1)",
    textShadow:"0px -10px 20px rgba(255, 255, 255, 1)"
});
 
However it only fires one of the actions (bottom glow with no top, right, or left)?
 
I thought that maybe it was just a css limit but when I did this it worked like a charm:
 
.text {
    text-shadow: 5px 0px 10px white, 0px 5px 10px white, -5px 0px 10px white, 0px -5px 10px white;
}

 

 

Still would be cool to animate the glow (make it pulse) but could not get the TweenMax textShadow to work.

 

Any Ideas?  I'm pretty darn sure I'm just formatting it wrong.

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