Develop Reference

Anime.js How to animate the transition of an element to the center of the page?

There is an element that, when the page is loaded, should smoothly move to the center from the left side of the screen, depending on the resolution of the device. TranslateX parameter: 0, does not accept percent. It is necessary that this be implemented precisely on the Anime.js plugin.

You can simply do it using the transition property in CSS, example:
.example {
transform: ....;
transition: transform 1s ease-in-out;
}
this is the simple use case of this, but you'd have to adapt it to your existing code because you didn't post any for me to drop this into.

CSS #keyframes Animation: Scaling up a div does not change the "size of it's box"

So I have got a list of <div> elements.
I use JavaScript to change the contents of this list by inserting or removing elements according to filters, put in by users.
When inserting/creating a new <div> element, I use #keyframe animations to change the opacity from zero to one and give a little fade in from the left.
#keyframes fade-in-left {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
Everything is working perfectly fine but there is one crucial design problem:
What I want now, is a scale up animation. I can easily do that but the problem is that when inserting a new element, the elements in the list after it snap to the position at which they would be when the inserted <div> has completed scaling to 1.
The problem here is obviously the following: Changing the scale of a transform does not affect the positioning of the other elements. I would have to change the height. But I cannot do that, there is padding, margin etc.
So can anyone please tell me a solution to this problem? Thank you.

using css transform scale on element positioned using translateY

Front-end developers have little recourse but to use css transform: translateY(-50%) with top: 50% to vertically center elements of variable height. I'm doing this for a slide show of images that I want to be able to zoom in on. I've been trying to animate this using transform: scale(x) but of course any transform values applied to an element will overwrite any other ones that came before. So, to preserve transform: translateY(-50%) value while also running animate( transform: 'scale(2.5)' )I've instead run animate( transform: 'translateY(-50%) scale(2.5)' ). However, in all cases I've noticed that same curious result. The first time I trigger the animation it simply resets the translate values to nothing, and then on subsequent runs it toggles the following transform values on and off:
first state:
-webkit-transform: translate(0px, -50px) rotate(0rad) skewX(0rad) scale(1, 1);
second state:
-webkit-transform: translate(0px, -125px) rotate(0rad) skewX(0rad) scale(2.5, 2.5);
On thing that's clear is my reset translateY value somehow gets reinterpreted to pixels before being multiplied by the same factor as the scale.
Here's the code. For a little more content, the slideshow has a property draggable that I am toggling on and off in concert with enabling the zoom since I think having them work simultaneously would be terrible for UX.
$('.activate-zoom').click (e) ->
if $('.slideshow-products').slick('slickGetOption', 'draggable')
$('.slideshow-products').slick('slickSetOption', 'draggable', false).slick('slickSetOption', 'swipe', false)
$('.products .slick-active img').animate( 'transform': 'scale(2.5) translateY(-50%)')
else
$('.slideshow-products').slick('slickSetOption', 'draggable', true).slick('slickSetOption', 'swipe', true)
$('.products .slick-active img').animate( 'transform': 'scale(1) translateY(-50%)' )
What can I do to prevent the image from first reseting its translateY value, remaining vertically centered, and then zooming given that y-axis baseline.

How to resize an image fluidly/dynamically

I'm trying to create a website design where I have a 3 by 3 grid of images, and whenever I put the mouse over a particular image, that image gets resized slightly larger than the rest. This re-size shouldn't happen instantly though; it would be a sort of fluid animation where the height and width of the image are increasing by x pixels per frame (while maintaining aspect ratio) until reaching the desired size.
I'm pretty sure this can be done in JQuery but I can't seem to find the command for it. The closest I could find is the JQuery scale effect, but that shrinks the image into nothing instead of dynamically increasing its size to some prescribed maximum.
Now assuming I got the implementation for that correct, how would I get the script to resize the images individually when the mouse hovers over them? So far I've only been able to resize all the images at once, and I'm not sure how I could fix that through the script if I gave each of the 9 images separate ids.

CSS transitions are what you need. You can adjust the timing of the change and animate any CSS property with them.
The following code will expand the image by a factor of 1/5 in 1 second when the mouse hovers over the image.
img {
width: 200px;
height: 150px;
transition: width 1s;
-webkit-transition: width 1s;
transition: height 1s;
-webkit-transition: height 1s;
}
img:hover{
width: 240px;
height: 180px;
}
Here is a rough fiddle to get you started.

choosing axis to flip a div using css

When setting -webkit-transform: rotateY(180deg) it always rotates with the axis being at the center of the div. Is there a way to set it so that it flips from the far left or right edge of the div e.g. like how a door swings?

Use https://developer.mozilla.org/En/CSS/-moz-transform-origin