Jump to content
Search Community

textShadow/boxShadow animation with object

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

Hallo, we are working on a project using GreenSock,

 

and we are wondering how to animate textShadow or boxShadow with objects.

/* this is working */
var element = document.getElementById('animate');
                
TweenMax.to(element, 1, {
    textShadow: "10px 10px 10px rgb(0, 0, 0)",
    boxShadow: "0px 0px 5px 2px #F00"
});


/* this is not working */
TweenMax.to({
    textShadow: "10px 10px 10px rgb(0, 0, 0)",
    boxShadow: "0px 0px 5px 2px #FFF000"
}, 1, {
    textShadow: "10px 10px 10px rgb(255, 255, 0)",
    boxShadow: "0px 0px 5px 2px #FF0000"
});


/* this is working */
TweenMax.to({
    textShadowAlpha: 1,
    textShadowH: 1,
    textShadowV: 1,
    textShadowBlur: 1,
    textShadowColor: "rgb(0, 0, 0)",
}, 1, {
    textShadowAlpha: 1,
    textShadowH: 1,
    textShadowV: 1,
    textShadowBlur: 1,
    colorProps: {
        textShadowColor: "rgb(255, 255, 0)",
    },
    onUpdate: function() {
        var textShadow = this.target.textShadowH + "px " + this.target.textShadowV + "px " + this.target.textShadowBlur + "px " + this.target.textShadowColor;
        element.style.textShadow = textShadow;
    }
});

With the colorProps animation we managed to let it work with objects. Would it be possible to get help in animating objects/advices on the use of the plugins/Examples which are working?

 

Thanks a lot for the support,

Movad

 

 

Link to comment
Share on other sites

Like Diaco, I'm struggling to understand what help you need, especially since you have 2 working examples already.

 

/* this is working */
var element = document.getElementById('animate');
                
TweenMax.to(element, 1, {
    textShadow: "10px 10px 10px rgb(0, 0, 0)",
    boxShadow: "0px 0px 5px 2px #F00"
});

Yes, and it should. Since element is a DOM elment and textShadow and boxShadow are both CSS properties, GSAP pushes those values off to the CSSPlugin which has special logic built in for parsing those complex string values ("10px 10px 10px rgb(0, 0, 0)"

 

 

/* this is not working */
TweenMax.to({
    textShadow: "10px 10px 10px rgb(0, 0, 0)",
    boxShadow: "0px 0px 5px 2px #FFF000"
}, 1, {
    textShadow: "10px 10px 10px rgb(255, 255, 0)",
    boxShadow: "0px 0px 5px 2px #FF0000"
});

Yes, this should not work. Unlike the first example, GSAP sees the target as a generic object (not a DOM element) it is expecting that any value you tween is a number. You are passing in complex strings and it has no idea what to do with those values. 

 

 

/* this is working */
TweenMax.to({
    textShadowAlpha: 1,
    textShadowH: 1,
    textShadowV: 1,
    textShadowBlur: 1,
    textShadowColor: "rgb(0, 0, 0)",
}, 1, {
    textShadowAlpha: 1,
    textShadowH: 1,
    textShadowV: 1,
    textShadowBlur: 1,
    colorProps: {
        textShadowColor: "rgb(255, 255, 0)",
    },
    onUpdate: function() {
        var textShadow = this.target.textShadowH + "px " + this.target.textShadowV + "px " + this.target.textShadowBlur + "px " + this.target.textShadowColor;
        element.style.textShadow = textShadow;
    }
});

The reason this works is because your target is a properly formed object which mostly has properties with numeric values. TweenMax has no problem animating these. However in the case of textShadowColor: "rgb(0, 0, 0)", that value is not a number it is a complex string that represents a color. You were correct in passing that value off to ColorPropsPlugin, which was built to specifically parse the string and animate the individual RGB values and re-construct the string for you to apply to your textShadow string. 

  • 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.
×
×
  • Create New...