Develop Reference

Is there any way to animate transform-origin in combination with transform: scale?

So I have an image viewer which has a zoom functionality, which works via the transform: scale() property.
Animating the zoom is no problem with transition: transform .3s.
To make the zoom on the mousewheel go to where the mousewheel is pointed, I calculated the correct position to set the new origin, but when I set it, it just jumps there with no animation.
What I have tried:
Setting transition for the transform-origin property → Doesn't work
Doing it manually in JS with setTimeout and slowly setting the transform-origin at the right position → plays the zoom animation and then jumps
Is there any way to animate both transform: scale() and transform-origin in one go?
Dupe
As the last question has been closed as a duplicate of How to have multiple CSS transitions on an element?, here is a snippet, to show you that this is not my question.
const img = document.querySelector('#container img');
let on = true;
const toggleEffect = () => {
if(on) {
img.style.transform = 'scale(2.5)';
img.style.transformOrigin = '80% 80%';
} else {
img.style.transform = 'scale(1.4)';
img.style.transformOrigin = '20% 20%';
}
on = !on;
};
#container {
width: 500px;
height: 300px;
overflow: hidden;
background-color: red;
}
#container img {
height: 100%;
width: 100%;
object-fit: contain;
transform: scale(1.4);
transform-origin: 20% 20%;
transition: transform .3s, transform-origin .3s;
}
<div id="container">
<img src="https://images.unsplash.com/photo-1482066490729-6f26115b60dc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2004&q=80"/>
</div>
<button onclick="toggleEffect()">Toggle</button>

EDIT: Technically this is a duplicated. (Chrome Bug in some versions)
- Using both transition:
body, div {
width: 100%;
height: 100vh;
overflow: hidden;
}
div {
background-color: gray;
width: auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
transform: scale(1.1);
transform-origin: 50% -30px -100px;
transition: transform-origin .2s ease-in-out, transform 4s ease-in-out;
}
div:hover {
transform: scale(1.7);
transform-origin: 100px 100px;
}
<div>Test</div>
- Using animation with#keyframes:
body,div {
width: 100%;
height: 100vh;
}
div {
width: auto;
display: flex;
justify-content: center;
align-items: center;
transform-origin: 0 0 0;
animation: scale-origin 3s infinite;
font-size: 30px;
}
#keyframes scale-origin {
0% {
transform: scale(.5);
transform-origin: 100px 100px 1000px;
}
100% {
transform: scale(1.1);
transform-origin: left 500px -30px
}
}
<div>Test</div>

For me the only way to get around this bug was to ensure a redraw of the element on each "animation" (in this case transition) frame as you can clearly see via getComputedStyle that the transform-origin is correctly transitioned!
Basically I added eventlisteners for the transitionstart and transitionend and on each animationframe toggle some style attribute that enforces a redraw (f.e. in my case margin-left from 0 to 1 to 0px until the animation is finished)
function forceRedraw(ts) {
this.style.marginLeft = this.style.marginLeft == '1px' ? '0px':'1px';
if (this.classList.contains('transitioning'))
requestAnimationFrame(forceRedraw.bind(this));
}
In my example I transition rotation and the transform-origin (from top left to bottom left) at the same time.
https://codepen.io/ftav/pen/QWvYEPj
Depending on which element you modify this might have more or less of a performance impact. It works fine for me. I just wish they would fix the bug and this workaround could go away.

problem with removing animation and show full size image HTML/CSS/JS

I write a mini project at html,css,js.
I have an 20% width image that moves with an infinite animation left to right.
for example:
.img {
width: 20%,
animation: move infinite;
}
#keyframes move {
from {
left: 100%;
}
to {
left: -50%;
}
}
I want, when I press the image to come to the center of the screen with its actual width.
My problem is when I remove the animation class (cause it needs to stop moving), I lose the left & top attributes of the image and also the transition from 20% width to full-width does not work smoothly. Any ideas on how this can be implemented?
Thanks

