BoxShadow Effects

[_d3CipH3R_]

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.

[_d3CipH3R_]

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?

[Jonathan]

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?

[Carl]

Yeah, using bsBox5 was a mistake, its fixed now. 

 

here is the pulse effect working:

http://codepen.io/GreenSock/pen/hEoak?editors=001

[_d3CipH3R_]

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?

[_d3CipH3R_]

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

[Carl]

http://codepen.io/GreenSock/pen/hEoak

[_d3CipH3R_]

Thanks!

[_d3CipH3R_]

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

[Jonathan]

Did you look at Carl's example above:

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

 

He added events for mouseenter and mouseleave

[_d3CipH3R_]

Yes I have, thanks. It works fine now

[Jonathan]

Cool, glad you got it working!