[NEW PLUGIN] Lottie-player + Scroll-Anim
Hello fellow Bubblers!
We are glad to announce our small addition to the plugin collection:
Lottie-player + Scroll-Anim
Easily add high-quality animation to your app.
Lottie is an library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images
Lottie is an open-sourced animation file format like no other. It is smaller with higher quality and allows for you to create animations that can be interacted with. So versatile, you can easily implement it on almost all platforms out there!
What is the use case for this?
Where this web animation really shines is in interactive design. With lottie-web, you can start or stop an animation in response to a user action (such as liking something on Twitter). Such subtle usage can really improve the overall user experience of your application.
How to get Lottie Animation JSON?
Login/Sign Up on Lottie Files https://lottiefiles.com/
Search Animation and Download JSON file.
Use Json URL (Lottie Animation URL)
You can also bind an animation to the scroll and/or pin the element (the element will stay in place while scrolling the page).
Element Actions:
play
stop
pause
setSpeed
goToAndStop
goToAndPlay
setDirection
playSegments
getDuration
updateTextDocumentData
Events:
Complete
LoopComplete
States:
duration
Installation.
Place the element “lottie-player” on the page and make settings.
Detailed settings you can find on our demo page:
DEMO
.
Plugin page:
.
.
.
.
.
.
.
.
.
If you have questions, reach out to us at contact@mindforapps.com
We appreciate your reviews and suggestions.
@MindForApps I think there may be a bug in the playSegments action. I have a Lottie file with 140 frames that I just want to play first 70 frames of when a particular button is clicked, but what happens instead is that the first time the button is clicked, the plugin plays the whole animation (i.e. frames 0-140) and only then plays frames 0 through 70. On every subsequent click, it behaves as it’s supposed to, playing 0-70 only.
Please update the plugin to version 1.0.1
Added “forceFlag” parameter to “Element Action” - “playSegments”.
.
.
Just set “forceFlag” = “true” and everything will work the way you want (expect).
Otherwise (“forceFlag” = “false”), the entire animation will play first, and then the selected segment.
I think this is exactly what you wanted.
If you still have questions, please contact us and we will try to help you.
Reworked the code responsible for the animation when scrolling:
Improved work of animation when scrolling and added the ability to choose in which direction the animation will occur when scrolling.
Also, to work with the new responsive engine, the “pushFollowers” parameter has been added. If “pushFollowers” = “true”, then the elements following the animation element will be paused (not scrolled) until the animation ends. (while this is a test function)
[NEW PLUGIN] Lottie-player + Scroll-Anim
