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

feature: ZotHacks Title SVG animation #80

Merged
merged 27 commits into from
Nov 3, 2023
Merged

Conversation

tyleryy
Copy link
Contributor

@tyleryy tyleryy commented Oct 19, 2023

Overview

Used Framer Motion to animate the path Length of a SVG, created by Ashley, of the "Zothacks" Title on Home Page to simulate a "hand written" animation.

Addendum

Open to suggestions on how the hand writing animation looks (where it starts, ends, etc.). Ashley created it herself and then I just exported the SVG from Figma and altered it a bit with Framer Motion.

@github-actions
Copy link

github-actions bot commented Oct 19, 2023

Deploy preview for zothacks-site-2023-sanity ready!

Name Sanity Studio
Preview Visit Preview
Commit 428451d

@github-actions
Copy link

github-actions bot commented Oct 19, 2023

Deploy preview for zothacks-site-2023 ready!

Name Hack at UCI Site
Preview Visit Preview
Commit 428451d

Copy link
Contributor

@samderanova samderanova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great start so far! A few issues to note:

apps/site/src/assets/images/Title.svg Outdated Show resolved Hide resolved
apps/site/src/views/Home/components/Title/Title.tsx Outdated Show resolved Hide resolved
@taesungh
Copy link
Member

Please remember to include a meaningful title in pull requests.

@tyleryy tyleryy changed the title Feature/svg animation feature: ZotHacks Title SVG animation Oct 22, 2023
Copy link
Contributor

@samderanova samderanova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good. One small suggestion:

@taesungh
Copy link
Member

Noticing some rendering issues in Safari with the butt caps before the letters are drawn.
End-caps still shown in the initial state when the letters haven't been drawn out.

This may be because of how Framer Motion implements the pathLength animation. Unsure if iOS WebKit has the same issue.

@tyleryy
Copy link
Contributor Author

tyleryy commented Oct 26, 2023

Ill add back the opacity in the initial state to prevent the butt caps from showing.

fix: visually hidden title

update: refactored animated title

Use lined paper vector and remove unnecessary nav (#62)

* fix: use lined paper vector and remove unnecessary nav

* fix: stick nav bar to top of screen

* fix: remove sticky navbar for mobile

---------

Co-authored-by: Sam Der <sder@uci.edu>

fix: change resources PNGs to SVGs

hotfix: heart and star sticker positioning

Add ZotHacks Open Graph Properties (#71)

* feat: add OG image

* fix: use opengraph-image for OG generation

Create Sanity resources schema (#91)

* feat: resource schema

* feat: icon, preview, and color field description

update: TikTok logo and improved alt text (#83)

* update: TikTok logo and improved alt text

* fix: switch to svg version

fix: use container spacing for resource page (#79)

* fix: use container spacing for resource page

* temp: fix row/col setup

* remove col div

update: remove apply links and mentor section (#89)

* update: remove apply links and mentor section

* fix: restore apply button, adjust wording

* fix: disabled mentor apply button
Copy link
Contributor

@samderanova samderanova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, but where's the 2023?
image

@tyleryy
Copy link
Contributor Author

tyleryy commented Oct 29, 2023

Oh shoot, Ashley forgot to make it in the SVG. I'll ask her to add it.

@taesungh
Copy link
Member

Looking alright, I'll work on optimizing some of the path segments, especially separating out individual strokes in letters with multiple strokes.

@tyleryy
Copy link
Contributor Author

tyleryy commented Nov 1, 2023

Sg @taesungh but I think we should push this if we cant polish it by the deadline.

@samderanova samderanova removed the request for review from taesungh November 3, 2023 07:41
@samderanova
Copy link
Contributor

samderanova commented Nov 3, 2023

Please resolve the merge conflicts first. Other than that, it looks good! Please squash merge.

tyleryy and others added 6 commits November 3, 2023 11:49
* update: created getSchedule file

* update: synced sanity data with schedule component

* feat: update event schema

* feat: group events by day

* feat: format date ranges

* fix: group events by America/Los_Angeles day

* fix: event order asc

* fix: remove resources from nav

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>

Fix frontend issues on resources page (#103)

* fix: backend description text overflow

* feat: new ResourceCard component

removed unused assets

* fix: key prop error

* fix: remove unused components

* fix: references to unused images

* refactor: short-circuit and color fixes

* Fix transformed filter glitches for webkit

- Include `translateZ(0)` when applying transform to drop shadow filter

---------

Co-authored-by: Taesung Hwang <taesungh@uci.edu>

fix: title and location mobile alignment (#109)

feat: frontend resources section

feat: starter packs section

removed placeholder config files

feat: add day of week to schedule (#110)

* feat: add day of week to schedule

* fix: replace weekday list with date format

* fix: long month and date format

update: restore resources link in navbar

fix: timezone inconsistencies (#119)

* fix: timezone inconsistencies

* fix: timezone inconsistencies

fix: backend resources grid issue

feature: clipboard paper animation (#116)

undefined

Feature/clipboard animation update (#123)

* feature: clipboard paper animation

* fix: padding adjustment on date

* fix: border radius and page animation update

feat: incident response form

fix: remove open in new window icon

Setup animated countdown on schedule page (#93)

* setup: basic framer countdown

* fix: removed useRef, changed animation exit value

* update: temporarily disabled slide up animation

* fix: conditional day render

* fix: precompute time

* fix: margin for the countdown

* update: added loading bar

* fix: rename to Loader

* feat: time until hacking countdown timer

* fix: clipboard styling

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>
Co-authored-by: Alexander Liu <a@alexanderliu.com>

fix: match time zones on server and client

fix: missing date-fns-tz import (#126)

fix: disable page scroll x (#125)

refactor: move homepage from views folder to app folder

refactor: convert components to arrow functions and reexport

feat: devpost

fix: changed import path

fix: added ease and moved component
Copy link
Contributor

@samderanova samderanova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, will squash merge.

@samderanova samderanova merged commit 8cfc6af into main Nov 3, 2023
2 checks passed
@taesungh taesungh deleted the feature/svg-animation branch September 27, 2024 02:24
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.

4 participants