Skip to content

Download animation#7690

Merged
mr-cheffy merged 12 commits intozen-browser:devfrom
BrielOtero:download-animation
Apr 27, 2025
Merged

Download animation#7690
mr-cheffy merged 12 commits intozen-browser:devfrom
BrielOtero:download-animation

Conversation

@BrielOtero
Copy link
Contributor

@BrielOtero BrielOtero commented Apr 17, 2025

Core Functionality

  • Detect download start
  • Identify download trigger source:
    • Determine the element/location that initiated the download for animation starting point.
    • Support initiation via standard left-clicks (e.g., clicking a download link/button).
    • Support initiation via the context menu (e.g., "Right-click -> Save Link As...", "Save Image As...").
  • Start the animation
  • Prefs Integration: Add an option in the application settings to enable or disable the download animation.

UI/UX & Visuals

  • Find icon that align with the existing 'Zen' style guide.
  • Ensure the animation displays correctly when the download icon is visible.
  • Ensure the animation functions correctly regardless of the position/customization of the browser's download icon
  • Make a good animation

Target (Something near this)

Screen.Recording.2025-04-17.at.17.11.32.mp4

@BrielOtero BrielOtero requested a review from mr-cheffy April 17, 2025 15:38
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. Feature labels Apr 17, 2025
@mr-cheffy
Copy link
Member

It should be an unified icon in my opinion, not depending on the file type

@BrielOtero
Copy link
Contributor Author

BrielOtero commented Apr 17, 2025

It should be an unified icon in my opinion, not depending on the file type

Perfect, I'll remove the icons and leave just one. I'm not quite sure what to do when enabling 'Save files', because the browser automatically opens downloads, You can watch it in the current state video.

@BrielOtero BrielOtero marked this pull request as draft April 17, 2025 16:08
@Sabreclaw
Copy link

Do we have an option to enable / disable animation ? I think we should have some kind of global rule for disabling animation in Zen, and these implementations can pick that event.

@mr-cheffy
Copy link
Member

mr-cheffy commented Apr 17, 2025

Having reduced motion would do it. @BrielOtero could you add a config just in case someone wants to disaable it?

@BrielOtero
Copy link
Contributor Author

Having reduced motion would do it. @BrielOtero could you add a config just in case someone wants to disaable it?

@mauro-balades Yes. This is the idea.

@bpavuk
Copy link

bpavuk commented Apr 20, 2025

I don't know if anyone agrees with me, but both Zen and Arc animations are too slow to my taste, I'd make it 1.25x-1.5x faster.

Perhaps, a slider for controlling animation speed would help? I doubt it won't overcomplicate things, though.

@BrielOtero
Copy link
Contributor Author

BrielOtero commented Apr 24, 2025

I don't know if anyone agrees with me, but both Zen and Arc animations are too slow to my taste, I'd make it 1.25x-1.5x faster.

Perhaps, a slider for controlling animation speed would help? I doubt it won't overcomplicate things, though.

@bpavuk I added an option to customize the animation duration

@BrielOtero BrielOtero marked this pull request as ready for review April 24, 2025 19:53
@BrielOtero BrielOtero requested a review from mr-cheffy April 24, 2025 19:54
Copy link
Member

@mr-cheffy mr-cheffy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Just some tiny changes and it should be ready for merge!

@bpavuk
Copy link

bpavuk commented Apr 24, 2025

I don't know if anyone agrees with me, but both Zen and Arc animations are too slow to my taste, I'd make it 1.25x-1.5x faster.

Perhaps, a slider for controlling animation speed would help? I doubt it won't overcomplicate things, though.

@bpavuk I added an option to customize the animation duration

@BrielOtero can't wait to see this in action! Thank you!

Copy link
Member

