Skip to content

Instantly share code, notes, and snippets.

View sdras's full-sized avatar

Sarah Drasner sdras

View GitHub Profile
<template>
<div>
<ion-button @click="openPicker">SHOW PICKER</ion-button>
<p>picked: {{ picked.animal.text }}</p>
</div>
</template>
<script>
import { IonButton, pickerController } from '@ionic/vue'
@sdras
sdras / AppRoses.vue
Created August 10, 2021 20:32
Small demo of vue and three.js, as seen on sarah.dev
<template>
<canvas id="canvas" ref="canvas"></canvas>
</template>
<script>
import { Sine, TweenMax } from "gsap";
import * as THREE from "three";
export default {
name: "AppRoses",
props: {
// Remember to bring in three.js and here is the script for the trackball controls as well:
// https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js
//RENDERER
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('canvas'),
antialias: true
});
renderer.setClearColor(0x25c8ce);
renderer.setPixelRatio(window.devicePixelRatio);
#Here are the resources I have made for people:
##Overview
[A Comparison of Web Animation Technologies](https://css-tricks.com/comparison-animation-technologies/)
##For Designers
[Practical Techniques for Designing Animations](http://www.smashingmagazine.com/2015/06/08/practical-techniques-on-designing-animation/)
[High Performance SVGs](https://css-tricks.com/high-performance-svgs/)
[Designing Complex SVG Animations](http://slides.com/sdrasner/cssdevconf#/)