search

adobe-photoshop / spaces-design

Adobe Photoshop Design Space
http://adobe-photoshop.github.io/
Other
852 stars 74 forks source link

Panel/Column Toggle Animations #3647

Open designedbyscience opened 8 years ago

designedbyscience commented 8 years ago

I've updated a previous branch to work with more recent changes to spaces-design. For now, I will just tag this as Review Only

Below are some timelines for expanding/collapsing the columns with OSR on and off OSR: true Non-Retina osr_true_non-retina

Retina osr_true_retina

OSR: false Non-Retina osr_false_non-retina

Retina osr_false_retina

designedbyscience commented 8 years ago

Sidenote: also tried this morning to animate translate instead of left, exists on designedbyscience/panel-animation-update

Feels like there is a slight improvement in framerate, some visual glitches though

Timeline for Retina, use_osr: false

screen shot 2016-02-02 at 11 40 13 am

designedbyscience commented 8 years ago

I called this review only mostly because it doesn't perform that well, and we'd need to live with that in master if merged

placegraphichere commented 8 years ago

I'm super happy we're looking at this. That said, I agree with @designedbyscience that this is probably not performant enough (at this point) to be merged.

iwehrman commented 8 years ago

The appearance panel doesn't animate when collapsing like the other panels.

iwehrman commented 8 years ago

When the libraries panel collapses down, its contents seem to be hidden before the animation starts, which seems weird: img

iwehrman commented 8 years ago

The same basic thing seems to happen with the export panel, though it collapses up (for some reason): img

iwehrman commented 8 years ago

Closing the last open file flashes pretty badly: img

iwehrman commented 8 years ago

Back into the animation mines!

designedbyscience commented 8 years ago

Updated, however there is an issue with cloaking currently

designedbyscience commented 8 years ago

Updated again, cloaking issues fixed. Pulled some of the logic about panel state and CSS classes into the panel set

designedbyscience commented 8 years ago

To check the animations, you need to add a feature flags object to the manifest.json with a property use_animations:true and restart Photoshop

iwehrman commented 8 years ago

Needs moar rebase :8ball:

iwehrman commented 8 years ago

It also seems like the document header does not animate when opening a panel; it just gets pushed over in one step, and then the panel position is animated. I guess I'd be OK with merging it anyway if it were off by default, but the animation still seems to be enabled despite a lack of feature_flags entries in my settings.json file. Any ideas?

designedbyscience commented 8 years ago

1) There was an error that I let some things animate despite the flag (fixed now). This also accounted for the header not animating when the panels did 2) It is the manifest.json file, not settings.json, where you want to add that feature flag

designedbyscience commented 8 years ago

Back to @iwehrman.

I also have another branch I started to particularly improve the open/close section animation, where I can explicitly animate height rather than fool around with min-height