#533 [feat] Swipe-animate the project setup flow using Framer Motion

[0xsommer]

Description

Issue: #533

Adds a directional aware entry and exit animation to the steps of the create project onboarding. The implementation uses Framer Motion and animates the height of the card after measuring its content height in order to achieve a fluid movement.

– A new component called MotionCard was added that can be used from now on to achieve similar card animations in the future.

– The structure of the step components was changed in order to split the MotionCardFooter from the MotionCardContent and make the MotionCardFooter persistent across all the steps.

– LayoutAnimations were added to transition from MotionCardContent state changes, e.g. from the "Choose a folder" button to the representation of the selected folder.

What is the purpose of this pull request?

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

onlook-onboarding-v1.mp4

[drfarrell]

Some feedback –

Seems like the border of the card is slightly shifted over one pixel to the left and one pixel up. Part of the nuance for the border is that I tried making it a "screen" (or overlay? I can't remember) fill so that a little bit of the background shows through the edges of the card.

The changing height animation is so 👌 between card states.

Totally just a discussion / design / taste point, but what do you think about the text-swiping in? Should we go for something more like #210 where the text elements kind of blend into eachother as they change states so they don't have to travel as far into the screen? Curious your thoughts. It may be a "feel" thing that requires implementation.

[0xsommer]

Good that you noticed the visual change in the shadow. I had to modify the implementation a bit to make the resizing work - that's where it lost its nuance. Before, there was a div that was absolutely positioned to create the effect, but with the dynamic height change, that approach doesn't work. Do you have a figma design or something similar I can use to try and recreate the original border vibe?

I've also tried the blending/crossfade, but didn't like it as much as the swiping. Just a feel thing. Conceptually, it makes a lot of sense to do this with a swipe, as the steps appear in horizontal order, so you feel like you're actually moving through space when you click the buttons.

[drfarrell]

Here's an over-exaggerated version. I think the blend mode is plus-lighter, but I just did a bg-white/30 or something because I couldn't figure out how to layer the blend mode correctly. You'll want to use a bg-foreground or bg-background to comply with lightmode / darkmode, but you can use your own divider (bg-foreground/30, bg-foreground/90, etc.) depending on what you think works best for light and dark mode. You may also need to define different dividers for dark:bg-foreground vs just the regular bg-foreground.

I do remember having to do some tricky stuff to get the border on the outside at the right size (0.5px)... I think this is the code on the card.tsx file:

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( ({ className, ...props }, ref) => ( <div ref={ref} className={cn( 'rounded-xl backdrop-blur-xl bg-black/60 shadow-md text-card-foreground relative', 'before:absolute before:inset-[-0.5px] before:rounded-[12.5px] before:border-[0.5px] before:border-white/20 before:pointer-events-none', className, )} {...props} > {props.children} </div> ), ); Card.displayName = 'Card';

As for the animation – thanks for the explanation. I think it looks very cool!

[0xsommer]

Okay, understood @drfarrell – thanks for the visual to explain the idea. I've now changed the box shadow to match the example above and used the variables to adjust according to dark/light settings.

[Kitenite]

@0xsommer , it looks good from my testing. I merged from main to fix the conflict. One last item is to run npm run lint which will return the below error at some of the new component instance as they are React components that are assigned anonymous functions.

Component definition is missing display name react/display-name

Otherwise look good to merge! Let me know if you'd rather I add the fix instead :)

[0xsommer]

If you can fix this real quick, I'd appreciate it - I'll be away from my computer for a few hours :)

[Kitenite]

Looks like there's some regression happening for some of the functionalities (namely the skip ability in import). That would need to be fixed before merging this in.

[Kitenite]

Working well, I'll @drfarrell for one last regression test before merging. Nice work here!

[Kitenite]

Looking good on my side