Nicholas Shipes u10int

Warren Moore – Thirty Days of Metal

Great series of short articles introducing Apple's Metal framework.

2022-04-01: Day 1: Devices
2022-04-02: Day 2: Buffers
2022-04-03: Day 3: Commands
2022-04-04: Day 4: MTKView
2022-04-05: Day 5: Shaders
2022-04-06: Day 6: Pipelines

Greensock CSS properties Cheat Sheet

I wrote this as a reference for myself because some of the property names are non-obvious, and there are a number of relevant special properties, and there is no central concise listing of them all in GSAP Docs, other than (in longer form) on the CSSPlugin page.

Standard CSS properties

...are all supported, with hyphenated-names becoming camelCaseNames. Non-animatable properties are also supported but they will be set at the beginning of the tween.

Special mentions:

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	import { useThree } from '@react-three/fiber'
	import { gsap } from 'gsap'
	import { useGSAP } from '@gsap/react'

	export default function AnimateCamera() {
	// Accessing camera from Three.js
	const { camera } = useThree()

	useGSAP(() => { // The new hook will take care of context and life cicle.
	gsap.fromTo( // Creates the animation

	// Bigger iPhones = any Max, any Plus, iPhone XR, iPhone 11

	switch (UITraitCollection.current.horizontalSizeClass, UITraitCollection.current.verticalSizeClass) {

	case (.compact, .compact):
	// Smaller iPhones in landscape

	case (.compact, .regular):
	// iPhones in portrait
	// iPads in portrait during any split screen,

	/*
	*
	* ECEF - Earth Centered Earth Fixed
	*
	* LLA - Lat Lon Alt
	*
	* ported from matlab code at
	* https://gist.github.com/1536054
	* and
	* https://gist.github.com/1536056

	var cameraZ = camera.position.z;
	var planeZ = 5;
	var distance = cameraZ - planeZ;
	var aspect = viewWidth / viewHeight;
	var vFov = camera.fov * Math.PI / 180;
	var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
	var planeWidthAtDistance = planeHeightAtDistance * aspect;

	// or

	#!/bin/sh

	# make sure you have imagemagick installed: brew install imagemagick
	# your app_icons.sh file should have the correct permissions: run `chmod 775 app_icons.sh` in your terminal from where you put this file
	# put your `my_icon.png` next to this file and run ./app_icons.sh to export your app icons

	x=my_icon.png
	y=${x%.*}

	# delete the export directory so we start clean

	/*
	AUTO-COMPLETE SNIPPETS FOR GLSL WITHIN VISUAL CODE STUDIO
	Lewis Lepton
	https://lewislepton.com

	useful places that i grabbed info from
	http://www.shaderific.com/glsl
	https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language
	plus various other papers & books
	*/

	// Very slightly adapted from http://stackoverflow.com/a/30141700/106244
	// 99.99% Credit to Martin R!

	// Mapping from XML/HTML character entity reference to character
	// From http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
	private let characterEntities : [String: Character] = [

	// XML predefined entities:
	""" : "\"",
	"&" : "&",