chore: cleaned up files
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
800b2864a6
commit
79708b08b8
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
Solomons\ Website.pdf
|
||||||
|
|
||||||
|
demos/
|
||||||
10421
Solomons Website.pdf
10421
Solomons Website.pdf
File diff suppressed because it is too large
Load Diff
@ -1,72 +0,0 @@
|
|||||||
// Version 1: More random and chaotic
|
|
||||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
|
||||||
const fragment = document.createDocumentFragment();
|
|
||||||
const grid = [12, 6];
|
|
||||||
const col = grid[0];
|
|
||||||
const row = grid[1];
|
|
||||||
const numberOfElements = col * row;
|
|
||||||
|
|
||||||
for (let i = 0; i < numberOfElements; i++) {
|
|
||||||
let div = document.createElement('div');
|
|
||||||
div.className = 'part';
|
|
||||||
div.dataset.index = i;
|
|
||||||
fragment.appendChild(div);
|
|
||||||
}
|
|
||||||
|
|
||||||
staggerVisualizerEl.appendChild(fragment);
|
|
||||||
|
|
||||||
const staggersAnimation = anime.createTimeline({
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
loop: true,
|
|
||||||
autoplay: false
|
|
||||||
});
|
|
||||||
|
|
||||||
staggersAnimation
|
|
||||||
// Chaotic burst outward with per-element randomness
|
|
||||||
.add('.part', {
|
|
||||||
translateX: (el) => anime.utils.random(-15, 15),
|
|
||||||
translateY: (el) => anime.utils.random(-15, 15),
|
|
||||||
rotate: (el) => anime.utils.random(-180, 180),
|
|
||||||
scale: (el) => anime.utils.random(0.3, 0.8),
|
|
||||||
duration: 800,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
delay: anime.stagger(30, { grid: grid, from: 'center' })
|
|
||||||
}, 0)
|
|
||||||
// Floating upward with wave effect
|
|
||||||
.add('.part', {
|
|
||||||
translateY: (el, i) => -anime.utils.random(2, 8),
|
|
||||||
rotate: (el) => anime.utils.random(-45, 45),
|
|
||||||
duration: 1200,
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
delay: (el, i) => i * 20 + anime.utils.random(-100, 100)
|
|
||||||
}, '-=400')
|
|
||||||
// Scattered tumble
|
|
||||||
.add('.part', {
|
|
||||||
translateX: (el) => anime.utils.random(-20, 20),
|
|
||||||
translateY: (el) => anime.utils.random(-20, 20),
|
|
||||||
rotate: (el) => anime.utils.random(-360, 360),
|
|
||||||
scale: (el) => anime.utils.random(0.5, 1.2),
|
|
||||||
duration: 1000,
|
|
||||||
easing: 'easeInOutQuad',
|
|
||||||
delay: anime.stagger(40, { grid: grid, from: 'random' })
|
|
||||||
})
|
|
||||||
// Converge back with randomized paths
|
|
||||||
.add('.part', {
|
|
||||||
translateX: 0,
|
|
||||||
translateY: 0,
|
|
||||||
rotate: (el) => anime.utils.random(0, 360),
|
|
||||||
scale: 1,
|
|
||||||
duration: 1200,
|
|
||||||
easing: 'easeOutElastic',
|
|
||||||
delay: anime.stagger(50, { grid: grid, from: 'center' })
|
|
||||||
})
|
|
||||||
// Gentle pulse
|
|
||||||
.add('.part', {
|
|
||||||
scale: (el) => anime.utils.random(0.9, 1.1),
|
|
||||||
opacity: (el) => anime.utils.random(0.5, 1),
|
|
||||||
duration: 600,
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
delay: anime.stagger(30)
|
|
||||||
}, '-=200');
|
|
||||||
|
|
||||||
staggersAnimation.play();
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
// Version 2: Fluid and organic with floating effect
|
|
||||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
|
||||||
const fragment = document.createDocumentFragment();
|
|
||||||
const grid = [12, 6];
|
|
||||||
const col = grid[0];
|
|
||||||
const row = grid[1];
|
|
||||||
const numberOfElements = col * row;
|
|
||||||
|
|
||||||
for (let i = 0; i < numberOfElements; i++) {
|
|
||||||
let div = document.createElement('div');
|
|
||||||
div.className = 'part';
|
|
||||||
div.dataset.index = i;
|
|
||||||
fragment.appendChild(div);
|
|
||||||
}
|
|
||||||
|
|
||||||
staggerVisualizerEl.appendChild(fragment);
|
|
||||||
|
|
||||||
const staggersAnimation = anime.createTimeline({
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
loop: true,
|
|
||||||
autoplay: false
|
|
||||||
});
|
|
||||||
|
|
||||||
staggersAnimation
|
|
||||||
// Initial expansion with gentle stagger
|
|
||||||
.add('.part', {
|
|
||||||
translateX: anime.stagger((el, i) => anime.utils.random(-6, 6), { grid: grid, from: 'center', axis: 'x' }),
|
|
||||||
translateY: anime.stagger((el, i) => anime.utils.random(-6, 6), { grid: grid, from: 'center', axis: 'y' }),
|
|
||||||
scale: anime.stagger([0.7, 1.1], { grid: grid, from: 'center' }),
|
|
||||||
duration: 1000,
|
|
||||||
easing: 'easeOutElastic',
|
|
||||||
delay: anime.stagger(50, { grid: grid, from: 'center' })
|
|
||||||
}, 0)
|
|
||||||
// Floating wave motion
|
|
||||||
.add('.part', {
|
|
||||||
translateY: (el, i) => anime.utils.random(-5, 5),
|
|
||||||
rotate: (el) => anime.utils.random(-30, 30),
|
|
||||||
opacity: [(el) => anime.utils.random(0.6, 0.8), 1],
|
|
||||||
duration: 2000,
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
delay: (el, i) => i * 30 + anime.utils.random(0, 300)
|
|
||||||
}, '-=500')
|
|
||||||
// Gentle compression and expansion
|
|
||||||
.add('.part', {
|
|
||||||
scaleX: (el) => anime.utils.random(0.9, 1.05),
|
|
||||||
scaleY: (el) => anime.utils.random(0.9, 1.05),
|
|
||||||
duration: 1200,
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
delay: anime.stagger(40, { grid: grid, from: 'center' })
|
|
||||||
}, '-=1000')
|
|
||||||
// Slow drift
|
|
||||||
.add('.part', {
|
|
||||||
translateX: (el) => anime.utils.random(-3, 3),
|
|
||||||
translateY: (el) => anime.utils.random(-3, 3),
|
|
||||||
rotate: (el, i) => i % 2 === 0 ? 8 : -8,
|
|
||||||
duration: 1500,
|
|
||||||
easing: 'easeInOutQuad',
|
|
||||||
delay: (el, i) => i * 25
|
|
||||||
})
|
|
||||||
// Return to rest gently
|
|
||||||
.add('.part', {
|
|
||||||
translateX: 0,
|
|
||||||
translateY: 0,
|
|
||||||
rotate: 0,
|
|
||||||
scale: 1,
|
|
||||||
opacity: 1,
|
|
||||||
duration: 1500,
|
|
||||||
easing: 'easeInOutQuad',
|
|
||||||
delay: anime.stagger(35, { grid: grid, from: 'center' })
|
|
||||||
});
|
|
||||||
|
|
||||||
staggersAnimation.play();
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
// Version 3: Balanced - chaotic bursts with organic flow
|
|
||||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
|
||||||
const fragment = document.createDocumentFragment();
|
|
||||||
const grid = [12, 6];
|
|
||||||
const col = grid[0];
|
|
||||||
const row = grid[1];
|
|
||||||
const numberOfElements = col * row;
|
|
||||||
|
|
||||||
for (let i = 0; i < numberOfElements; i++) {
|
|
||||||
let div = document.createElement('div');
|
|
||||||
div.className = 'part';
|
|
||||||
div.dataset.index = i;
|
|
||||||
fragment.appendChild(div);
|
|
||||||
}
|
|
||||||
|
|
||||||
staggerVisualizerEl.appendChild(fragment);
|
|
||||||
|
|
||||||
const staggersAnimation = anime.createTimeline({
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
loop: true,
|
|
||||||
autoplay: false
|
|
||||||
});
|
|
||||||
|
|
||||||
staggersAnimation
|
|
||||||
// Burst outward
|
|
||||||
.add('.part', {
|
|
||||||
translateX: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'x' }),
|
|
||||||
translateY: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'y' }),
|
|
||||||
scale: 0.5,
|
|
||||||
duration: 300,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
delay: anime.stagger(60, { grid: grid, from: 'center' })
|
|
||||||
}, 0)
|
|
||||||
// Spring outward further with randomness
|
|
||||||
.add('.part', {
|
|
||||||
translateX: (el, i) => anime.utils.random(-8, 8),
|
|
||||||
translateY: (el, i) => anime.utils.random(-8, 8),
|
|
||||||
scale: (el) => anime.utils.random(0.7, 1.2),
|
|
||||||
rotate: (el) => anime.utils.random(-90, 90),
|
|
||||||
duration: 600,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
delay: anime.stagger(100, { grid: grid, from: 'center' })
|
|
||||||
})
|
|
||||||
// Floating phase - organic motion
|
|
||||||
.add('.part', {
|
|
||||||
translateY: (el, i) => anime.utils.random(-4, 4),
|
|
||||||
rotate: (el, i) => anime.utils.random(-45, 45),
|
|
||||||
duration: 1400,
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
delay: (el, i) => i * 25 + anime.utils.random(-150, 150)
|
|
||||||
})
|
|
||||||
// Swirl inward
|
|
||||||
.add('.part', {
|
|
||||||
translateX: (el, i) => anime.utils.random(-10, 10),
|
|
||||||
translateY: (el, i) => anime.utils.random(-10, 10),
|
|
||||||
rotate: (el) => anime.utils.random(-180, 180),
|
|
||||||
duration: 800,
|
|
||||||
easing: 'easeInOutQuad',
|
|
||||||
delay: anime.stagger(40, { grid: grid, from: 'center' })
|
|
||||||
})
|
|
||||||
// Converge smoothly
|
|
||||||
.add('.part', {
|
|
||||||
translateX: 0,
|
|
||||||
translateY: 0,
|
|
||||||
rotate: (el) => anime.utils.random(0, 360),
|
|
||||||
scale: 1,
|
|
||||||
duration: 1000,
|
|
||||||
easing: 'easeOutExpo',
|
|
||||||
delay: anime.stagger(50, { grid: grid, from: 'center' })
|
|
||||||
});
|
|
||||||
|
|
||||||
staggersAnimation.play();
|
|
||||||
@ -1,125 +0,0 @@
|
|||||||
// Version 4: Extended Loop with Smooth Transitions
|
|
||||||
// Creates a much longer animation cycle that loops smoothly without harsh resets
|
|
||||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
|
||||||
const fragment = document.createDocumentFragment();
|
|
||||||
const grid = [12, 6];
|
|
||||||
const col = grid[0];
|
|
||||||
const row = grid[1];
|
|
||||||
const numberOfElements = col * row;
|
|
||||||
|
|
||||||
for (let i = 0; i < numberOfElements; i++) {
|
|
||||||
let div = document.createElement('div');
|
|
||||||
div.className = 'part';
|
|
||||||
div.dataset.index = i;
|
|
||||||
fragment.appendChild(div);
|
|
||||||
}
|
|
||||||
|
|
||||||
staggerVisualizerEl.appendChild(fragment);
|
|
||||||
|
|
||||||
// Extended animation cycle - 20 seconds total, much longer so loop is less jarring
|
|
||||||
const staggersAnimation = anime.createTimeline({
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
loop: true,
|
|
||||||
autoplay: false
|
|
||||||
});
|
|
||||||
|
|
||||||
staggersAnimation
|
|
||||||
// Initial expansion phase
|
|
||||||
.add('.part', {
|
|
||||||
translateX: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'x' }),
|
|
||||||
translateY: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'y' }),
|
|
||||||
scale: 0.5,
|
|
||||||
duration: 300,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
delay: anime.stagger(60, { grid: grid, from: 'center' })
|
|
||||||
}, 0)
|
|
||||||
|
|
||||||
// Chaotic burst phase
|
|
||||||
.add('.part', {
|
|
||||||
translateX: (el, i) => anime.utils.random(-10, 10),
|
|
||||||
translateY: (el, i) => anime.utils.random(-10, 10),
|
|
||||||
scale: (el) => anime.utils.random(0.7, 1.3),
|
|
||||||
rotate: (el) => anime.utils.random(-120, 120),
|
|
||||||
duration: 800,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
delay: anime.stagger(80, { grid: grid, from: 'center' })
|
|
||||||
})
|
|
||||||
|
|
||||||
// Floating drift phase 1
|
|
||||||
.add('.part', {
|
|
||||||
translateY: (el, i) => anime.utils.random(-6, 6),
|
|
||||||
rotate: (el) => anime.utils.random(-60, 60),
|
|
||||||
duration: 2000,
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
delay: (el, i) => i * 20 + anime.utils.random(-200, 200)
|
|
||||||
})
|
|
||||||
|
|
||||||
// Gentle swirl inward
|
|
||||||
.add('.part', {
|
|
||||||
translateX: (el, i) => anime.utils.random(-5, 5),
|
|
||||||
translateY: (el, i) => anime.utils.random(-5, 5),
|
|
||||||
rotate: (el) => anime.utils.random(-45, 45),
|
|
||||||
duration: 1500,
|
|
||||||
easing: 'easeInOutQuad',
|
|
||||||
delay: anime.stagger(50, { grid: grid, from: 'center' })
|
|
||||||
})
|
|
||||||
|
|
||||||
// Floating drift phase 2 - different direction
|
|
||||||
.add('.part', {
|
|
||||||
translateY: (el, i) => anime.utils.random(-8, 8),
|
|
||||||
rotate: (el) => anime.utils.random(-30, 30),
|
|
||||||
duration: 2200,
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
delay: (el, i) => i * 22 + anime.utils.random(-150, 150)
|
|
||||||
})
|
|
||||||
|
|
||||||
// Slow convergence
|
|
||||||
.add('.part', {
|
|
||||||
translateX: (el) => anime.utils.random(-2, 2),
|
|
||||||
translateY: (el) => anime.utils.random(-2, 2),
|
|
||||||
rotate: (el) => anime.utils.random(-15, 15),
|
|
||||||
duration: 1800,
|
|
||||||
easing: 'easeInOutQuad',
|
|
||||||
delay: anime.stagger(60, { grid: grid, from: 'center' })
|
|
||||||
})
|
|
||||||
|
|
||||||
// Gentle return to center with subtle movement
|
|
||||||
.add('.part', {
|
|
||||||
translateX: (el) => {
|
|
||||||
const index = parseInt(el.dataset.index);
|
|
||||||
return anime.utils.random(-1, 1);
|
|
||||||
},
|
|
||||||
translateY: (el) => {
|
|
||||||
const index = parseInt(el.dataset.index);
|
|
||||||
return anime.utils.random(-1, 1);
|
|
||||||
},
|
|
||||||
rotate: 0,
|
|
||||||
scale: 1,
|
|
||||||
opacity: 1,
|
|
||||||
duration: 2500,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
delay: anime.stagger(50, { grid: grid, from: 'center' })
|
|
||||||
})
|
|
||||||
|
|
||||||
// Long rest phase with breathing effect
|
|
||||||
.add('.part', {
|
|
||||||
scale: (el) => anime.utils.random(0.95, 1.05),
|
|
||||||
opacity: (el) => anime.utils.random(0.8, 1),
|
|
||||||
duration: 3000,
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
delay: (el, i) => i * 15
|
|
||||||
})
|
|
||||||
|
|
||||||
// Return to perfect rest
|
|
||||||
.add('.part', {
|
|
||||||
translateX: 0,
|
|
||||||
translateY: 0,
|
|
||||||
rotate: 0,
|
|
||||||
scale: 1,
|
|
||||||
opacity: 1,
|
|
||||||
duration: 1500,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
delay: anime.stagger(40, { grid: grid, from: 'center' })
|
|
||||||
});
|
|
||||||
|
|
||||||
staggersAnimation.play();
|
|
||||||
@ -1,136 +0,0 @@
|
|||||||
// Version 4: Gaussian Noise Overlay - Perpetual organic motion
|
|
||||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
|
||||||
const fragment = document.createDocumentFragment();
|
|
||||||
const grid = [12, 6];
|
|
||||||
const col = grid[0];
|
|
||||||
const row = grid[1];
|
|
||||||
const numberOfElements = col * row;
|
|
||||||
|
|
||||||
// Store element data for continuous noise animation
|
|
||||||
const elementData = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < numberOfElements; i++) {
|
|
||||||
let div = document.createElement('div');
|
|
||||||
div.className = 'part';
|
|
||||||
div.dataset.index = i;
|
|
||||||
fragment.appendChild(div);
|
|
||||||
|
|
||||||
// Store random animation parameters for each element
|
|
||||||
elementData.push({
|
|
||||||
element: div,
|
|
||||||
index: i,
|
|
||||||
// Random frequencies for sine wave oscillations
|
|
||||||
freqX: anime.utils.random(0.0008, 0.0012),
|
|
||||||
freqY: anime.utils.random(0.0006, 0.0010),
|
|
||||||
freqRot: anime.utils.random(0.0004, 0.0009),
|
|
||||||
freqOpacity: anime.utils.random(0.0005, 0.0008),
|
|
||||||
// Random amplitudes for movement
|
|
||||||
ampX: anime.utils.random(3, 8),
|
|
||||||
ampY: anime.utils.random(3, 8),
|
|
||||||
ampRot: anime.utils.random(10, 25),
|
|
||||||
// Phase offsets so they don't all move together
|
|
||||||
phaseX: anime.utils.random(0, Math.PI * 2),
|
|
||||||
phaseY: anime.utils.random(0, Math.PI * 2),
|
|
||||||
phaseRot: anime.utils.random(0, Math.PI * 2),
|
|
||||||
phaseOpacity: anime.utils.random(0, Math.PI * 2),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
staggerVisualizerEl.appendChild(fragment);
|
|
||||||
|
|
||||||
// Initial burst animation
|
|
||||||
const staggersAnimation = anime.createTimeline({
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
loop: true,
|
|
||||||
autoplay: false
|
|
||||||
});
|
|
||||||
|
|
||||||
staggersAnimation
|
|
||||||
// Burst outward
|
|
||||||
.add('.part', {
|
|
||||||
translateX: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'x' }),
|
|
||||||
translateY: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'y' }),
|
|
||||||
scale: 0.5,
|
|
||||||
duration: 300,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
delay: anime.stagger(60, { grid: grid, from: 'center' })
|
|
||||||
}, 0)
|
|
||||||
// Spring outward further with randomness
|
|
||||||
.add('.part', {
|
|
||||||
translateX: (el, i) => anime.utils.random(-8, 8),
|
|
||||||
translateY: (el, i) => anime.utils.random(-8, 8),
|
|
||||||
scale: (el) => anime.utils.random(0.7, 1.2),
|
|
||||||
rotate: (el) => anime.utils.random(-90, 90),
|
|
||||||
duration: 600,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
delay: anime.stagger(100, { grid: grid, from: 'center' })
|
|
||||||
})
|
|
||||||
// Floating phase - long duration
|
|
||||||
.add('.part', {
|
|
||||||
translateY: (el, i) => anime.utils.random(-4, 4),
|
|
||||||
rotate: (el, i) => anime.utils.random(-45, 45),
|
|
||||||
duration: 4000,
|
|
||||||
easing: 'easeInOutSine',
|
|
||||||
delay: (el, i) => i * 25 + anime.utils.random(-150, 150)
|
|
||||||
})
|
|
||||||
// Gentle convergence
|
|
||||||
.add('.part', {
|
|
||||||
translateX: 0,
|
|
||||||
translateY: 0,
|
|
||||||
rotate: (el) => anime.utils.random(0, 360),
|
|
||||||
scale: 1,
|
|
||||||
duration: 2000,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
delay: anime.stagger(40, { grid: grid, from: 'center' })
|
|
||||||
})
|
|
||||||
// Rest phase
|
|
||||||
.add('.part', {
|
|
||||||
opacity: 1,
|
|
||||||
duration: 6000,
|
|
||||||
delay: 0
|
|
||||||
}, '-=1000');
|
|
||||||
|
|
||||||
staggersAnimation.play();
|
|
||||||
|
|
||||||
// Continuous Gaussian noise animation - using requestAnimationFrame
|
|
||||||
let startTime = Date.now();
|
|
||||||
|
|
||||||
const applyNoise = () => {
|
|
||||||
const elapsed = Date.now() - startTime;
|
|
||||||
|
|
||||||
elementData.forEach((data) => {
|
|
||||||
// Multi-layered sine waves create Gaussian-like noise
|
|
||||||
const noiseX = Math.sin(elapsed * data.freqX + data.phaseX) * data.ampX +
|
|
||||||
Math.sin(elapsed * data.freqX * 0.3 + data.phaseX) * data.ampX * 0.3;
|
|
||||||
|
|
||||||
const noiseY = Math.sin(elapsed * data.freqY + data.phaseY) * data.ampY +
|
|
||||||
Math.sin(elapsed * data.freqY * 0.4 + data.phaseY) * data.ampY * 0.4;
|
|
||||||
|
|
||||||
const noiseRot = Math.sin(elapsed * data.freqRot + data.phaseRot) * data.ampRot +
|
|
||||||
Math.sin(elapsed * data.freqRot * 0.5 + data.phaseRot) * data.ampRot * 0.2;
|
|
||||||
|
|
||||||
// Smooth opacity breathing
|
|
||||||
const opacityVariation = Math.sin(elapsed * data.freqOpacity + data.phaseOpacity) * 0.12 + 0.88;
|
|
||||||
|
|
||||||
// Apply noise to element
|
|
||||||
data.element.style.filter = `opacity(${opacityVariation})`;
|
|
||||||
|
|
||||||
// Get current computed transform and add noise
|
|
||||||
// This is applied on top of anime's transforms
|
|
||||||
const currentTransform = window.getComputedStyle(data.element).transform;
|
|
||||||
const matrix = currentTransform.match(/matrix.*\((.+)\)/)[1].split(', ');
|
|
||||||
const currentX = parseFloat(matrix[4]) || 0;
|
|
||||||
const currentY = parseFloat(matrix[5]) || 0;
|
|
||||||
|
|
||||||
data.element.style.setProperty('--noise-x', `${noiseX}px`);
|
|
||||||
data.element.style.setProperty('--noise-y', `${noiseY}px`);
|
|
||||||
data.element.style.setProperty('--noise-rot', `${noiseRot}deg`);
|
|
||||||
});
|
|
||||||
|
|
||||||
requestAnimationFrame(applyNoise);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Start noise animation after a brief delay to let anime init
|
|
||||||
setTimeout(() => {
|
|
||||||
applyNoise();
|
|
||||||
}, 100);
|
|
||||||
Loading…
Reference in New Issue
Block a user