-
Notifications
You must be signed in to change notification settings - Fork 19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature Request] Optimizing production bundle size using light version of lottie-web player #68
Comments
kopax-polyconseil
changed the title
Optimizing production bundle size
[Feature Request] Optimizing production bundle size using light version of lottie-web player
Aug 3, 2022
Merged
6 tasks
What about doing this :
import React, { PureComponent } from 'react';
import lottie from 'lottie-web';
import Animation from './Animation';
export default React.forwardRef((props, ref) => (
<Animation {...props} ref={typeof ref == 'function' ? (c) => ref(c && c.anim) : ref} lottie={lottie} />
));
import React, { PureComponent } from 'react';
import lottie from 'lottie-web/build/player/lottie_light.min';
import Animation from './Animation';
export default React.forwardRef((props, ref) => (
<Animation {...props} ref={typeof ref == 'function' ? (c) => ref(c && c.anim) : ref} lottie={lottie} />
)); and import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import { View } from 'react-native';
export default class Animation extends PureComponent {
animationDOMNode = null;
componentDidMount() {
this.loadAnimation(this.props);
if (typeof this.props.progress === 'object' && this.props.progress._listeners) {
this.props.progress.addListener((progress) => {
const { value } = progress;
let frame = value / (1 / this.anim.getDuration(true));
this.anim.goToAndStop(frame, true);
});
}
}
componentWillUnmount() {
if (typeof this.props.progress === 'object' && this.props.progress._listeners) {
this.props.progress.removeAllListeners();
}
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (this.props.source && nextProps.source && this.props.source.nm !== nextProps.source.nm) {
this.loadAnimation(nextProps);
}
}
loadAnimation = (props) => {
if (this.anim) {
this.anim.destroy();
}
this.anim = this.props.lottie.loadAnimation({
container: this.animationDOMNode,
animationData: props.source,
renderer: 'svg',
loop: props.loop || false,
autoplay: props.autoPlay,
rendererSettings: props.rendererSettings || {},
});
if (props.onAnimationFinish) {
this.anim.addEventListener('complete', props.onAnimationFinish);
}
};
setAnimationDOMNode = (ref) => (this.animationDOMNode = ReactDOM.findDOMNode(ref));
play = (...frames) => {
if (!this.anim) {
return;
}
this.anim.playSegments(frames, true);
};
reset = () => {
if (!this.anim) {
return;
}
this.anim.stop();
};
render() {
return <View style={this.props.style} ref={this.setAnimationDOMNode} />;
}
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
According to this issue airbnb/lottie-web#1184 there is a "light" version, that can be used like in here: https://github.com/garbit/lottie-web-vue/pull/5/files
So far we will test it with a patch-package, but would be nice to be able to change this here.
I am not sure if it can break for some, how would your recommend to do that ?
Thanks!
The text was updated successfully, but these errors were encountered: