Jump to content


BoxShadow Effects

Recommended Posts

I've tried adding the effects from the following web page: http://www.greensock.com/css3/

Under the section boxShadow

I've noticed the target: greenPulse

As well as another target: bsBox5

Do both the targets refer to the same element/reference or are they different?

I've tried using this feature, but I keep getting the error that 'TweenMax is not defined'.

I will upload a code snippet on codepen if needed.

Link to comment
Share on other sites

See the Pen drtsk by _d3CipH3R_ (@_d3CipH3R_) on CodePen


It now gives me a 'illegal character' error.

Still haven't figured out the difference between the two targets above. Could the error perhaps be related to my misuse of the target?

Link to comment
Share on other sites

Hello _d3CipH3R_, and Welcome to the GreenSock Forums!


I tried your link from your 2nd post above and it goes to a codepen NOT FOUND page.


Regarding your questions in your 1st post above:


if you look at the element being animated in the browser inspector:

<div style="margin-top: 25px;" class="bsClipBox" id="bsBox5">green pulse</div>

You can see that the same bsBox5 references the id #bsBox5 which has a to() tween, which animates the elements background to black


greenPulse refers to the same element because the box-shadow is being applied on that element as well. You can see this if you inspect the element using the browsers Developer Tools. And then hover over the element and to see the CSS styles on the element change.


This is what the element looks like with the background and box-shadow on the element:

<div style="margin-top: 25px; box-shadow: 0px 0px 0px 0px rgb(0, 0, 0); background-color: rgb(85, 85, 85);" class="bsClipBox" id="bsBox5">green pulse</div>

Notice the style attribute on the element? When looking a the element in the inspector you can see how the box-shadow is being animated, by how the inline style has the box-shadow in there with its values updating.


Does that help?

  • Like 1
Link to comment
Share on other sites

Hi There,


Sorry about that. I figured out how to use it. That is why I deleted the Pen.

But I also need help figuring out how to stop the animation from playing.

I'm using the onmouseout trigger event. Any suggestions?

Link to comment
Share on other sites

I've tried using window.onmouseout but it doesn't seem to work to well. I will use the mouseleave trigger as an alternative

Link to comment
Share on other sites

Did you look at Carl's example above:

See the Pen hEoak by GreenSock (@GreenSock) on CodePen


He added events for mouseenter and mouseleave :)

Link to comment
Share on other sites

Yes I have, thanks. It works fine now

Link to comment
Share on other sites

Cool, glad you got it working!

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.