Event transitions 🎉

[JustinStitt]

Demo

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
acm-csuf-site	✅ Ready (Inspect)	Visit Preview	Oct 15, 2022 at 8:32AM (UTC)

[diamondburned]

As a side note, the Algo event's description escapes the <p> tag, probably because nested <p> tags are invalid. It should probably be in a <div> instead. Note the HTML_TAG_START and HTML_TAG_END comments.

cc @EthanThatOneKid

[diamondburned]

Also, can we squash these commits?

[JustinStitt]

Also, can we squash these commits?

I like have PR revision history. Perhaps maintainer can squash pre-merge?

[JustinStitt]

Also, this package may be of interest. It does detail-summary animations in-house.

Adds a bit of css bloat but simplifies the DOM.

[JustinStitt]

I have the power to LGTM but won't :)

[diamondburned]

As a side note, the Algo event's description escapes the <p> tag, probably because nested <p> tags are invalid. It should probably be in a <div> instead. Note the HTML_TAG_START and HTML_TAG_END comments.

After looking into it, this doesn't happen with JS enabled. It might be the server-side rendering attempting to sanitize the HTML differently compared to the browser.

[jaasonw]

am i missing something or it seem kinda janky to me?

[JustinStitt]

am i missing something or it seem kinda janky to me?

The behavior or my implementation?

[jaasonw]

the behavior

[jaasonw]

https://user-images.githubusercontent.com/8981287/189256563-8a2cc082-ccc6-40f3-acef-154185aa3c03.mp4
like it just kinda snaps down and when u minimize it kinda just disappears

[JustinStitt]

https://user-images.githubusercontent.com/8981287/189256563-8a2cc082-ccc6-40f3-acef-154185aa3c03.mp4 like it just kinda snaps down and when u minimize it kinda just disappears

hmm, idk. I just tried to be clever and use the built-in Svelte transitions. It does look weird to me as well.

[EthanThatOneKid]

I appreciate the changes in this PR because @JustinStitt was able to create an enhancement that gets added to the page progressively when JavaScript is enabled. This means that he took into account backwards-compatibility, allowing the component to properly function even when the expected JavaScript code is absent.

[jaasonw]

wait hold up, am i the only one that finds this initial jerk kinda weird

Screen.Recording.2022-10-05.at.12.58.00.PM.mov

[JustinStitt]

I am not seeing an initial jerk. It's animation timing is probably a Cubic Bezier with a moderately high starting slope but that is just part of the animation.

This is preferred to a slow, unresponsive, and less punchy ease-in timing imo.

[diamondburned]

I am not seeing an initial jerk.

Probably because the animation timing is very low. By doing this change:

--- a/src/routes/events/event.svelte
+++ b/src/routes/events/event.svelte
@@ -93,7 +94,7 @@
     </noscript>
 
     {#if shown}
-      <p class="event-description" transition:slide>
+      <p class="event-description" transition:slide={{ duration: 2000 }}>
         {@html info.description}
       </p>
     {/if}

You'll see that the action buttons inside each event are not actually transitioned properly:

Screencast.from.05-10-22.15.24.01.webm

This probably explains the initial jerk.

[jaasonw]

oh, good catch, yea these buttons needa be transitioned as well as the description

[netlify]

❌ Deploy Preview for acmcsuf failed.

Name	Link
🔨 Latest commit	273d42b
🔍 Latest deploy log	https://app.netlify.com/sites/acmcsuf/deploys/63aae4bc6f30aa00082de193

[jaasonw]

output.mp4