Skip to content

Commit 4b6fc71

Browse files
authored
Lower the intensity of the protractor handle hover animation (#1426)
## Summary: During a playtest, Nicole noted that the rotation handle for the new interactive graph protractor had a hover animation that felt out of place. The animation was faster than the hover animation for movable points. The protractor handle also enlarged more than the points do when you hovered over it. This commit brings the protractor handle animation in line with the movable point animations. Issue: none Test plan: Copy this data into the interactive graph flipbook: ```json {"content":"**Construct a $130^\\circ$ angle.**\n\n[[☃ interactive-graph 1]]\n\n\n","images":{"https://ka-perseus-images.s3.amazonaws.com/02564832cdaa56aa507437df41dd13e1fefbe595.png":{"height":160,"width":398},"https://ka-perseus-images.s3.amazonaws.com/37521922ea42bbbf67622075e1ea51e095f37479.png":{"height":291,"width":401}},"widgets":{"interactive-graph 1":{"alignment":"default","graded":true,"options":{"backgroundImage":{"bottom":0,"left":0,"scale":1,"url":null},"correct":{"coords":[[6.662476544422285,-1.0599696426100849],[0,-9],[-7.530523827277034,-8.999999999999998]],"match":"congruent","showAngles":false,"snapDegrees":5,"type":"angle"},"graph":{"showAngles":false,"snapDegrees":5,"type":"angle"},"labels":["x","y"],"markings":"none","range":[[-10,10],[-10,10]],"rulerLabel":"","rulerTicks":10,"showProtractor":true,"showRuler":false,"step":[1,1]},"static":false,"type":"interactive-graph","version":{"major":0,"minor":0}}}} ``` The protractor handle animation should feel unobtrusive. Author: benchristel Reviewers: jeremywiebe, nicolecomputer Required Reviewers: Approved By: jeremywiebe Checks: ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1426
1 parent 9a3bce3 commit 4b6fc71

File tree

2 files changed

+7
-2
lines changed

2 files changed

+7
-2
lines changed

.changeset/few-trainers-march.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@khanacademy/perseus": minor
3+
---
4+
5+
Tweak the animation of the protractor rotation handle. It's now slightly slower and the magnification is less extreme.

packages/perseus/src/widgets/interactive-graphs/protractor.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
/* `pointer-events: all` is needed to make the hit target the size of the
44
* entire <g> element and not just its visible subelements */
55
pointer-events: all;
6-
transition: transform 0.1s ease-out;
6+
transition: transform 0.15s ease-out;
77
}
88

99
.MafsView .protractor-rotation-handle:hover {
10-
transform: scale(1.3);
10+
transform: scale(1.2);
1111
}
1212

1313
.MafsView .protractor-rotation-handle-arrow-arc {

0 commit comments

Comments
 (0)