Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Projects Tab and Editor Entry Exit Animations #671

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

abhiroopc84
Copy link
Contributor

Description

Untitled.video.-.Made.with.Clipchamp.50.mp4

What is the purpose of this pull request?

  • New feature
  • Documentation update
  • Bug fix
  • Refactor
  • Release
  • Other

Sorry, something went wrong.

@drfarrell
Copy link
Collaborator

Just some quick things I'm seeing on Mac

The top navigation bar seems to be on the wrong index or at the wrong level. I think I ran into a similar issue before when I was working on some UI stuff.
Export-1730329830074

Think we already mentioned this in the Discord, but it seems like the image doesn't render until it's in the view which is causing a bit of the jitteriness. Also, the other UI (Logo, new project, profile picture) appear instantly, so may just need to also animate in appropriately. I wouldn't do any dramatic animations, but a subtle slide-up could be good. I can help tweak the animations too.
Export-1730329977651

@abhiroopc84
Copy link
Contributor Author

@drfarrell I've fixed the positioning of the top navigation bar, and added it subtle animations for the other elements of the project screen, although I wasn't able to recreate the jittery image render on my end. Check out the changes when you find time

@Kitenite Kitenite requested a review from drfarrell November 5, 2024 00:44
app/.env.exampl Outdated Show resolved Hide resolved
@drfarrell
Copy link
Collaborator

Thanks for your patience and for addressing the animation points.

I'll lead by saying these points of feedback are going to be very very subtle but are important to nailing the overall consistency, so I hope I don't come-off as too pedantic about them. I will say that getting animations to be good is extremely difficult, so definitely prepare yourself for having patience to handle these 😄

1. The Top navigation animation

The entry and exit animations for the Project View and Editor view Topbars need to be the same. Same timing and same entry animation.

  • The Editor Topbar fades in with no direction. As in, it fades stationary. When it exits, it exits up off the page. It should probably enter in and exit out from the top.

2. Editor Exit Animation delay

There seems to be a half-second delay between when a user clicks the "Onlook" logo in the upper left corner of the editor and when the animation begins. It should be much quicker to feel "instant", otherwise the app feels slow.

3. Directionality of Project page animations

The Project information animates in from the top, but exits to the right. This feels a bit inconsistent. My hunch is that because we are animating it so the project goes into the center of the page, that we should go animate in from the left, exit to the right. Kind of like how the animation works between cards in the project onboarding.

Also, keep the animation distances subtle for the project information and the up/down project selector. Only move it about 100px before it fades out so that it doesn't feel as dramatic.

4. Dropped frames in the entry animation

I slowed this animation to 0.5x, but see how everything freezes for a bit as the projects load in? It seems like the image is not pre-loading until in a certain part of the page, or the placeholder swaps to the actual image too late. Either way, it causes a jitteriness that is not good.
Export-1730769290346

5. More carousel animation issues

There's some inconsistency going on with the carousel that may be related to the new animations.

Frame 1: I click the up arrow to go up a project.
Screenshot 2024-11-04 at 7 57 36 PM

Frame 2: As the project above moves into the page it first shows the project for a fraction of a frame in full opacity and full width <-- This frame is problematic because it makes things feel "jittery"
Screenshot 2024-11-04 at 7 57 57 PM

Frame 3: ... then as the animation begins, the project is properly above is properly animated in.
Screenshot 2024-11-04 at 7 58 20 PM

A few frames after frame 3: You can see the above project move into the space.
Screenshot 2024-11-04 at 7 58 38 PM

6. Editor Exit animation

The Editor exit animation should be as fast as the entry. It feels too "dramatic" and slow at the current speed. Try using the same values as the entry animation.

Ok I think that should be enough for now – definitely appreciate you taking this on... it already looks very slick!

@Kitenite
Copy link
Contributor

Kitenite commented Nov 7, 2024

There seems to be a much easier way to do this w/ CSS and no custom animation
https://developer.chrome.com/docs/web-platform/view-transitions/same-document

We would hook this into the router and all the animation will be resolved by the browser instead

@abhiroopc84
Copy link
Contributor Author

I remember @drfarrell mentioning something about a way to add such animations in chromium without any custom hooks. I wonder if this is what he was referring to.

But yeah, I think it's better to go with css as it makes it smoother and leads to less frame drops for the animations. I'll take a look at it.

@Kitenite
Copy link
Contributor

Kitenite commented Nov 7, 2024

I remember @drfarrell mentioning something about a way to add such animations in chromium without any custom hooks. I wonder if this is what he was referring to.

But yeah, I think it's better to go with css as it makes it smoother and leads to less frame drops for the animations. I'll take a look at it.

I was chatting w/ a devRel person who mentioned that we can call the hook in our custom router and have it automatically transition using this

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Which maybe we can make it work with our router
https://github.com/kabiirk/onlook/blob/770530141cf326288926379c2b07e35c3a536edc/apps/studio/src/routes/index.tsx#L8-L31

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants