slider controlling Lottie animation with Javascript - javascript

I have a question:
Is there a way to control a Lottie animation using a slider in Javascript?
I've tried triggering the animation using a simple button and that works.
I'm using a physical slider (potentiometer) with an Arduino, so the slider gives me an input from 0-1023.
What I want to know is if I can translate the input from the potentiometer to the frames of the animation, so basically being able to play/reverse the animation frames using the slider.
I'm using JohnnyFive Javascript framework to communicate with my Arduino.

Yes, in theory that is perfectly possible. As lottie-web allows you to control exactly what frame is displayed. The tricky part might be first mapping the slider position with the animation frames.
You can get the duration in frames of an animation with getDuration(true). Then you could call the goToAndStop() function as the slider is moved.
You would need an event to be fired every time the slider position changes and catch it within your JavaScript code.
EDIT
You can read more about lottie here:
https://www.npmjs.com/package/lottie-web

Related

looking for smooth scrolling Slider/carousel without jQuery

I am looking for a pure JS - slider, which allows me to display a carousel, in which all slides are moved smoothly without intermediate stop. The following features would be important:
autoplay
supports drag,swipe,responsive
no dependency on jQuery
infinite loop
next / before
leightweight filesize
I want it feel like a marquee, it should pause on hover, execute the corresponding action directly when clicking forward or back, and continue again after a hover.
Can anyone here recommend me an appropriate slider?
Try https://swiperjs.com/
it has good documentation and examples and supports frameworks like react.js

How to make a button play a lottie animation, whilst being inside of it

So I have a lottie animation and it’s exactly the animation that I need, however it only either auto plays or plays on hover or have video control for it.
What I want to do is disguise a button inside the animation and only play the animation once it’s clicked.
I don’t need to worry about a stop button or resetting it because it’s a one time thing. Below are some pics captured of the animation so it will clear up on what I want.
I want the send button to be a button as right now it is only part of a lottie animation I made in after effects.
I have made the lottie animation in Adobe after effects and used bodymovin to export it into a lottie animation.
I feel like there must be a way for JavaScript to be able to stop the animation before it starts and only play after I click a certain button. I can then try to style that button to look the same as the lottie animation and put it on top same position and it only needs to play once,
However I’m not good enough at JavaScript to know if it’s either possible or how to do it.
Q
Edit: Finally found a way to do it, by making it so the lottie doesn’t play and putting an invisible button on top and adding some simple js event listeners to make it so that clicking the invis button triggers the animation.
So happy I finished it, really needed it done for today.

How to create a image slide show with scroll function?

I Want to create a slideshow of different images for a project with HTML, JS, and CSS. I want to create a scroll function that will move the image slides from left to right based on the movement of the mouse scroll.
If this sounds confusing this link shows exactly what I'm trying to do but due to my lack of experience, I have no idea how to accomplish this. Any ideas would help.
link: https://robbiecrenshaw.com/ about the halfway mark
thank you
(I'm a beginner in programming)
The animations used on this site are called scroll-based animations, where the animation progress is controlled directly by the scroll position.
They are implemented by listening to the scroll event that is fired when a user scrolls and updating the styles of certain elements dynamically based on the scroll position.
You can create scroll animations from scratch using JavaScript or implement them using a library like GSAP ScrollTrigger (which is what this specific site uses).
I created a demo similar to the effect you're looking for here: https://codepen.io/nickcil/pen/yLVEZPa
This example uses ScrollMagic to track the scroll position and update the transform property of an element to make the squares move left as you scroll down the page.

How to use javascript to make a 3d time picker like the alarm clock of iOS, with scroll animation?

I want to use javascript to make a 3d time picker (with perspective) as below (like the alarm clock of iOS).
And I want to trigger the scroll animation when I click a button.
I found many time pickers but it seems that they can only scroll when human touch, which is not what I want.
If I use the CSS animation rotateX, I can not change the opacity of each item when it's rotating.
So it seems that I have to write the animation myself, but I don't know how.
How could I make it?
For your second issue, I guess you could just use an overlapping element that is either semi-transparent or have a blend mode to the top and bottom (so just above and below your middle number)

JS whole page rotation

I'm trying give users the option of selecting a different homepage by clicking left or right, and having an entirely new page appear. I'm aware of a few jQuery carousels that accomplish this in a purely x axis, or y axis manner, but not a rotation. Ideally the background images will sync up, and the overall effect would be like a globe spinning, with a different set of elements at a different portion of the globe. The elements at each section of the globe still need to be interactive and
Does anyone have any ideas on that?
using jQuery, you should be able to do this using the .slideDown and slideUp methods.
Essentially, when they perform the action that you want to trigger a switch, you add a slideUp() to the 'current' container and do a slideDown() on the next one. The animations will run concurrently.
http://jsfiddle.net/g19fanatic/stLvj/
Not many people here will write you a full solution, but they'll be happy to work through specific issues.
Are these homepages on different domains and/or are they under your control?
How globe-like do you mean? A kind of sphere distortion, or just seamlessly connected at the edges?
How important is the smoothness of the concept?
Off the top of my head, here's how I would (attempt to) do it:
Load the homepages in separate iframes
Stretch the iframe to the window's dimensions
Adapt a carousel script to animate iframes instead of images
Some sort of "prev/next" controls overlaying the iframe. Maybe with z-index.
Check out landing.js file on http://thetruth.com/ (or just let the page timer run to see the carousel)
What you want is basically that but with animations instead of fading the page in/out.
Just add CSS3 transforms to scale and slide instead of the fadein/out when a new page loads.
A polyfill will add the transform capability in JS (see jquery.transform.js, jquery.transition.js by https://github.com/louisremi and Modernizr)

Categories