Animate enter and exit for start/finish tile tooltips#23
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
gvjacob
left a comment
gvjacob
left a comment
There was a problem hiding this comment.
Liking it so far! :) I think we can hone in on the bounciness a bit more. It should be springy but snappy too.
| <Tooltip.Content className="z-50" sideOffset={15}> | ||
| <Tooltip.Arrow className="h-4 w-4 -translate-y-2 rotate-45 rounded-sm bg-white fill-current" /> | ||
| <div className="relative aspect-[9/6] rounded bg-white"> | ||
| <div className="flex h-full flex-col items-center justify-center gap-1 p-5 lg:p-10"> | ||
| <RedHeartSVG /> | ||
| <h3 className="text-xl font-bold text-purple-dark lg:text-3xl"> | ||
| Finish! | ||
| </h3> | ||
| <p className="font-rounded text-xs text-red lg:text-lg"> | ||
| See your champ grow. | ||
| </p> | ||
| <motion.div |
There was a problem hiding this comment.
We can condense these two into just one div by specifying asChild with Tooltip.Content
https://www.radix-ui.com/docs/primitives/components/tooltip#content
There was a problem hiding this comment.
@gvjacob could you rephrase this in another way ? By the two do you mean the Content and motion.div ?
There was a problem hiding this comment.
Yes! The Tooltip.Content is rendering a div on its own on top of your motion.div. If we can avoid it, we shouldn't use too many nested divs.
My suggestion is to do this:
<Tooltip.Content ... asChild>
<motion.div>...</motion.div>
</Tooltip.Content>
With that, the output will only be a singular div that has all the animations baked into it.
| initial={{ opacity: 0, translateY: 40 }} | ||
| animate={{ opacity: 1, translateY: 0 }} | ||
| transition={{ | ||
| translateY: { | ||
| type: "spring", | ||
| stiffness: 250, | ||
| }, | ||
| }} | ||
| > |
There was a problem hiding this comment.
I think it's still too bouncy but definitely getting closer. I've configured how the animation works for the level previews here.
We probably want to use the same animation config but curious which one you think could work here?
There was a problem hiding this comment.
You can test it out here! https://supernoodle-prototype-l08czolrq-go-noodle.vercel.app/
cc @RegisBiron, also down to switch to regular cubic bezier if you think that's the way to go!
There was a problem hiding this comment.
@catlynbowles @gvjacob The subtle bounce works really well here! It stays consistent with the animation language.
There was a problem hiding this comment.
@gvjacob I think the level tiles animation looks awesome and I am going to apply the same effect here !
| return ( | ||
| <BaseTile tile={tile} coordinates={coordinates} outline> | ||
| <Tooltip.Provider> | ||
| <Tooltip.Provider delayDuration={400}> |
There was a problem hiding this comment.
non-blocking: Wondering if we should make these delayDuration={0} to match the other tooltips in #24
There was a problem hiding this comment.
I am wondering the same... should I change it now ? @joshpensky @gvjacob
4 participants
What This Does
How to Test
Accessibility Checklist
<img>tags have appropriatealttextSee the
Playbook accessibility page
for more details.