We Keep Coding

How can i make layout of a shared animation like in framer motion

I'm creating a lightbox and I need an opening animation. The lightbox is in the form of a carousel (all images are rendered when opened and viewport moves - transform: translate(index * 100)% ) which causes some problems when I use framer movement. I'd like to make the animation look like "shared layout animation" in framer motion. I don't want to use framer motion. How can I do it by myself? Can you give me a codepen link with an example? If it's really really hard, could you give me a link to library other than framer motion that will allow me to do this (I prefer lightweight libraries)?
Framer motion example link: "https://codesandbox.io/embed/framer-motion-animatesharedlayout-app-store-demo-i1kct?codemirror=1"
When I click on an image it will open for me in a modal with smooth scale animation. This it what i need.
Thank you very much for your help and time.
Greetings.
I tried framermotion. Due to the fact that all images are rendered at once there are various problems. I only want animations when opening and closing, framer motion also changes animations during drag for example (my carousel lightbox supports drag). I have to check if index===activeIndex, otherwise it animates everything at once. I'm afraid shared layout is not for carousel lightbox

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.

slider controlling Lottie animation with 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

How can angularjs route transitions be animated interactively?

I know how to animate between routes, but how can these animations be made "interactive"? For example, rather than simply triggering a preset slide animation on swipe, I would like the animation to map directly to the user's drag gesture. Another side effect of this type of interaction is that a user should be able to start a transition, but then cancel it using the same gesture.
This sort of pattern seems important for building the sort of animated transitions seen in Google's Material Design. I can accomplish these transitions within a route, but for organizational reasons I would like to be able to do so between routes.
Any examples or descriptions of designs would be greatly appreciated.

I would do this :
Detect touchstart event and trigger behaviour
detect the finger position while moving, and shift your wrapper html element accordingly. Probably with css, like transform3d: translateX( ... )
on touchend, evaluate if the distance is enough to trigger route change
if not, animate back to original position with css transition.
You probably want to have a look at http://hammerjs.github.io/ for gesture detection.
Good luck !

Get a CSS position transition not to react on window zooming

I have a CSS3 position transition that makes a dive slide from one side to another when called by a JavaScript function (the function changes the value of style element "left"). This works great, but the CSS-transition also reacts to when a window is zoomed or resized, causing the div to appear in a faulty position for a second, before it transitions back to place.
Is there any way to only make it react only to my function, or do I have to do it the old fashion way, making a JavaScript transition?
Edit: You can find my code here: http://jsfiddle.net/PURFp/

You can add the transition property right before you start the animation and remove it after the animation has ended. Here's a demo : http://jsfiddle.net/PURFp/2/.