yuschick/snapfoo

SnapFoo is an open source JavaScript library that extends off of SnapSVG to help simplify the SVG animation process.

Hey y'all 🤘 I'm Daniel.

Frontend, Design Systems, HTML, CSS, JavaScript, TypeScript, React, Accessibility, UI/UX, Mentor, Empathy

I'm a senior frontend developer, author, and speaker originally from the US but now calling Helsinki, Finland home. You can catch me sharing insights on platforms like Smashing Magazine, LogRocket and formerly CSS Tricks. Whether it's at conferences, meetups, or consulting with local companies, I love diving into topics like web accessibility (a11y) and design systems. Back in the US, I taught frontend engineering to career changers, and that passion for helping others continues today through my volunteer work with the Helsinki chapter of CodeBar.

I'm most passionate about great chocolate, beautiful tattoos and bridging design and development to create accessible and resilient design systems. Catch me at a local metal show, drinking hot chocolate at a cafe, gaming or sporting (basketball, squash, climbing).

Speaking

Date	Event	Title
02.11.2024	Moldova DevCon	Approach With Care - Making Digital Accessibility Feel Natural
18.12.2024	Turku ❤️ Frontend	It's Alive! Facing The Monsters Of Accessible Live Regions

Past Speaking Events

Date	Event	Title
11.07.2024	TallinnJS	Get Lost, JavaScript: Just Kidding — But HTML & CSS Do More Now
29.05.2024	Hive Helsinki	Approach With Care - Making Digital Accessibility Feel Natural
07.05.2024	enterJS	The Keys to an Accessibility Mindset
04.04.2024	TampereJS	Building Better Components — A Journey to a More Resilient Frontend
22.03.2024	Michigan Technology Conference	The Keys to an Accessibility Mindset
21.03.2024	Michigan Technology Conference	Building Better Components — A Journey to a More Resilient Frontend
29.02.2024	HelsinkiJS	Building Better Components — A Journey to a More Resilient Frontend
28.02.2024	Turku ❤️ Frontend	Building Better Components — A Journey to a More Resilient Frontend
29.09.2023	RenderCon Nairobi	The Keys to an Accessibility Mindset
13.09.2023	StackConf Berlin	The Keys to an Accessibility Mindset
31.05.2023	Turku ❤️ Frontend	The Keys to an Accessibility Mindset
04.05.2023	TampereJS	The Keys to an Accessibility Mindset
26.04.2023	ResQ Club	The Keys to an Accessibility Mindset
04.04.2023	Integrify	The Keys to an Accessibility Mindset
28.03.2023	HelsinkJS	The Keys to an Accessibility Mindset
10.03.2023	Meru Health	The Keys to an Accessibility Mindset
21.02.2023	FiksuRuoka	The Keys to an Accessibility Mindset

snapfoo's Issues

Update the Rewind Property

Currently, the api for rewind properties is more complicated than needed. I'd like to update the individual rewind properties to work as a single rewind object to simplify the calls.

For example:

rewind: true,
rewindDelay: 250,
rewindDuration: 1000,
rewindEasing: mina.backout

would become

rewind: {
  delay: 250,
  duration: 1000,
  easing: mina.backout
}

Backwards compatibility to prevent this being a breaking change would be nice but is not required.

Update Animate and AnimatePath Structure

Currently, both the animate and animatePath calls accept frames for one specific element. This functionality creates an issue if you're trying to animate more than one element in one SVG container. Therefor, both calls should be updated to accept an array of frames objects, allowing the animation of multiple elements within one call.

Psuedo code could look something like this:

const animateObj = [
  {
    el: '#circle',
    frames: { ... }
  },
  {
    el: '.star',
    frames: { ... }
  }
]

This, however, creates a problem with how to handle callbacks and would need some further thought.

Update Easing Property for Better React Support

Update the easing property from a mina function to additionally accept a string like bounce. The SnapFoo logic will then use this like either a function call or mina[props.easing]. This helps with SnapFoo in React

Overhaul Project Architecture

Following a similar architecture to TickTock, restructure and update the SnapFoo project.

Update the Loop Property Values

Currently, the api for loop properties is more complicated than needed. I'd like to update the individual loop properties to work as a single loop property to simplify the calls.

The default value for loop should be false while a value of 0 should be treated as an infinite loop. Any other number serves as the loopCount.

Negative numbers should error and return false.

For example:

loop: true,
loopCount: 3

would become

loop: 3

Backwards compatibility to prevent this being a breaking change would be nice but is not required.