diff options
Diffstat (limited to 'src/client/views/nodes/trails/SlideEffect.tsx')
| -rw-r--r-- | src/client/views/nodes/trails/SlideEffect.tsx | 17 |
1 files changed, 9 insertions, 8 deletions
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx index e0be86875..03cd88f45 100644 --- a/src/client/views/nodes/trails/SlideEffect.tsx +++ b/src/client/views/nodes/trails/SlideEffect.tsx @@ -1,9 +1,10 @@ -import { useSpring, animated, easings, to, useInView } from '@react-spring/web'; -import React, { useEffect, useState } from 'react'; -import { PresEffect, PresEffectDirection } from './PresEnums'; -import './SlideEffect.scss'; +/* eslint-disable react/require-default-props */ +import { animated, to, useInView, useSpring } from '@react-spring/web'; +import React, { useEffect } from 'react'; import { Doc } from '../../../../fields/Doc'; import { NumCast } from '../../../../fields/Types'; +import { PresEffect, PresEffectDirection } from './PresEnums'; +import './SlideEffect.scss'; interface SlideEffectProps { // pass in doc to extract width, height, bg @@ -296,7 +297,7 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre {dir === PresEffectDirection.Bottom || dir === PresEffectDirection.Top ? ( <> <animated.div - className={'flip-side flip-back'} + className="flip-side flip-back" style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`), width: doc ? NumCast(doc.width) : DEFAULT_WIDTH, @@ -305,7 +306,7 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre }} /> <animated.div - className={'flip-side flip-front'} + className="flip-side flip-front" style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`), rotateX: '180deg', width: doc ? NumCast(doc.width) : DEFAULT_WIDTH, height: doc ? NumCast(doc.height) : DEFAULT_WIDTH }}> {children} </animated.div> @@ -313,11 +314,11 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre ) : ( <> <animated.div - className={'flip-side flip-back'} + className="flip-side flip-back" style={{ transform: to(springs.x, val => `perspective(600px) rotateY(${val}deg)`), width: doc ? NumCast(doc.width) : DEFAULT_WIDTH, height: doc ? NumCast(doc.height) : DEFAULT_WIDTH }} /> <animated.div - className={'flip-side flip-front'} + className="flip-side flip-front" style={{ transform: to(springs.x, val => `perspective(600px) rotateY(${val}deg)`), rotateY: '180deg', width: doc ? NumCast(doc.width) : DEFAULT_WIDTH, height: doc ? NumCast(doc.height) : DEFAULT_WIDTH }}> {children} </animated.div> |