question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Property 'type' does not exist on AnimateSharedLayout's component props.

See original GitHub issue

Describe the bug The documentation for <AnimateSharedLayout> describes a type prop that takes the strings crossfade and switch as values. This prop does not appear to exist in the actual type, and so I get a typescript error: Property 'type' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'

CodeSandbox https://codesandbox.io/s/crazy-sinoussi-ejv4t?file=/src/App.tsx

Steps to reproduce

  1. Go to the CodeSandbox and wait for the type error to show.

Expected behavior Would expect that the types match the docs (I hope that doesn’t carry a snarky tone, none is intended).

Screenshot

image

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
mattgperrycommented, Mar 8, 2022

It happens automatically between two elements with the same layoutid. You can turn it off by unmountibg the exiting element

Op ma 7 mrt. 2022 om 23:02 schreef Karl Kihlström @.***>

@mattgperry https://github.com/mattgperry Can the crossfade behaviour previously made available with <AnimateSharedLayout type="crossfade"> be achieved in version > 5, and if so, how would one go about it?

Thanks!

— Reply to this email directly, view it on GitHub https://github.com/framer/motion/issues/1370#issuecomment-1061181265, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB34WKVWCEKYK7TUH747U7LU6Z4FRANCNFSM5IVCNUKQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

1reaction
mattgperrycommented, Nov 24, 2021

It’s been removed in 5, i delisted the page but will add a notice

Read more comments on GitHub >

github_iconTop Results From Across the Web

Type '{ children: Element; }' has no properties in common with ...
This is a recent bug caused by this PR on types of react v18. ... 'framer-motion' { export interface AnimatePresenceProps { children?:
Read more >
AnimateSharedLayout | Framer for Developers
The AnimateSharedLayout component enables you to perform layout animations: Across a set of components that don't otherwise share state.
Read more >
property 'type' does not exist on type 'intrinsicattributes - You.com ...
The type of the return value of the connect function is a functional component that requires Props , not a bare functional component....
Read more >
Everything about Framer Motion layout animations
A complete guide to Framer Motion layout animations showcasing every concept, from the layout prop, shared layout animations and LayoutGroup ...
Read more >
React.js: Property 'children' does not exist on type 'X'
The React.js error "Property 'children' does not exist on type" occurs when we try access the `children` property in a component for which...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found