Chore/utility-bar-icons-animation

[Huongg]

Description

Fixes #930

Development notes

QA notes

• I currently apply 300 ms as a duration for the fade-in/out effect, does it look okay? Any suggestion @GabrielComymQB @Mackay031 ?

• Also, I currently put sliding-animation.js in the same location as experiment-primary-toolbar.js, I agree this is not the right place but I'm not 100% sure where would best the best place for this? Let me know if you think it should belong somewhere else @tynandebold @rashidakanchwala @cvetankanechevska

• I also use react-transition-group which is also installed for kedro-viz but have not been used anywhere. I personally like to use it as it helps to manage all the different states, and if we're thinking of having it as a reusable component somewhere else, it's also possible to implement.

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[comym]

I like it, looking good to me
I just have some small comments:

1 - I'm not sure if you're using any ease to the animation. You can try applying some easy in/out to break out the stiffness of the movement. Maybe you're are already using it and it's just very subtle.

2 - Timewise I think you can even reduce the time of 300ms, just a touch. Feel free to experiment and see what feels right.

3 - Another thing I noticed is that the icons come in an inactive state and only when the animation stops, they come active/lit.
Is this happening for some technical reason? Cause if not it would be great - if the icon is available/active - that it could come in its original state straight away. So we would avoid this kind of "turning on blink" at the end of the animation.

Thanks

[rashidakanchwala]

LGTM. thanks @Huongg

i also noticed the icons are in disabled state in the beginning and then active but I wouldn't have noticed if Gabriel hadn't commented it. It happens very fast :)

[Huongg]

thanks @GabrielComymQB and @rashidakanchwala for taking a look, for the last point I think it comes from the opacity changing from 0 -> 1 when it's sliding in, so it might look like it was inactive => active again but it's just the opacity changing, let me think what the alternative changes for that

[cvetankanechevska]

Also, noticed this issue with the toolbar for 'IconButton' , I think is something related to your changes in the Sidebar

[Huongg]

Also, noticed this issue with the toolbar for 'IconButton' , I think is something related to your changes in the Sidebar

good spot thank you. This is a tricky part as the tooltip is part of the icon, I can't think of a way at the moment to make it slide underneath the panel on both sides, but at the same time, the tooltip appears on the top. Let me think 🤔

[comym]

