Sonar effect css3 transform

[Mgonzales]

Hi,
Is possible this css3 animation with gsap?

http://jsfiddle.net/nGsk3/1/

 

Regards.

[Rodrigo]

Hi

 

Definitely, you can set up two divs with border-radius:50% and box-shadow and tween their width and height or scale them up.

 

You'll have to give me some hours to post an example.

 

Best

Rodrigo

[Carl]

Its a little difficult for me to decipher all the css animation parameters, timing as percentages and what parts of the effect are handled by :hover and which are handled by the keyframes etc. Its just because I never use css animations.

 

I think this illustrates the basic idea though:

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

[Jonathan]

Great code pen Carl !!!

 

the :hover and :after pseudo classes trigger the transition of the transform property.

 

also the css animations are triggered to animate the box-shadow and opacity on the :hover pseudo class as well.,, looks like he created 2 :hover pseudo selectors to separate his css transitions from his css animations.

 

the animation shorthand property is:

animation: sonarEffect 1.3s ease-out 75ms;

// values are

animation: <keyframe name> <time/duration> <easing> <time/delay>;

when using the animation shorthand property the 2nd 'time' value is used as the delay.

 

but COOL css to GSAP codepen Carl

[Mgonzales]

Truly GSAP is the most potent solution.

Thank You!