Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
icedge

How to add box shadow pulse effect?

Recommended Posts

Hello, can anybody help me with one my idea?

I use opencart shop and i add shadows to my boxes. I want to add pulse multicolor effect to the shadows. Ca anybody help me with this?

Link to comment
Share on other sites

have you looked at this:

 

http://www.greensock.com/css3/

 

scroll down to box shadow example  and you will see that pulse effect

TweenMax.fromTo(greenPulse, 0.7, {
boxShadow: "0px 0px 0px 0px rgba(0,255,0,0.3)"
}, {
boxShadow: "0px 0px 20px 10px rgba(0,255,0,0.7)",
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});​

also check this out might give you ideas..

 

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

Link to comment
Share on other sites

Hi and welcome to the forums,

 

The easiest way I can think of is loop through all the objects and create a particular timeline for each and play it based on the event you need. The following example is build like that, feel free to fork it and adapt it to what you need:

 

See the Pen zcAxh by rhernando (@rhernando) on CodePen

 

If is not what you have in mind please let us know.

 

Hope this helps,

Rodrigo.

Link to comment
Share on other sites

have you looked at this:

 

http://www.greensock.com/css3/

 

scroll down to box shadow example  and you will see that pulse effect

TweenMax.fromTo(greenPulse, 0.7, {
    boxShadow: "0px 0px 0px 0px rgba(0,255,0,0.3)"
}, {
    boxShadow: "0px 0px 20px 10px rgba(0,255,0,0.7)",
    repeat: -1,
    yoyo: true,
    ease: Linear.easeNone
});​

also check this out might give you ideas..

 

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

 

Thank you for the answere. I see this but i don't know how to implement step by steb. I am not so good with javascrypt and css. I have basic skills. Can you help me to integrate this pulse effect in my opencart theme?

Link to comment
Share on other sites

Hi and welcome to the forums,

 

The easiest way I can think of is loop through all the objects and create a particular timeline for each and play it based on the event you need. The following example is build like that, feel free to fork it and adapt it to what you need:

 

See the Pen zcAxh by rhernando (@rhernando) on CodePen

 

If is not what you have in mind please let us know.

 

Hope this helps,

Rodrigo.

 

Hello, and thank you. Yes this is a basic idea, but i dont know how to integrate to my opecart theme.

Link to comment
Share on other sites

i can take a look... but you have to provide a link to your open cart site and explain what element gets the pulse box shadow effect?

Link to comment
Share on other sites

Hi,

 

The only shop app I've worked with is os commerce, but since most of this platforms are CMS they tend to work in the same way. That includes wordpress, so you could take a look at this:

 

http://codeaway.info/incorporating-greensock-ap-js-into-wordpress/

 

It might give you a good start.

 

Hope this helps,

Rodrigo.

Link to comment
Share on other sites

i can take a look... but you have to provide a link to your open cart site and explain what element gets the pulse box shadow effect?

 

Thank you. I write you a message.

Link to comment
Share on other sites

Hi,

 

The only shop app I've worked with is os commerce, but since most of this platforms are CMS they tend to work in the same way. That includes wordpress, so you could take a look at this:

 

http://codeaway.info/incorporating-greensock-ap-js-into-wordpress/

 

It might give you a good start.

 

Hope this helps,

Rodrigo.

 

Thank you Rodrigo,

I read the tutorial, and i think that the wordpress is like other cms, but i dont understand what javascript file i need to create? I add a CDN link in the header, but i dont know wat to do now.

Link to comment
Share on other sites

i noticed in on your site you have multiple instance scripts of GSAP.

 

If you include  the TweenMax js file.. you dont need to include the CSSplugin, EasePack, and TweenLite js files...

 

When you include TweenMax.. it includes all files (CSSplugin, EasePack, and TweenLite)

 

try just including ONLY the script js file TweenMax.min.js (http://cdnjs.cloudfl...TweenMax.min.js)

 

remove the script tags for (CSSplugin, EasePack, and TweenLite)

Link to comment
Share on other sites

try adding this after your document ready in your common.js... after line 1:

var $stripGrid = jQuery('header > .strip.grid_12');
$stripGrid.on("mouseenter",function(){
    TweenMax.fromTo($stripGrid, 0.4, {
             boxShadow: "6px 7px 14px 7px rgba(255,163,163,0.9)"
        }, {
             boxShadow: "4px 5px 12px 5px rgba(255,163,163,0.4)",
             repeat: -1,
            yoyo: true,
            ease: Linear.easeNone
        });​
}).on("mouseleave",function(){​
        TweenMax.to($stripGrid, 0.4, {
             boxShadow: "6px 7px 14px 7px rgba(255,163,163,0.9)",
             yoyo: true,
            ease: Linear.easeNone
       });​
});

you have to adjust teh timing and the box-shadow properties to and from, i based them off of your original box-shadow value

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