Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Last update: Dec 11, 2022

Overview

Pure CSS ripple effect (no JavaScript)

CSS-only implementation of Android Material design "ripple" animation on click event

Main advantage of this solution is that there is no DOM manipulation in order to create animation. That means this is faster - it doesn't use JavaScript or jQuery to animate.

This solution is also implemented in one of the biggest Bootstrap theming libraries Bootswatch in their Materia theme.

Demo

Installation

This library can be installed via npm

npm install css-ripple-effect

Or you can use yarn

yarn add css-ripple-effect --production

Or you can use bower

bower install css-ripple-effect

Or you can simply download it in your project, but that way you don't have the option to update if newer versions appear.

Supporters

BrowserStack: Live, Web-Based Browser Testing https://browserstack.com

Comments

Click functionality breaks when used on button with font-awesome inside
May be this is not an issue and something out of my own error but i'm unable to figure it out and hence would like to seek your help for same.

When trying to implement the code in ripple.min.css on a button, following issues occur for reasons unknown to me:

Click stops working! This is the button code:

It blinks rather than 'ripple'

This is what '.customBtn ' looks like: .customBtn { position: fixed; top: 50%; font-size: 8em; background-color: transparent; color: grey; outline: 0; border: none; }

This is what i've copied in my CSS (SCSS) from your code: .ripple { position: relative; overflow: hidden;

&:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, #000 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10,10); opacity: 0; transition: transform .5s, opacity 1s; }

&:active, &:after { transform: scale(0,0); opacity: .2; transition: 0s; } }

What is wrong in this?
opened by tusharshuklaa 2
Doesn't work with Bootstrap v4 dropdown menu

Adding ripple to the dropdown link, makes the caret-down disappear and the ripple is not centred vertically.

https://jsfiddle.net/aq9Laaew/197449/

Chrome, Firefox and Edge 0n Windows...

opened by badamsdev 1
Changed animated property from "background-size" to "transform: scale()"

IE is not able to animate "background-size", so animation property is now "transform: scale()" which gives the same visual effect.

opened by mladenplavsic 0
effect is not showing on bootstrap anchor tag button?

Issue

first of thanks for this pure CSS ripple effect, but there is some problem with it when using anchor tag <a class="btn btn-primary" href="login.html">Login</a> as a button, and clicking on the button, page redirect to login page, and the ripple effect is not showing.

Suggestion

when we click on button first ripple effect should show and then page get redirect :)

Hope this helps :)

opened by ajaymarathe 0
Dark shadow

At github is a demonstration with white shadow which is just a picture . How can i get a white shadown (like on Bootswatch) instead of a gray shadow ?

opened by gtbu 0
causes horizontal overflow issues on inline elements

I had an issue where I used this on general elements with no additional styles. Since is natively inline, the .ripple:after pseudoelement would take its size from the nearest block level element, but anchor its central coordinates with the . This led to horizontal overflow issues where there otherwise were none.

opened by anEffingChamp 1

Right clicking triggers the ripple

Probably want to restrict the ripple effect to only left click actions. Triggering the ripple on right click is misleading.

Tested in Windows 10 Chrome Version 55.0.2883.87 m (64-bit)

opened by Arkh1 1

Releases(1.0.9)

1.0.9(Jan 7, 2018)

Source code(tar.gz)
Source code(zip)
1.0.6(Feb 22, 2017)

Source code(tar.gz)
Source code(zip)

Owner

Mladen Plavsic

GitHub http://mladenplavsic.github.io/css-ripple-effect

A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).

Material Design Preloader!s A jQuery plugin that recreates the Material Design preloader (as seen on inbox). I was fascinated when I first saw the pre

376 Dec 29, 2022

Click effect inspired by Google's Material Design

Waves Click effect inspired by Google's Material Design http://fian.my.id/Waves/ Documentation Waves uses Situs to generate documentation. Here are so

3.5k Dec 23, 2022

Animation library that mimics CSS keyframes when scrolling.

Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B

580 Dec 30, 2022

JavaScript animation engine

anime.js JavaScript animation engine | animejs.com Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful AP

44k Dec 30, 2022

Accelerated JavaScript animation.

Velocity beta NPM: npm install velocity-animate@beta Docs https://github.com/julianshapiro/velocity/wiki IMPORTANT: The velocityjs.org documentation r

17.2k Jan 5, 2023

GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

15.5k Jan 8, 2023

CSS3 backed JavaScript animation framework

Move.js CSS3 JavaScript animation framework. About Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Be

4.7k Dec 30, 2022

🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

256 Sep 19, 2022

GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

15.4k Jan 5, 2023

Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and

5.9k Jan 2, 2023

Create scroll-based animation without JavaScript

Trigger JS Create scroll-based animation without JavaScript. Sometimes we want to update the CSS style of an HTML element based on the scroll position

1.1k Jan 4, 2023

React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

561 Dec 24, 2022

Theatre.js is an animation library for high-fidelity motion graphics.

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.

8.6k Jan 3, 2023

Making Animation Simple

Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing

255 Dec 5, 2022

Switch your nav's design on the fly

Midnight A jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content be

3.7k Dec 30, 2022

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

76.7k Dec 30, 2022

A simple and easy jQuery plugin for CSS animated page transitions.

Animsition A simple and easy jQuery plugin for CSS animated page transitions. Demo & Installation http://git.blivesta.com/animsition/ Development Inst

3.8k Dec 17, 2022

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

76.7k Jan 4, 2023

A lightweight JavaScript library for creating particles

particles.js A lightweight JavaScript library for creating particles. Demo / Generator Configure, export, and share your particles.js configuration on

26.7k Jan 8, 2023

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Related tags

Overview

Pure CSS ripple effect (no JavaScript)

CSS-only implementation of Android Material design "ripple" animation on click event

Demo

Installation

Supporters

Comments

Click functionality breaks when used on button with font-awesome inside

Doesn't work with Bootstrap v4 dropdown menu

Changed animated property from "background-size" to "transform: scale()"

effect is not showing on bootstrap anchor tag button?

Issue

Suggestion

Hope this helps :)

Dark shadow

causes horizontal overflow issues on inline elements

Right clicking triggers the ripple

Releases(1.0.9)

1.0.9(Jan 7, 2018)

1.0.6(Feb 22, 2017)

Owner

Mladen Plavsic

A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).

Click effect inspired by Google's Material Design

Animation library that mimics CSS keyframes when scrolling.

JavaScript animation engine

Accelerated JavaScript animation.

GreenSock's GSAP JavaScript animation library (including Draggable).

CSS3 backed JavaScript animation framework

🐿 Super easy and lightweight(<3kb) JavaScript animation library

GreenSock's GSAP JavaScript animation library (including Draggable).

Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Create scroll-based animation without JavaScript

React particles animation background component

Theatre.js is an animation library for high-fidelity motion graphics.

Making Animation Simple

Switch your nav's design on the fly

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

A simple and easy jQuery plugin for CSS animated page transitions.

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

A lightweight JavaScript library for creating particles