You basically wrote the requirements correctly in the question. The problem is, you did not code step by step what you want. Read again your requirements like so:
1. I have an 20% width image that moves with an infinite animation left to right
2. I want, when I press the image to come to the center of the screen with its actual width.
3. My problem is when I remove the animation class (cause it needs to stop moving)
So basically there are 3 states:
the image with what ever styles, image class => .img
animation the image has some sort of animation, animation class => .animate
finished at some stage we have a "finished" animation state, finished class => .finish
Like so you have defined three states in CSS where you can later just add/remove properties for any given state and you can add/remove the classes to the element (in this case the image).
(Cause it is really hard to click on a moving element, I've created a wrapper with a click-area. Obviously you can change the click event listener back to the image and try, it's really hard to click it...)
var image = document.querySelector('img');
var clickArea = document.querySelector('.click-area');
clickArea.addEventListener('click', function(){
image.classList.add('finish');
image.classList.remove('animate');
});
.wrapper {
position: relative;
width: 100%;
height: 300px;
border: solid 2px orange;
}
.img {
position: absolute;
}
.finish {
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
}
.animate {
width: 20%;
animation: move infinite 2s;
}
#keyframes move {
from { left: 100%; }
to { left: -50%; }
}
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>
If there are multiple of those images on the same page it's almost the same! Figure out the differences for yourself.
var clickAreas = document.querySelectorAll('.click-area');
[...clickAreas].forEach(function(clickArea){
var image = clickArea.querySelector('img'); // find only the image inside the click-area
clickArea.addEventListener('click', function(){
image.classList.add('finish');
image.classList.remove('animate');
});
});
.wrapper {
position: relative;
width: 100%;
height: 100px; /* tweaked the height so we can see more the just one */
border: solid 2px orange;
}
.img {
position: absolute;
width: auto; /* tweaked the height so we can see more the just one */
height: 100px; /* tweaked the height so we can see more the just one */
}
.finish {
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
}
.animate {
width: 20%;
animation: move infinite 2s;
}
#keyframes move {
from { left: 100%; }
to { left: -50%; }
}
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>

Triggering an animation on a div by clicking a button using addClass/removeClass with Javascript

