1355923 - [UX] Save to Pocket should have an associated animation

Status: RESOLVED FIXED

(Firefox :: General, enhancement, P1)

Description

[Jared Wein [:jaws] (please needinfo? me)]

Flagging needinfo from Amy for the spec.

Comment 1

[Amy Lee [:amylee] UX]

Attachment: Pocket Icon.mp4

Not sure if this needs an svg sprite sheet or can the animation be done with css since it's fairly simple.

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

Yeah, this will need a spritesheet due to the moving of the 'v' part of the Pocket icon.

Comment 3

[Sam Foster [:sfoster] (he/him)]

Yeah, if you could export the animation as .json we'll convert to SVG.

Comment 4

[Justin Dolske [:Dolske]]

FYI: we put bug 1355922 into the reserve backlog, but we would still like to finish the UX work here so it's ready to go if/when we re-elevate it.

Comment 5

[Amy Lee [:amylee] UX]

Attachment: Pocket - In Context.mp4

Comment 6

[Amy Lee [:amylee] UX]

Attachment: Pocket_Library.svg

Comment 7

[Amy Lee [:amylee] UX]

Attachment: Pocket_Library.json

Comment 8

[Amy Lee [:amylee] UX]

Attachment: Pocket Library.mp4

Comment 9

[Amy Lee [:amylee] UX]

Attachment: pocket assets.zip

Comment 10

[Amy Lee [:amylee] UX]

Attachment: pocket assets 2.zip

Comment 11

[Amy Lee [:amylee] UX]

Attachment: pocket assets.zip

Comment 12

[Amy Lee [:amylee] UX]

Attachment: pocket_library_v2.svg

Had to change the width to 19px when shifting icon 1px to right. The icon would get cut off otherwise when expanded.

Comment 13

[Amy Lee [:amylee] UX]

Attachment: pocket_library_v2.json

Comment 14

[Eric Pang [:epang] UX]

Marking as resolved, specs to follow for QA.

Comment 15

[Eric Pang [:epang] UX]

Attachment: SVGs + JSON Assets.zip

Updated pocket icon asset since it was being cut off on the edges before.