Jump to content
Search Community

How to get boxShadow: to work

TonyUK 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

HI,

 

I have been using GSAP JS successfully in an HTML5 canvas project to do this sort of thing:

TweenMax.to(navigation, 0.2, {scaleX:1.1, scaleY:1.1, ease: Power2. easeOut});

 

I am trying to play around and use some other effects, but having NO success with this:

TweenMax.to(navigation, 2, {boxShadow:"0px 0px 10px 10px black"});

 

Now i know that to use "boxShadow" i need to use the CSS Plugin, though as i have:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

in my html, that should be sufficient?

 

Can you please help me to apply the CSS effects to my elements that are loaded thus:

 

var navigation = new lib.navigation();
this.addChild(navigation);
navigation.x = 58;
navigation.y = 500;

 

Many thanks,

Tony

 

 

 

 

Link to comment
Share on other sites

Hi Tony and welcome to the GreenSock forums.

 

Please provide a reduced codepen samle that clearly demonstrates the issue. Is far easier to debug live code than a few snippets. Please take a look at this link:

 

 
Finally, since you're talking about canvas, I believe that the issue lies there, as the CSS Plugin is capable enough to parse box-shadow's complex strings.
 
 
I don't know how shadows work on the canvas spec or if you're using a library for that, that exposes an API to animate those values, but the vars you're passing in the config object do work in regular DOM elements. Again, a codepen sample will make everything more clear and speed up the support. We'll be waiting for it!!
  • Like 2
Link to comment
Share on other sites

HI Rodrigo,

 

Thanks for the prompt reply,

 

It's going to be rather difficult for me to illustrate the problem using codepen as it is a canvas project i am working on.

The elements that i am animating are in the canvas library and are referenced in the javascript code like this:

 

var navigation = new lib.navigation();
this.addChild(navigation);
navigation.x = 58;
navigation.y = 500;

 

which i can't illustrate using codepen?

 

Any thoughts?

Link to comment
Share on other sites

It will be very easy to illustrate using CodePen, that's the whole point. Go look at the video in the link Rodrigo posted.

 

And what canvas library are you using? I could be wrong, but I've never seen a canvas library that uses string a CSS-like string for shadows, let alone one that requires units like "px". You might want to go check if that's even part of the API. Shadows are usually set using something like this.

ctx.shadowColor = "#999999";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 10;
  • 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...