[BUG] No way to add translateY with useTransform() and useScroll()

[nicitaacom]

2. Describe the bug

When I scroll I got value like 0.45495px
I want value like 454px or 45px or something like that

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
Your codesandbox doesn't work at all for me - I got infinity loading and admins just ignore me also I got error when I tried to make codesandbox public

github - https://github.com/nicitaacom/14_portfolio/blob/issue-framer-motion/app/components/Project.tsx
make git clone

4. Steps to reproduce

Steps to reproduce the behavior:

1. Implemet scroll animation using this guide - https://www.youtube.com/watch?v=m1Cm1ivOjzU&ab_channel=ByteGrad
2. Instead of opacity and scroll make translateY

5. Expected behavior

Read what I wrote above

6. Video or screenshots
No

7. Environment details

No

FAQs

Framer Motion won't install

Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.

height: "auto" is jumping

Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.

The recommended solution is to move padding to a child element. See this issue for the full discussion.

Type error with AnimateSharedLayout

AnimateSharedLayout was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.

Preact isn't working

Framer Motion isn't compatible with Preact.

AnimatePresence isn't working

Have all of its immediate children got a unique key prop that remains the same for that component every render?

// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
  {items.map((item, index) => <Component key={index} />)}
</AnimatePresence>

// Good: The item ID is unique to each component
<AnimatePresence>
  {items.map((item, index) => <Component key={item.id} />)}
</AnimatePresence>

Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!

// Bad: AnimatePresence is unmounted - exit animations won't run
{isVisible && (
  <AnimatePresence>
    <Component />
  </AnimatePresence>
)}

// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>
  {isVisible && <Component />}
</AnimatePresence>

[DanPongo]

Hey, I'll be glad to work on this issue.

[nicitaacom]

Hey, I'll be glad to work on this issue.

If you need any additional info - message me about it
If you want we can make a call in telegram/discord

[mattgperry]

Please reopen with sandbox