Ah alright! So it’s just an impression. Maybe this impression comes from the fact it’s a linear motion that only resolves in full at the very end. Does it help if you add some kind of ease to the animation of the opacity ramping up? Thanks From: Huong Nguyen ***@***.***> Date: Wednesday, 6 July 2022 at 12:36 To: kedro-org/kedro-viz ***@***.***> Cc: Gabriel Comym ***@***.***>, Mention ***@***.***> Subject: [EXT]Re: [kedro-org/kedro-viz] Chore/utility-bar-icons-animation (PR #961) thanks @GabrielComymQB<https://urldefense.com/v3/__https:/github.com/GabrielComymQB__;!!EIXh2HjOrYMV!aQ3_aoL-OfZU4xGcusNMbZlWZjJwn42f4zc4VIEIa6Bf70i61nBI_khy8tV-JswMvrOOtIruYtotHfvmALQM1ZkoPoPPiMQ$> and @rashidakanchwala<https://urldefense.com/v3/__https:/github.com/rashidakanchwala__;!!EIXh2HjOrYMV!aQ3_aoL-OfZU4xGcusNMbZlWZjJwn42f4zc4VIEIa6Bf70i61nBI_khy8tV-JswMvrOOtIruYtotHfvmALQM1ZkoB-6IJTk$> for taking a look, for the last point I think it comes from the opacity changing from 0 -> 1 when it's sliding in, so it might look like it was inactive => active again but it's just the opacity changing, let me think what the alternative changes for that — Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https:/github.com/kedro-org/kedro-viz/pull/961*issuecomment-1176114662__;Iw!!EIXh2HjOrYMV!aQ3_aoL-OfZU4xGcusNMbZlWZjJwn42f4zc4VIEIa6Bf70i61nBI_khy8tV-JswMvrOOtIruYtotHfvmALQM1ZkoSaOVWCc$>, or unsubscribe<https://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/ANHAYMEVM446HEWPOBTPPADVSVVUZANCNFSM52XQ4UJQ__;!!EIXh2HjOrYMV!aQ3_aoL-OfZU4xGcusNMbZlWZjJwn42f4zc4VIEIa6Bf70i61nBI_khy8tV-JswMvrOOtIruYtotHfvmALQM1ZkosmsFlb8$>. You are receiving this because you were mentioned.Message ID: ***@***.***> +=============================================================+ This email is confidential and may be privileged. If you have received it in error, please notify us immediately, delete the email, and do not copy it, disclose its contents or use it for any purpose. +=============================================================+

[Huongg]

hey @GabrielComymQB @tynandebold @cvetankanechevska @rashidakanchwala I just made some changes to address to the tooltip issue, and also to remove the opacity and add in the ease-in-out transition.

Let me know what you all think? I've been staring at this transition all day so I can't really tell the difference anymore :(

[Huongg]

actually, @cvetankanechevska has come up with a way that we don't have to use JS to fix it. It only allows the button to move horizontally around 34% left to right, or right to left but I think it looks better to me, and good thing we dont need to hack it

[tynandebold]

Looks, works, and feels solid! Nicely done.

Just one comment from me, though not enough to block merging.

[tynandebold]

I wonder if the 34% value can also be configurable? If we want to use this again, what's the chance we'll want the same percentage? If too much to do right now, just leave as is and we can revisit later.

[cvetankanechevska]

Yes, we can do that by making that value to be dynamically changed. In this case we want to reposition the element horizontally from the start of the Sidebar (left and right) to the center, the Sidebar width is 56px and by 34% is animated to the center from both sides. Maybe we can set this value as we have const duration = 300ms; at the top of the component. What do you think?

[comym]

hey @GabrielComymQB @tynandebold @cvetankanechevska @rashidakanchwala I just made some changes to address to the tooltip issue, and also to remove the opacity and add in the ease-in-out transition.

Let me know what you all think? I've been staring at this transition all day so I can't really tell the difference anymore :(

Hi @Huongg I just checked it here.

I appreciate the effort and I see there are some approvals in here. I can't approve it this way.

I've seen you solved the tooltip issue which is huge, well done. However the animation is still not there.

I see what you're doing and I believe it's almost there. The issue here is because you're are not using masks, as soon as you click the toggle, either way, the icons suddenly appear on screen in their full opacity. It feels a bit jumpy.

For instance, this is the very first frame as soon you toggle it off:

Note that the edges of the icon are coming from outside de utility bar (hence you're not using masks)

My suggestion is that because you're are not masking then, you do use both ease and transparency to achieve a more smooth "appear / disappear" result.

Basically, keep as it is, but when a set of icons are coming IN to the screen, they ramp up from 0% to 100% transparency at the very end of the animation. The same goes for when they move OUT of the screen. The icons in this case would go from 100 to 0% transparency at the end of the animation.

I think we can get to the right result this way. Let me know if you want to jump in a call tomorrow and maybe we can polish it together on the go if you need it.

Many thanks

[Huongg]

hey @GabrielComymQB @tynandebold @cvetankanechevska @rashidakanchwala I just made some changes to address to the tooltip issue, and also to remove the opacity and add in the ease-in-out transition.
Let me know what you all think? I've been staring at this transition all day so I can't really tell the difference anymore :(

Hi @Huongg I just checked it here.

I appreciate the effort and I see there are some approvals in here. I can't approve it this way.

I've seen you solved the tooltip issue which is huge, well done. However the animation is still not there.

I see what you're doing and I believe it's almost there. The issue here is because you're are not using masks, as soon as you click the toggle, either way, the icons suddenly appear on screen in their full opacity. It feels a bit jumpy.

For instance, this is the very first frame as soon you toggle it off:

Note that the edges of the icon are coming from outside de utility bar (hence you're not using masks)

My suggestion is that because you're are not masking then, you do use both ease and transparency to achieve a more smooth "appear / disappear" result.

Basically, keep as it is, but when a set of icons are coming IN to the screen, they ramp up from 0% to 100% transparency at the very end of the animation. The same goes for when they move OUT of the screen. The icons in this case would go from 100 to 0% transparency at the end of the animation.

I think we can get to the right result this way. Let me know if you want to jump in a call tomorrow and maybe we can polish it together on the go if you need it.

Many thanks

hey I see what you mean, I've made one small changes hopefully it's getting closer there. yeah lets have a chat tomorrow and get this fixed together 👍

[comym]

Hi team,

I'm unable to check the latest cause Gitpod does not open Viz, not sure what's happening but it happened before. I restarted my laptop and it's still the same

I'm stuck here

Thanks