Support `goToAndStop`?
See original GitHub issueHi there,
I’m interested in being able to set the exact frame of the animation, so that I can sync the animation as the user scrolls down the page.
For now, I’ve created a subclass of Lottie
that takes a percentage
parameter and then uses it to set the frame:
export default class LottieWithAnimationControl extends Lottie {
static propTypes = {
...Lottie.propTypes,
percentage: PropTypes.number,
}
anim: any
props: Props
componentDidUpdate(prevProps: Props, prevState: any, prevContext: any) {
if (super.componentDidUpdate) {
super.componentDidUpdate(prevProps, prevState, prevContext)
}
if (this.props.percentage !== prevProps.percentage && this.anim.totalFrames) {
const frame = Math.round(this.anim.totalFrames * this.props.percentage)
this.anim.goToAndStop(frame, true)
}
}
}
However, what do you think of supporting this natively in the component?
Issue Analytics
- State:
- Created 5 years ago
- Reactions:15
- Comments:6
Top Results From Across the Web
MovieClip.gotoAndStop( ) Method - ActionScript - O'Reilly
Name MovieClip.gotoAndStop( ) Method — jump to a given frame, and stop the playhead Availability Method form introduced in Flash 5 (global form...
Read more >expression "gotoandstop" ? HELP ! - Adobe Support Community
Hello, I'm looking to write an expression that would move the playhead of a composition into a named layer.
Read more >currentFrame and goToAndStop method issue + playTo method
Hi ! Awesome library ! I want to make an interactive animated button with lottie and I like to know if it's possible...
Read more >How to use the lottie-web.goToAndStop function in ... - Snyk
To help you get started, we've selected a few lottie-web.goToAndStop examples, based on popular ways it is used in public projects.
Read more >LottieAnimation QML Type | Qt Lottie Animation 6.2.7
Currently, only subset of the full Bodymovin specification is supported. ... starts go here gotoAndPlay(startFrame); } } onFinished: { console.log("Finished ...
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 Free
Top 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
@jessepinho Thanks for this! I’ve been looking for something like it for days. 😃
Is there any chance you could walk through how it works? I’m pretty new to JS and React, so I’d really appreciate the lesson. I roughly understand the last section calculating which frame to be on using a percentage received from the parent component, but I’m pretty confused about everything before that (aside from propTypes). These lines are particularly mysterious to me:
prevState: any, prevContext: any
@gigamesh @wahlforss I’m hacking something together needing this basic functionality, using the code from @jessepinho I got this to work using the following, I’ve simplified down the use case a bit but the following is the ‘barebones’: (Basically I just removed all the bits that were confusing you and that seemed to do the trick)