-
Notifications
You must be signed in to change notification settings - Fork 1
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
Implement scrolling text #221
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
alex apparently rejected this so i wont approve
<div className={styles.window}> | ||
<div className={styles.slider}> | ||
<div ref={node => setContentWidth(node?.offsetWidth ?? 0)}>{children}</div> | ||
{overflowAmount > 0 && <div>{children}</div>} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{overflowAmount > 0 && <div>{children}</div>} | |
{overflowAmount > 0 && <div aria-hidden>{children}</div>} |
You should also disable user-select on this so it doesn't get copied, maybe
} | ||
|
||
&:hover { | ||
animation: marquee var(--anim-time, 3s) linear infinite; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
right now the animation resets when your mouse moves off. should it?
you can also keep the animation always on, but set animation-playing-state
to paused
until it's hovered
should it play when the mouse hovers on the text or on the card?
> | ||
<div className={styles.window}> | ||
<div className={styles.slider}> | ||
<div ref={node => setContentWidth(node?.offsetWidth ?? 0)}>{children}</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think maybe you should also add a title
attribute with the text so that you can see the whole title in the tooltip. but idk if that'll cover up the animation
closing since we're not going to add this 😢 |
Info
Implement scrolling text for event info that overflows the card
Changes
ScrollingText
component that makes child text scroll on hover if it would overflowEventCard
uses new scrolling text for each lineType of Change
expected)
linting/formatting)
workflows)
Testing
I have tested that my changes fully resolve the linked issue ...
Checklist
/src/lib/*
and commented hard to understand areasanywhere else.
Screenshots
^overflowing text fades out
^mid scroll when title is hovered