[BUG] Typescript error when using useTransform to combine 2 useTransforms
See original GitHub issue2. Describe the bug I have 2 useTransforms (x, y) which I want to combine into a string to use as a CSS transform (not sure of what other way to do this — top/left isn’t performant)
const progress = useSpring(0, {spring});
const x = useTransform(progress, [0, 1], [0, 100]);
const y = useTransform(progress, [0, 1], [0, 100]);
const t = useTransform([x, y], ([x:, y]) => `translate(${x}px, ${y}px)`);
But when I pass them into a 3rd useTransform to combine, typescript complains
TypeScript error in /Users/tarng/Code/playspace/src/av/Stream.tsx(21,26):
No overload matches this call.
Overload 1 of 3, '(input: MotionValue<unknown>, transformer: SingleTransformer<unknown, unknown>): MotionValue<unknown>', gave the following error.
Argument of type 'MotionValue<number>[]' is not assignable to parameter of type 'MotionValue<unknown>'.
Type 'MotionValue<number>[]' is missing the following properties from type 'MotionValue<unknown>': current, prev, timeDelta, lastUpdated, and 19 more. TS2769
19 | const x = useTransform(progress, [0, 1], [0, 100]);
20 | const y = useTransform(progress, [0, 1], [0, 100]);
> 21 | const t = useTransform([x, y], ([x, y]) => `translate(${x}px, ${y}px)`);
| ^
if i try this on codepen without strict typescript, it throws this error:
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug https://codesandbox.io/s/framer-motion-2-animatesharedlayout-animate-between-different-components-forked-qmgro?file=/src/App.js
4. Steps to reproduce
Steps to reproduce the behavior: Load the prototype, see typescript or type error
5. Expected behavior
It should run
6. Video or screenshots N/A 7. Environment details Chrome, macos
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:8 (4 by maintainers)
Top Results From Across the Web
useTransform | Framer for Developers
We can use useTransform to create a new motion value called opacity . By defining an input range and an output range we...
Read more >Build a Modern/Creative portfolio with 3d experience html css ...
In this course you will learn how to build a modern, creative and responsive portfolio, i take you from a blank page to...
Read more >Common Issues with Poor Performance in Ionic Applications
We are going to discuss some basic examples of using the Fetch API. Keep in mind that we are just going to display...
Read more >Framer Motion: useTransform w/ multiple values - CodeSandbox
InventingWithMonsterInventingWithMonster. TemplateFramer Motion 2: AnimateSharedLayout animate between different components; Environmentcreate-react-app.
Read more >Error in typescript using react framer Type '() => void' is not ...
FunctionComponent = () => { return ( <Counter valueTo={30} totalDuration={2 + 0.5} />% ); }; import { useEffect, useRef, useState } from 'react' ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
i cry
Ive also run into this, not sure how to fix though. Currently I’ve worked around it with a
as any
with the properties