1353434 - [ux] New download animation for photon + SVG assets

Status: RESOLVED FIXED

(Firefox :: Theme, enhancement, P1)

Description

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

The new download animation uses a narrower arrow. We will need the SVG asset for this so we can use it in the animation.

Comment 1

[Amy Lee [:amylee] UX]

Attachment: download icon reference.mp4

Comment 2

[Amy Lee [:amylee] UX]

Attachment: data.json

I've exported a json file to be converted into an SVG sprite. Let me know if this works.

Comment 3

[Amy Lee [:amylee] UX]

(In reply to Amy Lee [:amylee] UX from comment #2)
> Created attachment 8859288 [details]
> data.json
> 
> I've exported a json file to be converted into an SVG sprite. Let me know if
> this works.

Comment 4

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

Sam, are you able to put this in to AE or do you need more?

Comment 5

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

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #4)
> Sam, are you able to put this in to AE or do you need more?

I've got the source file from :amylee and I've taken a look. I think we'll need this splitting out into different images/spritesheets. ISTM there are a few different states here: there is the arrow which scales down to 100%, then the filling of the icon with blue. Then there is the transfer from the download to the library. Depending on how we're implementing this, that last might need to be split out into an animation on the download icon and an animation on the library icon. Probably we should meet to talk about how to process this so we're not having :amylee go around and around with it as we figure it out.

Comment 6

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

Yeah, from looking again at the spec, it looks like we only need a sprite for the part where the bookmark shelf gets another book. The "arrow moving in to place" and the "arrow bouncing while the progress indicator moves" can all be done with normal CSS tranforms and CSS animations/transitions.

Comment 7

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

:amylee, can you provide a AE file and exported data.json for just the part of the animation where the new book is added to the bookmark shelf. It helps if the total duration in the AE file matches the target duration we want to see in the browser. I'm now able to export data.json file, but probably not competent to be trying to chop the source file up into the time slices we need.

Comment 8

[Amy Lee [:amylee] UX]

(In reply to Sam Foster [:sfoster] from comment #7)
> :amylee, can you provide a AE file and exported data.json for just the part
> of the animation where the new book is added to the bookmark shelf. It helps
> if the total duration in the AE file matches the target duration we want to
> see in the browser. I'm now able to export data.json file, but probably not
> competent to be trying to chop the source file up into the time slices we
> need.

Hi Sam, 

I was just told that the download icon animation will need to be reworked since the original idea was that the download icon would always be beside the library icon but this is no longer the case. The animation will need to be designed so the download icon isn't dependent on being next to the library icon. The new design will probably work more similarly to bookmarks (when the download is finished an arrow will drop into the library is what I'm thinking). Will work on it this week.

Comment 9

[Amy Lee [:amylee] UX]

Attachment: Library_Downloads - JSON.mp4

Part 1 of new download animation - Library

Comment 10

[Amy Lee [:amylee] UX]

Attachment: Library_Download.json

Part 1 of new download animation - Library

Comment 11

[Amy Lee [:amylee] UX]

Attachment: Download Arrow.json

70x128 size. Cropped to duration of animation.

Comment 12

[Amy Lee [:amylee] UX]

Attachment: Download Arrow.json

Comment 13

[Amy Lee [:amylee] UX]

Attachment: Download_Arrow_Icon.json

70x128 size

Comment 14

[Amy Lee [:amylee] UX]

Attachment: download_library.svg

Comment 15

[Eric Pang [:epang] UX]

Attachment: Download states.zip

Download states

State 1: New download without the download icon starting in the toolbar.

State 2: 1+ Download(s) finished and a new download added

State 3: Download icon starts in toolbar and a new download is added

State 4: A new download is added while there is already a download that is not yet complete

Comment 16

[Eric Pang [:epang] UX]

Attachment: JSON+SVG Assets for Download Arrow and Progress Bar.zip

Includes JSON and SVG files for

1. arrow-progressbar
- svg with the arrow and progressbar-bg in 16x16 space

2. arrow
- the arrow motion alone

3. progressbar
- progress bar alone in 16x16 space

4. progressbar-bg
- progress bar background alone on 16x16 space (in case you need it)

Comment 17

[Eric Pang [:epang] UX]

Attachment: JSON+SVG Assets for Download Arrow and Progress Bar.zip

Comment 18

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

(In reply to Eric Pang [:epang] UX from comment #16)
> Includes JSON and SVG files for
> 
> 1. arrow-progressbar
> - svg with the arrow and progressbar-bg in 16x16 space
> 
> 2. arrow
> - the arrow motion alone
> 
> 3. progressbar
> - progress bar alone in 16x16 space
> 
> 4. progressbar-bg
> - progress bar background alone on 16x16 space (in case you need it)

Thanks for getting these resized to 16x16 that helps a lot. I'll be in touch about the progressbar animation when I've had a chance to try it out and know more.

Comment 19

[Eric Pang [:epang] UX]

Attachment: JSON+SVG Assets for Download Arrow and Progress Bar.zip

Updated the progress bar to be 50 frames instead of 100

Comment 20

[Eric Pang [:epang] UX]

Attachment: Download Motion Specs (various states)

Comment 21

[Eric Pang [:epang] UX]

Comment on attachment 8873541 [details]
Download Motion Specs
(various states)

State 1: New download without the download icon starting in the toolbar.

State 2: 1+ Download(s) finished and a new download added

State 3: Download icon starts in toolbar and a new download is added

State 4: A new download is added while there is already a download that is not yet complete

Comment 22

[Amy Lee [:amylee] UX]

Attachment: Download States.zip

Comment 23

[Amy Lee [:amylee] UX]

Attachment: Download States Assets.zip

Comment 24

[Amy Lee [:amylee] UX]

Attachment: Download States Assets.zip

Comment 25

[Amy Lee [:amylee] UX]

Attachment: Download States Assets.zip

Comment 26

[Amy Lee [:amylee] UX]

Attachment: Download Assets (Jun 13).zip

Missing 4 (in progress, new download). Will attache when ready.

Comment 27

[Amy Lee [:amylee] UX]

Attachment: Download Assets.zip

Added missing asset "5 Completed DL, New DL"