So I'm trying to trigger an animation by clicking on a button using addClass and removeClass with Javascript.
I'm not bad at HTML/CSS but I only strating to learn Javascript by editing snipets.
So here's mine can you tell me why my div won't rotate when I click the black button ?
Thanks in advance !
<button class="menu-circle"></button>
<img class='imgblock' src="http://lorempixel.com/400/200/" alt="" />
.menu-circle {
height: 100px;
width: 100px;
background-color: #000000;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: .1s;
z-index: 100;
border: none;
}
.menu-circle:hover {
height: 115px;
width: 115px;
}
.menu-circle:active {
height: 100px;
width: 100px;
}
.imgblock {
display: block;
margin: 20px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
.rotate {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
$('.menu-circle').on('click', function(){
$('img .imgblock').addClass('rotate');
$('img .imgblock .rotate').removeClass('rotate');
});
WORKING FIDDLE :
http://jsfiddle.net/leokaj/rv5PR/366/

You have several problems with your fiddle:
Wrong class names: in js $('.menucircle') and in html - class="menu-circle"
You don't need space between img and class in jquery selector $('img .imgblock') - space means you're looking for .imgblock class inside the img tag (which is impossible).
.current class is not defined nor in html, nor in css, but appear in js
Here's fiddle where I fixed the problems and which works: DEMO
JS:
$('.menu-circle').on('click', function(){
var $img = $('.crossRotate');
if (!$img.hasClass('rotate')) {
$img.addClass('rotate');
} else {
$img.removeClass('rotate');
}
});

You ve to manage this with 2 different events to animate the image
$('.menu-circle').on('mousedown', function(){
$('.imgblock').addClass('rotate');
});
$('.menu-circle').on('mouseup', function(){
$('.imgblock').removeClass('rotate');
});
fiddle http://jsfiddle.net/3ehcuky5/
if you want to keep the image rotated or not the #alynioke solution is good

As you seem to be trying to make it jiggle a bit in animation and you're using jQuery already then I would say you need to look at the .animate() method of teh jQuery library
https://api.jquery.com/animate/

Zoom only a specific portion of an image in pure CSS

I have a div with a width of 800 and a height of 300 pixels.
I also have an .svg image that's set as the background-image of this div, and using css3 animations I make this image scroll left to right, indefinitely (it's a landscape) and wrapping.
I would like to put a circle in the middle of this div, and make the inside of this circle "zoom" the background. I'd love to have this pure CSS.
I've tried some masking and clipping, but nothing seemed to do the trick.
Is this possible with the current CSS specifications? A JavaScript solution would also be acceptable.
Here's an image showing what I mean:
If you look closely, you can see a circle in the middle, which should zoom the clouds behind it, as if looking through a magnifying glass.

Trying to get it reusing the same animation, without extra elements:
CSS
.test {
position: absolute;
width: 600px;
height: 400px;
left: 0px;
background-image: url(http://placekitten.com/1000/400);
background-size: 1000px;
-webkit-animation: base linear 20s infinite;
background-position-x: 0px;
background-position-y: 50%;
}
.test:after {
content: "";
position: absolute;
left: 200px;
width: 200px;
top: 100px;
height: 200px;
border-radius: 50%;
background: inherit;
-webkit-transform: scale(1.1);
-webkit-animation: inherit;
-webkit-animation-delay: -4s;
}
#-webkit-keyframes base {
0% { background-position-x: 0px; }
100% { background-position-x: -1000px; }
}
The trick is to set the animation in sync delaying it; just calculate the equivalence in time of the x offset.
fiddle

throw your zoom div into the pic div and give it a background image of a larger version of the same image.

Avoid container's overflow scrollbars with "enter from side" effect

I'm working on a one/single page scroll website. I have a couple of sections each one containing 2 columns and I'm trying to make them to enter from the left/right with a fade effect. I'm using CSS transforms and jquery to activate the effect only when the user scrolls and reachs its corresponding section. Here's an example:
http://jsfiddle.net/Rv35g/
(Resize your window so it fits the container's width)
HTML:
<div class="container animation-init">
<div class="left">Column 1</div>
<div class="right">Column 2</div>
</div>
CSS:
body, html{
margin: 0;
height: 100%;
}
.container{
width: 600px;
height: 100%;
margin: 0 auto;
background: green;
}
.container .left, .container .right{
width: 50%;
float: left;
color: white;
height: 100%;
}
.container .left{
background: red;
}
.container .right{
background: blue;
}
.container.animation-init .left, .container.animation-init .right{
opacity: 0;
}
.container.animation-init .left{
-webkit-transform: translate(-80px, 0);
-moz-transform: translate(-80px, 0);
transform: translate(-80px, 0);
}
.container.animation-init .right{
-webkit-transform: translate(80px, 0);
-moz-transform: translate(80px, 0);
transform: translate(80px, 0);
}
.container.animation-init.animation-ready .left, .container.animation-init.animation-ready .right{
opacity: 1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 1s;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
JS:
$(function() {
$('.container').addClass('animation-ready');
});
The problem is that when my columns are on its initial position they generate horizontal scrollbars because they're going outside the container... Do you have any idea on how could I handle this? I can't use overflow: hidden; cause I'll be cutting part of the animation. I also tried to put overflow-x: hidden; to the html tag but since the effects only activate when you reach its corresponding section the overflow stills being a problem specially on mobile devices...
EDIT: The problem with overflow-x: hidden is that the extra space stills there, so when scrolling with your finger or mousewheel-click arrow function it's possible for you to end up in one of those blank spaces losing the center of the page. Also, in mobile devices, it takes this overflow as part of the general width, so If I have and element coming from -200px to the left, it'll show the container's width + the aditional 200. That's a problem, specially when it comes to the elements positioned at the bottom of the page, cause they're on their init position waiting for you to reach them to start the animation. In the example I posted the overflow disappears almost instantly cause the animation is being triggered automatically, but as I told you at the begining, I have multiple sections where the column's animation starts only if you reach their parent sections.