@mr-cheffy mr-cheffy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you also change animations to downloads`?

@BrielOtero
Copy link
Contributor Author

@mauro-balades some questions.

  • Are there any download scenarios I might have overlooked?
  • What do you think about the animation duration?
Screen.Recording.2025-04-25.at.17.40.43.yafw.small_file.mp4

Right now the animation is not displayed in compact mode, would you prefer that we:

  • Finish a first iteration without compact mode, or
  • Spend a bit more time and implement something like Arc’s side-slide animation?

Let me know which direction you’d rather take.

@mr-cheffy
Copy link
Member

Are there any download scenarios I might have overlooked?

Not much I can think of right now, I've revised the checks and it all seems pretty fool proof.

What do you think about the animation duration?

Wonderful! Maybe it could arch just a tiiiiiiny bit more and a tiiiiny bit slower (10ms, not more).

Spend a bit more time and implement something like Arc’s side-slide animation?

This would be ideal. Is there an ETA on where this could be done? because if it's going to take too long, we can do it a separate PR. Let me know what you think. Great work!

@mr-cheffy
Copy link
Member

@BrielOtero i've seen you've marked the comments as resolved but I dont see any changes. Did you forget to push?

@BrielOtero
Copy link
Contributor Author

@BrielOtero i've seen you've marked the comments as resolved but I dont see any changes. Did you forget to push?

Oh, I’m sorry. I misunderstood when to mark things as resolved. I was using it like a personal checklist of fixes before pushing. I’ve reverted the status now.

@BrielOtero
Copy link
Contributor Author

Are there any download scenarios I might have overlooked?

Not much I can think of right now, I've revised the checks and it all seems pretty fool proof.

What do you think about the animation duration?

Wonderful! Maybe it could arch just a tiiiiiiny bit more and a tiiiiny bit slower (10ms, not more).

Spend a bit more time and implement something like Arc’s side-slide animation?

This would be ideal. Is there an ETA on where this could be done? because if it's going to take too long, we can do it a separate PR. Let me know what you think. Great work!

Thanks! I started looking into this yesterday and should have something ready soon. If I can complete it quickly, I’ll include it here; otherwise, I’ll address it in a separate PR

@mr-cheffy
Copy link
Member

Oh, I’m sorry. I misunderstood when to mark things as resolved. I was using it like a personal checklist of fixes before pushing. I’ve reverted the status now.

Dont worry! I was just wondering haha

Thanks! I started looking into this yesterday and should have something ready soon. If I can complete it quickly, I’ll include it here; otherwise, I’ll address it in a separate PR

Great! Im planning on merging on monday so we can give it some days to test. If you cant get it by then, dont worry

@BrielOtero
Copy link
Contributor Author

Oh, I’m sorry. I misunderstood when to mark things as resolved. I was using it like a personal checklist of fixes before pushing. I’ve reverted the status now.

Dont worry! I was just wondering haha

Thanks! I started looking into this yesterday and should have something ready soon. If I can complete it quickly, I’ll include it here; otherwise, I’ll address it in a separate PR

Great! Im planning on merging on monday so we can give it some days to test. If you cant get it by then, dont worry

I’ve done a quick experiment that essentially “stole” the downloads button. While it retains all of the original functionality and animations, it can cause issues, such is impossible to "stole" the button when isn’t in the browser or when you open the sidebar and the animation is happening. For now, I’ll revert to a standard icon, but this approach might be worth revisiting in the future.

Screen.Recording.2025-04-26.at.15.54.46.mp4

@bpavuk
Copy link

bpavuk commented Apr 26, 2025

I'd love to test this. @BrielOtero @mauro-balades give me build instructions, please.

@mr-cheffy
Copy link
Member

Oh, I’m sorry. I misunderstood when to mark things as resolved. I was using it like a personal checklist of fixes before pushing. I’ve reverted the status now.

Dont worry! I was just wondering haha

Thanks! I started looking into this yesterday and should have something ready soon. If I can complete it quickly, I’ll include it here; otherwise, I’ll address it in a separate PR

Great! Im planning on merging on monday so we can give it some days to test. If you cant get it by then, dont worry

I’ve done a quick experiment that essentially “stole” the downloads button. While it retains all of the original functionality and animations, it can cause issues, such is impossible to "stole" the button when isn’t in the browser or when you open the sidebar and the animation is happening. For now, I’ll revert to a standard icon, but this approach might be worth revisiting in the future.

This does sound cool! But it might not always work if the button is not on the toolbar, since the element doesnt exist... Id create a temporary pseudo element we can animate to and just use that, keep it simple imo.

give me build instructions, please.

https://docs.zen-browser.app/guides/building or wait for twilight once it's merged. If @BrielOtero could push the changes and make a different PR for floating downloads, it would be nice.

@dosubot dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Apr 26, 2025
@BrielOtero BrielOtero requested a review from mr-cheffy April 26, 2025 21:52
@BrielOtero
Copy link
Contributor Author

Could you also change animations to downloads`?

Yes. It's fixed.

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Apr 27, 2025
@mr-cheffy mr-cheffy self-assigned this Apr 27, 2025
@mr-cheffy mr-cheffy merged commit d5225be into zen-browser:dev Apr 27, 2025
2 checks passed
@alanmoyano
Copy link

@BrielOtero thanks for this amazing animation, looks SO good.

@BrielOtero
Copy link
Contributor Author

@BrielOtero thanks for this amazing animation, looks SO good.

Thanks, glad you like it!

@mr-cheffy
Copy link
Member

@BrielOtero is there a way to make the arc more "noticeable"?

@12th-devs
Copy link
Contributor

12th-devs commented Jul 16, 2025

@BrielOtero is there a way to make the arc more "noticeable"?

@mr-cheffy You could consider replacing the symbol with a small preview of what is being downloaded. Make it look like a pod or something, similar to my userScript.

image

@alanmoyano
Copy link

An additional improvement that I would suggest is to make the drawer clickable so when using compact mode it is easier to see the downloads

@BrielOtero
Copy link
Contributor Author

@BrielOtero is there a way to make the arc more "noticeable"?

I’ll check it. I’m having issues with the build process. 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature lgtm This PR has been approved by a maintainer size:XL This PR changes 500-999 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants