Comments (11)
hi @yael-screenovate
you could pass in a renderer prop and set it as 'svg'
from lottie-react.
<Player
ref={this.player} // set the ref to your class instance
autoplay={false}
loop={true}
controls={true}
src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
style={{ height: '300px', width: '300px' }}
renderer='svg'
>
from lottie-react.
Hey @karamalie,
i get the following error:
Type '{ loop: boolean; renderer: string; autoplay: true; animationData: any; rendererSettings: { preserveAspectRatio: string; }; }' is not assignable to type 'Options'.
Object literal may only specify known properties, and 'renderer' does not exist in type 'Options'.ts(2322)
This is my options
type:
/**
* Defines if the animation should play only once or repeatedly in an endless loop
* or the number of loops that should be completed before the animation ends
/
loop?: boolean | number;
/*
* Defines if the animation should immediately play when the component enters the DOM
/
autoplay?: boolean;
/*
* The JSON data exported from Adobe After Effects using the Bodymovin plugin
/
animationData: any;
rendererSettings?: {
preserveAspectRatio?: string;
/*
* The canvas context
/
context?: any;
scaleMode?: any;
clearCanvas?: boolean;
/*
* Loads DOM elements when needed. Might speed up initialization for large number of elements. Only with SVG renderer.
/
progressiveLoad?: boolean;
/*
* Hides elements when opacity reaches 0. Only with SVG renderer.
* @default true
*/
hideOnTransparent?: boolean;
className?: string;
from lottie-react.
could you show me the player code as well? and the version of the package you re using
from lottie-react.
const defaultOptions: Options = { loop: true, autoplay: true, animationData, rendererSettings: { preserveAspectRatio: 'xMidYMid slice', }, }; return ( <Lottie options={defaultOptions}/> );
from lottie-react.
could you pass in the props directly in as ive demoed in the previous comment and give it a try
from lottie-react.
You mean like this:
<Lottie renderer='svg' loop={true} autoplay={true} animationData={this.props.Data} rendererSettings={preserveAspectRatio: 'xMidYMid slice'} /> );
?
I still get an error:
(JSX attribute) renderer: string
No overload matches this call.
Overload 1 of 2, '(props: LottieProps | Readonly): Lottie', gave the following error.
Type '{ renderer: string; loop: boolean; autoplay: boolean; animationData: any; rendererSettings: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Property 'renderer' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Overload 2 of 2, '(props: LottieProps, context: any): Lottie', gave the following error.
Type '{ renderer: string; loop: boolean; autoplay: boolean; animationData: any; rendererSettings: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Property 'renderer' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.ts(2769)
from lottie-react.
these are the available props. rendererSettings is not a prop. animationData is not a prop either. it should be src. have a look at the photo
from lottie-react.
Im using react-Lottie (as the title of the question says.) Here are the list of props for it https://www.npmjs.com/package/react-lottie
from lottie-react.
this is the repo attached to this player https://www.npmjs.com/package/@lottiefiles/react-lottie-player that ones a different player hehe
from lottie-react.
Closing this issue as the package usage differs from that of this repo :)
from lottie-react.
Related Issues (20)
- setSeeker frame: number | string, or just number? HOT 2
- Lottie in Next.js 13 TypeError: Class extends value undefined is not a constructor or null HOT 3
- Dynamic animation data HOT 1
- `dotLottie` file support HOT 3
- Pause the animation on the final frame HOT 2
- Some lottie animations do not work on version 3.5.0 and above HOT 4
- CPU usage is verrrrrry high HOT 11
- Audio support HOT 1
- onEvent never fires HOT 1
- Segment Play on Scroll: Can't Force Play
- How do you play TGS with this? HOT 1
- Blincking problem on zoom in and out on trackpad HOT 1
- Lottie-React broke the project HOT 1
- Canvas renderer visual bug HOT 3
- There are issues with using React umi HOT 1
- Kjh
- ReferenceError: document is not defined at createTag (node >18) HOT 5
- Lottie animation using @lottiefiles/react-lottie-player(v. 3.5.3) doesn't appear on iOS and iPadOS HOT 4
- Deprecated Module Warning HOT 1
- Animation doen not play on production HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lottie-react.