aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/trails/SlideEffect.tsx
diff options
context:
space:
mode:
authorSophie Zhang <sophie_zhang@brown.edu>2024-04-10 15:26:32 -0400
committerSophie Zhang <sophie_zhang@brown.edu>2024-04-10 15:26:32 -0400
commit43569b25466aa9bcf19f0f78c6ccd0928c98ab05 (patch)
treef7d11032a82e0fb1ca2fb4f3e2c20570471bc96b /src/client/views/nodes/trails/SlideEffect.tsx
parent6e3f78c394e0703465344705987ce3fd4bedd756 (diff)
fix: naming, cleaning
Diffstat (limited to 'src/client/views/nodes/trails/SlideEffect.tsx')
-rw-r--r--src/client/views/nodes/trails/SlideEffect.tsx44
1 files changed, 16 insertions, 28 deletions
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 7e2985a6a..e3423069b 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -1,18 +1,10 @@
-import { Button } from '@mui/material';
import { useSpring, animated, easings, to } from '@react-spring/web';
import React, { useEffect, useState } from 'react';
-import { PresEffectDirection } from './PresEnums';
-
-export enum EffectType {
- ZOOM = 'zoom',
- FADE = 'fade',
- BOUNCE = 'bounce',
- ROTATE = 'rotate',
-}
+import { PresEffect, PresEffectDirection } from './PresEnums';
interface Props {
dir: PresEffectDirection;
- effectType: EffectType;
+ presEffect: PresEffect;
friction: number;
tension: number;
mass: number;
@@ -20,7 +12,7 @@ interface Props {
}
// TODO: add visibility detector when the slide comes into view
-export default function SpringAnimation({ dir, friction, tension, mass, effectType, children }: Props) {
+export default function SpringAnimation({ dir, friction, tension, mass, presEffect: presEffect, children }: Props) {
const [springs, api] = useSpring(
() => ({
from: {
@@ -53,14 +45,12 @@ export default function SpringAnimation({ dir, friction, tension, mass, effectTy
x: 0,
y: 0,
opacity: 1,
- // opacity: 0,
},
to: {
scale: 1,
x: 0,
y: 0,
opacity: 1,
- // opacity: 1,
config: {
tension: tension,
friction: friction,
@@ -164,36 +154,34 @@ export default function SpringAnimation({ dir, friction, tension, mass, effectTy
],
};
- const handleClick = () => {
- if (effectType === EffectType.BOUNCE) {
+ const flipConfig = {};
+
+ const startAnimation = () => {
+ if (presEffect === PresEffect.Bounce) {
api.start(bounceConfig);
- } else if (effectType === EffectType.ZOOM) {
+ } else if (presEffect === PresEffect.Zoom) {
api.start(zoomConfig);
- } else if (effectType === EffectType.ROTATE) {
+ } else if (presEffect === PresEffect.Rotate) {
api.start(rotateConfig);
- } else if (effectType === EffectType.FADE) {
+ } else if (presEffect === PresEffect.Fade) {
api.start(fadeConfig);
}
};
+ const flipRender = () => {};
+
useEffect(() => {
+ // TODO: Control start with slide visibility instead
setTimeout(() => {
- handleClick();
+ startAnimation();
}, 200);
}, []);
return (
- <div
- // className="demo"
- // onPointerEnter={() => {
- // handleClick();
- // }}
- >
- {effectType !== EffectType.ROTATE ? (
+ <div>
+ {presEffect !== PresEffect.Rotate ? (
<animated.div
style={{
- // display: 'inline-block',
- // transform: 'translate(50px, 50px)',
...springs,
}}>
{children}