ionic-team / ionic-team/ionic-docs

content: add info about the ripple effect duration

Open
#1,593 0 comments 0 reactions 0 assignees View on GitHub
content
Dominant language
MDX
Stars
621
Forks
3.2k
Avg merge
1d 2h
Merged PRs (30d)
86

Description

_Original issue by @distante on [2020-08-16T08:46:00Z](https://github.com/ionic-team/ionic-framework/issues/21922)_

# Documentation

The ripple effect duration used in components like `ion-button` is not documented. It would be useful for some developers that want to trigger some animation orchestration starting with a button click.

---

I can do a PR for this but I am not sure which duration this effect has. From the [source code I would say something like `325ms`](https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/ripple-effect/ripple-effect.tsx#L66) but I am not really sure.
```
setTimeout(() => {
resolve(() => {
removeRipple(div);
});
}, 225 + 100);
```

Extra: what does that 225 and 100 mean?

Contributor guide

Open the contributing guide

Research direction

Start with core/src/components/ripple-effect/ripple-effect.tsx at the linked line and inspect how the 225 and 100 millisecond values are used. Confirm the effective ripple duration and what each value represents, then update the relevant Ionic documentation. Done means developers can find the duration and understand the timing values.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.