path type. thru same as the path; soft with the curve of attraction facing them, but not through the point; cubic allows you to define standard Cubic Bezier, example: [start, control, control, end].
curviness
0-2
1
This determines how "curvy" the resulting path is. 0 is lines, 1 is curved path, 2 would make it much more curvy. It can be 1.5.
relative
boolean
false
Increase relative to current value. example: if the target's x starts at 100 and the path is [{x:5}, {x:10}, {x:-2}] , it would first move to 105, then 115, and finally end at 113.
ChildrenPlugin
Children = { value:, floatLength, formatMoney };
name
type
default
description
value
number
null
children number to value.
floatLength
number
null
float precision length
formatMoney
true \ { thousand, decimal }
null
format number to money.
formatMoney = { thousand, decimal }
name
type
default
description
thousand
string
,
no explanation.
decimal
string
.
no explanation.
TweenOneGroup
name
type
default
description
appear
boolean
true
whether support appear anim
enter
object / array / func
{ x: 30, opacity: 0, type: 'from' }
enter anim twee-one data. when array is tween-one timeline, func refer to queue-anim
leave
object / array / func
{ x: 30, opacity: 0 }
leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim
onEnd
func
-
one animation end callback
animatingClassName
array
['tween-one-entering', 'tween-one-leaving']
className to every element of animating
resetStyle
boolean
true
TweenOne resetStyle, reset the initial style when changing animation.
exclusive
boolean
false
Whether to allow a new animate to execute immediately when switching. enter => leave: execute immediately leave
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
index.js:335Uncaught RangeError: InvalidarraylengthatsetRatio(index.js:335)atindex.js:335atArray.forEach(<anonymous>)
at c.f.setRatio (index.js:335)
at index.js:335
at Array.forEach (<anonymous>)
at g.b.setRatio (index.js:335)
at index.js:335
at Array.forEach (<anonymous>)
at g.b.render (index.js:335)
TypeError: _this.target.getAttribute is not a function
at node_modules/rc-tween-one/lib/Tween.js:108:51
storyshots.test.ts
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
import '@/testUtils';
initStoryshots({
test: multiSnapshotWithOptions({}),
// TODO: Layout for now skip testing because issue with ant pro layout component
storyKindRegex: /^((?!.*?(Theme|Layout|DetailsPage)).)*$/,
});
I'm getting an error from the TweenOne child components: TweenOne domRef is error, and animations are not working. As seen in the React plugin for Chrome:
Is there a way to solve this issue? Would you have an example on animating an AntD 4.x table?
First of all - awesome package. Make apps look really fancy with all those animations!
I've started receiving the following error:
null is not an object (evaluating 'this.target.ownerSVGElement')
Tried to debug it for a long time. It just happens when I load the page that uses this package, but not always (approx. 10 out of 100 cases). Unfortunately that's all that I currently have.
Any ideas why it might be happening and what can I or we do to stop it?
edit
I've seen that it was the case of PR27. What was the reason it was not an acceptable solution?
似乎無法顯示出高度的變化, opacity 可正常顯示,
ps: 仍然有warning
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
If the tween-one component's animation start position is a minus value. Then in the latest Safari (both Mac and iPhone), the animation will start from position 0.
Hi,
I use rc-tween-one with latest version of nextjs ("next": "12.0.7",) and get the compile error:
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:988:16)
at Module._compile (internal/modules/cjs/loader.js:1036:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (/path/to/my-proj/node_modules/rc-tween-one/lib/plugin/PathMotionPlugin.js:10:48)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
error - SyntaxError: Cannot use import statement outside a module
/path/to/my-proj/node_modules/tween-one/es/plugins/PathMotionPlugin.js:1
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
^^^^^^
I found that the animation will start when the object is scrolled to the middle of the screen.
I tried to use playScale and other API to make the animation start when the object reach the bottom of the screen but none of the API is working.
Is there any way to make the animation works when object reach the bottom of the screen??
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.
Anyone else having this issue?
Is there a good way to solve this?
Warning: React does not recognize the `resetStyle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `resetstylebool` instead. If you accidentally passed it from a parent component, remove it from the DOM element.