search

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.32k stars 1.27k forks source link

Add transitions when user open files #2963

Open BamaCharanChhandogi opened 6 months ago

BamaCharanChhandogi commented 6 months ago

Increasing Access

for mobile and Windows both users can get a smooth experience when user click the files button

Screenshot 2024-01-27 115628

Feature enhancement details

I want to add a transition effect on sketch files. @lindapaiste I would like to work on this. please assign it to me.

lindapaiste commented 5 months ago

I'm fine with this. I think we always intended to have a slide effect there. For the mobile we are using a transform on the editor div to move it over so we can add a CSS transition there. I put in a really slow one as a test to see what it looks like (transition: transform 5000ms). The sliding works fine for both opening and closing. However the "sketch files" panel is blank while closing. Not a huge deal but if we want to make it really smooth then this might be something where we could use react-transition-group to unmount the files list only after the slide is complete.

Ideally we would support the prefers-reduced-motion preference of the user. I'm not sure if react-transition-group has any built-in support for that?

aniketjat03 commented 5 months ago

Hi @lindapaiste ,I am new to this Organisation and would like to contribute. Is there any community channel where I can connect to other contributors ? It would really be of great help.

rahulrana701 commented 5 months ago

@BamaCharanChhandogi are you still working on this issue , or I should go ahead with it @lindapaiste @raclim could you please confirm