Jump to content


Sonar effect css3 transform

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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.




Link to comment
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:


  • Like 3
Link to comment
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 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.