CSShake is a CSS library for making elements appear to shake. Add its stylesheet, then add or remove classes on the element that needs visual feedback. section 5.3
A strum-driven animation can be built in a few steps:
- Calculate a duration from strum power, adding a 250-millisecond minimum. section 5.3
- Add shake, shake-constant, and shake-horizontal to the target element. section 5.3
- Add shake-little for weaker strums, then remove all animation classes when the timer expires. section 5.3
Animating a strummed string
A Web Harp string adds the base and directional classes, optionally adds shake-little, and schedules stopStrum() to remove them after the calculated duration. section 5.3
Listing 5.13. Adding CSShake classes to shake our strings when strummed
// file: components/string/string.js
strum(params) {
if (this.timer) { clearTimeout(this.timer); }
let dur = params.power * 10 + 250;
this.classList.add( #1
'shake',
'shake-constant',
'shake-horizontal');
if (dur < 500) {
this.classList.add('shake-little'); #2
}
this.timer = setTimeout( () => this.stopStrum(), dur);
}
stopStrum() {
this.classList.remove('shake', 'shake-constant', 'shake-horizontal',
'shake-little'); #3
}
Inspect the complete strum and cleanup implementation, including timer clearing, duration calculation, class changes, and animation removal. section 5.3
