Pens from Sarah Drasner https://codepen.io/sdras/ en nospam@codepen.io Copyright 2024 2022-02-21T00:14:01-07:00 Web Components Example https://codepen.io/sdras/pen/OJOvEoq https://codepen.io/sdras/pen/OJOvEoq Sarah Drasner

See the Code - See it Full Page - See Details

]]>
Web Components Example 2022-02-21T00:14:01-07:00
Catmull-Rom SVG Flame https://codepen.io/sdras/pen/LYjzNqx https://codepen.io/sdras/pen/LYjzNqx Sarah Drasner

See the Code - See it Full Page - See Details

A pen that uses GreenSock's MorphSVG to show a little flame. Drawn in illustrator by hand with gradients.

]]>
Catmull-Rom SVG Flame 2021-10-31T23:02:21-07:00
Vue Weather Notifier, vue 3 https://codepen.io/sdras/pen/PoNxqGm https://codepen.io/sdras/pen/PoNxqGm Sarah Drasner

See the Code - See it Full Page - See Details

A little weather notifier app to show SVG animation and vuex with templates. The code is a little different in codepen, you can see it all how it would be set up for an app in this repo: https://github.com/sdras/vue-weather-notifier

]]>
Vue Weather Notifier, vue 3 2020-09-20T19:05:30-07:00
Vue Book Content Typer, vue 3 https://codepen.io/sdras/pen/vYGVbxy https://codepen.io/sdras/pen/vYGVbxy Sarah Drasner

See the Code - See it Full Page - See Details

Demo showing v-model.lazy and transition component in Vue. Animations with GreenSock in the JS hook.

]]>
Vue Book Content Typer, vue 3 2020-09-20T16:08:22-07:00
Object v-for https://codepen.io/sdras/pen/rNeqqMb https://codepen.io/sdras/pen/rNeqqMb Sarah Drasner

See the Code - See it Full Page - See Details

]]>
Object v-for 2020-09-19T19:30:11-07:00
Ball Bouncing Exercise, v3 https://codepen.io/sdras/pen/eYZyqrW https://codepen.io/sdras/pen/eYZyqrW Sarah Drasner

See the Code - See it Full Page - See Details

Showing how we can use custom CSS classes for each stage of a CSS Animation with the transition component.

]]>
Ball Bouncing Exercise, v3 2020-09-07T17:29:27-07:00
Ball Bouncing using Vue transition and CSS Animation, v3 https://codepen.io/sdras/pen/GRZyVQL https://codepen.io/sdras/pen/GRZyVQL Sarah Drasner

See the Code - See it Full Page - See Details

Showing how we can use custom CSS classes for each stage of a CSS Animation with the transition component.

]]>
Ball Bouncing using Vue transition and CSS Animation, v3 2020-09-07T17:24:34-07:00
Composition API Exercise, Solution https://codepen.io/sdras/pen/zYqvJqy https://codepen.io/sdras/pen/zYqvJqy Sarah Drasner

See the Code - See it Full Page - See Details

]]>
Composition API Exercise, Solution 2020-08-12T04:03:45-07:00
Composition API Exercise, Refactor this https://codepen.io/sdras/pen/PoNPdNb https://codepen.io/sdras/pen/PoNPdNb Sarah Drasner

See the Code - See it Full Page - See Details

]]>
Composition API Exercise, Refactor this 2020-08-12T04:03:05-07:00
To do list for Nuxt app https://codepen.io/sdras/pen/JjXdNrO https://codepen.io/sdras/pen/JjXdNrO Sarah Drasner

See the Code - See it Full Page - See Details

]]>
To do list for Nuxt app 2020-11-06T15:30:37-07:00