I just got the new Macbook Pro not too long ago and noticed they had this intimately named featured called Force Touch.
Force touch, as it sounds, lets you touch things more intimately. The gist is this – there are sensors on the new touch pad that let you determine how hard the touch pad is touched, and has some API into that.
I admit, the API is kinda just for fun since only Safari 9 and new Macbooks have the feature. Still, I wanted to play more with ES6 and create a little API wrapper to make it easier and let this feature name to be a little less creepy.
After a little googling, I found an awesome blog post by Joshua Kehn that detailed more about using Force touch. I wanted to make a quick wrapper around it to do some fun effects and animations.
The idea is – we’ll have an API called
TheForce that we can attach handlers to for fun visual effects.
I wrote it up last night in a quick hurry. The gist is this:
- Attach to a DOM element
- Apply a glow to the element based applied pressure to touchpad
Code to attach a button named
you, and trigger it automatically:
1 2 3