Jump to content
GreenSock

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

Sonar effect css3 transform

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 3
Link to post
Share on other sites

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 :)

Link to post
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.

×