uxderrick

Web Animation Best Practices & Guidelines

Document Purpose

This is a comprehensive reference guide for creating high-quality web animations. Use this as a knowledge base for implementing animations in web applications. All principles, timing values, and easing functions provided here are production-tested and ready to use.

---

Core Principles

Principle 1: Natural Motion

pqoqubbw

{
"css.customData": [".vscode/tailwind.json"]
}

aleqsio

import { ThemedText } from "@/components/themed-text";
import { BottomSheet, Button, Host, Slider } from "@expo/ui/swift-ui";
import { frame, offset } from "@expo/ui/swift-ui/modifiers";
import { Canvas, Fill, Shader, Skia, vec } from "@shopify/react-native-skia";
import { useState } from "react";
import {
  PlatformColor,
  StyleSheet,
  useWindowDimensions,
  View,

gulitsky

export const init = async () => {
	const lp = retrieveLaunchParams();

	const isDebug = lp.startParam === "debug";
	$debug.set(isDebug);
	if (isDebug && ["android", "ios"].includes(lp.platform)) {
		try {
			const eruda = await import("eruda");
			eruda.default.init({
				tool: ["console", "elements", "network", "resources", "info"],

androiddevnotes

to use it:

1. install ktlint first: brew install ktlint - if not on mac, use different installation: https://github.com/pinterest/ktlint

2. modify your pre-commit file in .git folder

3. create .editorconfig file in root of your project

example config of .editorconfig:

Kyle-Ye

Inspired by https://infosec.exchange/@jjtech/112612685494089718

Method 1: LLDB

Step 0

Reboot into Recovery OS + Disable SIP

csrutil disable

KlassenKonstantin

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            BorderPathTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Box(
                        modifier = Modifier
                            .fillMaxSize()

JunkFood02

package com.example.compose_debug

import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.animation.core.Easing
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.PathEasing

edsunman

/**
 * A timeline with internal clock to schedule simple animations.
 * @example
 * // create timeline
 * let timeline = new Timeline();
 *
 * // schedule a function to be run in two seconds time
 * timeline.addKeyframe(2, () => {
 * 	console.log('Hello in two seconds time');
 * });

rexydye

1. Install this extension: Custom CSS and JS Loader
2. Create vscodestyle.css file somewhere on your system with this content:

.monaco-workbench .part.titlebar {
  position: relative;
}
.monaco-workbench .part.titlebar::before {
  content: "";
  position: absolute;
 top: 50%;