aboutsummaryrefslogtreecommitdiff
path: root/src/lib/animations
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/animations')
-rw-r--r--src/lib/animations/blink.test.ts142
-rw-r--r--src/lib/animations/blink.ts36
2 files changed, 81 insertions, 97 deletions
diff --git a/src/lib/animations/blink.test.ts b/src/lib/animations/blink.test.ts
index 32dc872..b4d9f33 100644
--- a/src/lib/animations/blink.test.ts
+++ b/src/lib/animations/blink.test.ts
@@ -6,102 +6,88 @@ import { blink } from './blink';
import { sineOut } from 'svelte/easing';
const internals = {
- response: null
+ response: null
};
describe('blink', () => {
+ test('it has a default delay of 0ms', () => {
+ const response = blink(document.createElement('div'), {});
- test('it has a default delay of 0ms', () => {
+ expect(response.delay).toBe(0);
+ });
- const response = blink(document.createElement('div'), {});
+ test('it allows delay to be overridden', () => {
+ const response = blink(document.createElement('div'), {
+ delay: 300
+ });
- expect(response.delay).toBe(0);
- });
+ expect(response.delay).toBe(300);
+ });
- test('it allows delay to be overridden', () => {
+ test('it has a default duration of 400ms', () => {
+ const response = blink(document.createElement('div'), {});
- const response = blink(document.createElement('div'), {
- delay: 300
- });
+ expect(response.duration).toBe(400);
+ });
- expect(response.delay).toBe(300);
- });
+ test('it allows delay to be overridden', () => {
+ const response = blink(document.createElement('div'), {
+ duration: 999
+ });
- test('it has a default duration of 400ms', () => {
+ expect(response.duration).toBe(999);
+ });
- const response = blink(document.createElement('div'), {});
+ test('it uses sineOut as the default easing function', () => {
+ const response = blink(document.createElement('div'), {});
- expect(response.duration).toBe(400);
- });
+ expect(response.easing).toBe(sineOut);
+ });
- test('it allows delay to be overridden', () => {
+ test('it allows easing function to be overridden', () => {
+ const response = blink(document.createElement('div'), {
+ easing: () => 666
+ });
- const response = blink(document.createElement('div'), {
- duration: 999
- });
+ expect(response.easing(0)).toBe(666);
+ });
- expect(response.duration).toBe(999);
- });
+ describe('css animation function', () => {
+ beforeEach(() => {
+ const div = document.createElement('div');
+ div.style.width = '100px';
+ div.style.height = '200px';
+ internals.response = blink(div, {});
+ });
- test('it uses sineOut as the default easing function', () => {
+ test('It starts with with zeroed width and height', () => {
+ const css = internals.response.css(0, 1);
+ expect(css).toContain('width: 0px');
+ expect(css).toContain('height: 0px');
+ });
- const response = blink(document.createElement('div'), {});
+ test('It grows to full height and 0 width in first 20%', () => {
+ const css = internals.response.css(0.2, 0.8);
+ expect(css).toContain('width: 0px');
+ expect(css).toContain('height: 200px');
+ });
- expect(response.easing).toBe(sineOut);
- });
+ test('It expands to full height by the end', () => {
+ const css = internals.response.css(1, 0);
+ expect(css).toContain('width: 100px');
+ expect(css).toContain('height: 200px');
+ });
- test('it allows easing function to be overridden', () => {
+ test('It keeps element vertically centered by adjusting the margin', () => {
+ const css = internals.response.css(0.1, 0.9);
+ expect(css).toContain('margin: 50px 50px');
+ expect(css).toContain('height: 100px');
+ });
- const response = blink(document.createElement('div'), {
- easing: () => 666
- });
-
- expect(response.easing(0)).toBe(666);
- });
-
- describe('css animation function', () => {
-
- beforeEach(() => {
-
- const div = document.createElement('div');
- div.style.width = '100px';
- div.style.height = '200px';
- internals.response = blink(div, {});
- });
-
- test('It starts with with zeroed width and height', () => {
-
- const css = internals.response.css(0, 1);
- expect(css).toContain('width: 0px');
- expect(css).toContain('height: 0px');
- });
-
- test('It grows to full height and 0 width in first 20%', () => {
-
- const css = internals.response.css(0.2, 0.8);
- expect(css).toContain('width: 0px');
- expect(css).toContain('height: 200px');
- });
-
- test('It expands to full height by the end', () => {
-
- const css = internals.response.css(1, 0);
- expect(css).toContain('width: 100px');
- expect(css).toContain('height: 200px');
- });
-
- test('It keeps element vertically centered by adjusting the margin', () => {
-
- const css = internals.response.css(0.1, 0.9);
- expect(css).toContain('margin: 50px 50px');
- expect(css).toContain('height: 100px');
- });
-
- test('It keeps element horizontally centered by adjusting the margin', () => {
-
- const css = internals.response.css(0.6, 0.4);
- expect(css).toContain('margin: 0px 25px');
- expect(css).toContain('width: 50px');
- });
- });
+ test('It keeps element horizontally centered by adjusting the margin', () => {
+ const css = internals.response.css(0.6, 0.4);
+ expect(css).toContain('margin: 0px 25px');
+ expect(css).toContain('width: 50px');
+ });
+ });
});
diff --git a/src/lib/animations/blink.ts b/src/lib/animations/blink.ts
index c291b06..623489a 100644
--- a/src/lib/animations/blink.ts
+++ b/src/lib/animations/blink.ts
@@ -1,25 +1,23 @@
import { sineOut } from 'svelte/easing';
import type { AnimationConfig } from 'svelte/animate';
-export const blink = function blink(node: HTMLElement, params: AnimationConfig): AnimationConfig{
+export const blink = function blink(node: HTMLElement, params: AnimationConfig): AnimationConfig {
+ const originalWidth = parseFloat(getComputedStyle(node).width);
+ const originalHeight = parseFloat(getComputedStyle(node).height);
- const originalWidth = parseFloat(getComputedStyle(node).width);
- const originalHeight = parseFloat(getComputedStyle(node).height);
+ return {
+ delay: params.delay || 0,
+ duration: params.duration || 400,
+ easing: params.easing || sineOut,
+ css: (t: number): string => {
+ const halfWidth = originalWidth / 2;
+ const halfHeight = originalHeight / 2;
+ const height = Math.round(t <= 0.2 ? (originalHeight * t) / 0.2 : originalHeight);
+ const marginY = Math.round(t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0);
+ const width = Math.round(t > 0.2 ? ((t - 0.2) / 0.8) * originalWidth : 0);
+ const marginX = Math.round(t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth);
- return {
- delay: params.delay || 0,
- duration: params.duration || 400,
- easing: params.easing || sineOut,
- css: (t: number): string => {
-
- const halfWidth = originalWidth / 2;
- const halfHeight = originalHeight / 2;
- const height = Math.round(t <= 0.2 ? (originalHeight * t) / 0.2 : originalHeight);
- const marginY = Math.round(t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0);
- const width = Math.round(t > 0.2 ? ((t - 0.2) / 0.8) * originalWidth : 0);
- const marginX = Math.round(t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth);
-
- return `width: ${width}px; height: ${height}px; margin: ${marginY}px ${marginX}px`;
- }
- };
+ return `width: ${width}px; height: ${height}px; margin: ${marginY}px ${marginX}px`;
+ }
+ };
};