Develop Reference

How do i stop webkit animation through js? + fixing image to the right

I'm trying to build a puzzle game website. I'm using webkit animation to rotate (and translate) two images.
My plan is to have rotating gears attached to the left and right edge of my page, offset in a way that only half of each image is shown at a time.
The animation works fine but
(1) i am unable to pause it, and
(2) depending on window size the images are moved out of view (with an automatic scrollbar popping up) or into full view.
The setup is pretty simple:
I have 3 divs: one bar at the top with 100% width and two divs with 50% width below as containers for my images.
I might need to add more below or in between the two divs down the road but for now a solution for this would be good enough^^
For the animation i have a pseudo button on each side which adds a pause class to my images.
HTML
<div id="div-left">
<p>Hey this is the left div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image1">
<p id="pausebtn1" onclick="pause1()">pause</p>
</div>
<div id="div-right">
<p>hey this is the right div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image2">
<p id="pausebtn2" onclick="pause2()">pause</p>
</div>
CSS
#image1{
-webkit-animation: rotation-left 30s infinite linear;
}
#image1.paused1::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
#image2{
align: right;
-webkit-animation: rotation-right 30s infinite linear;
}
#image2.paused2::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
/* Animations */
#-webkit-keyframes rotation-left{
from {
-webkit-transform: translate(-50%,0px) rotate(0deg);
}
to{
-webkit-transform: translate(-50%,0px) rotate(359deg);
}
}
#-webkit-keyframes rotation-right{
from {
-webkit-transform:translate(+50%,0px) rotate(0deg);
}
to{
-webkit-transform:translate(+50%,0px) rotate(-359deg);
}
}
Javascript
function pause1() {
console.log("pause img 1");
document.getElementById('image1').classList.toggle("paused1");
}
function pause2() {
console.log("pause img 2");
document.getElementById('image2').classList.toggle("paused2");
}
So to sum it all up:
I have two images in the wrong places. They are animated. My two buttons are working but trying to pause the animation by adding a paused class doesn't function.
Any help would be appreciated and i'll see if i can add images later

You shouldn't be targeting ::-webkit-progress-value, that's for <progress> elements. Just toggle the class onto the element:
button.addEventListener('click', function () {
square.classList.toggle('paused');
});
#square {
animation: rotate 1s infinite;
background: lightblue;
border: 1px solid black;
height: 100px;
left: 50px;
position: absolute;
top: 50px;
width: 100px;
}
#square.paused {
animation-play-state: paused;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<button id="button">Pause/Resume</button>
<div id="square">Rotate</div>

Animating cover-sized background smoothly

I would like to make a background animation. Previously I used the following simple CSS solution:
#splash {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
border-top: 2em solid #232323;
border-bottom: 2em solid #232323;
background-image: url("../img/splash.jpg");
background-size: cover;
background-position: 0 100%;
animation: moveSplash 15s ease-in-out infinite alternate;
-moz-animation: moveSplash 15s ease-in-out infinite alternate;
-webkit-animation: moveSplash 15s ease-in-out infinite alternate;
/* Safari 4.0 - 8.0 */
transition: opacity .5s;
z-index: 1;
}
#keyframes moveSplash {
from {
background-position-y: 100%;
background-position-x: 0%;
}
to {
background-position-y: 0%;
background-position-x: 100%;
}
}
Which worked perfectly:
whenever the screen was wider than taller, the background picture started to move from the bottom to the top, and it had the same width as the window's
whenever the screen was taller than wider, the background picture started to move from the left to the right, and it had the same height as the window's
HOWEVER, there was one major problem with this method: the animation was very jumpy, that's why I started playing with transition and transform: translate(), but then I could not make the image perfectly fitting.
Is there any workaround out there to achieve a smooth background-image animation keeping it cover-sized?
ANOTHER SOLUTION COULD BE to set image's width and height to 100%, and object-fit to cover. After this I would need to get the computed new dimensions of the image by Javascript or jQuery, however, I have tried .width, .naturalWidth, .offsetWidth, .clientWidth, and they returns 0. When I try this:
var oImg = document.getElementById('splash');
window.getComputedStyle(oImg).transformOrigin.split(' ')[0].replace('px', '')
window.getComputedStyle(oImg).transformOrigin.split(' ')[1].replace('px', '')
I get the window's dimensions (since the object's width and height are set to 100%), not the resized image's new size. If I could get the new size of the image, I could make a calculation where I find the max X and Y values.
Any idea how could I make this animation work smoothly?

Instead of performing the animation on the background-image itself, which is slow, I would suggest animating the entire element.
From what I can see you're trying to animate the background diagonally? Not horizontally and not vertically?
#keyframes moveSplash {
from {
transform: translateY(100%);
transform: translateX(0%);
}
to {
transform: translateY(0%);
transform: translateX(100%);
}
}
If you can't make the image fit the div perfectly when using translate, then that is perhaps what your question really should've been about, because it's kind of "unconventional" to perform the transition on the background-image (because it's slow) and not the entire element (which makes better use of the available memory, and therefor, again – is faster).

When background image scaled, it starts to flicker in Chrome

I have a div with a background image on it. When it has simple transform scale animation, it starts to flicker in Google Chrome and Opera.
Here is a simple exmple:
http://codepen.io/anon/pen/bWpNYq
CSS:
body {
height: 100vh;
overflow: hidden
}
div {
width: 100%;
height: 100%;
background-color: #f00;
background-position: 50% 50%;
background-image: url(".....jpg");
background-size: cover;
}
Script:
TweenLite.set('div', {
backfaceVisibility: 'hidden',
perspective: 1000
});
TweenLite.fromTo('div', 10, {
scale: 1.1
}, {
scale: 1
});
When the image is a simple img element, the same scale animation works fine. The transition is smooth:
http://codepen.io/anon/pen/pPyvdp
The examples use GASP for animations. I need a solution which use GSAP to scale the div with better result.
Do you any idea how to make it smooth with background image?

Try this:
Add transition: all 1s linear; so it scale smoothly.
body {
height: 100vh;
overflow: hidden
}
div {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg");
background-size: cover;
transition: all 1s linear;
}

Hey maybe you can try out this css animation. For better browser support add
-webkit-animation
-moz-animation
-o-animation
body {
height: 100vh;
overflow: hidden
}
div {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg");
background-size: cover;
-webkit-animation: animate 5s forwards;
animation: animate 5s forwards;
}
#-webkit-keyframes animate {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
#keyframes animate {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
<div>
</div>

CSS3 allows you to add native transition to your transformations. Try to use code below:
document.body.addEventListener('click', function(){
var div = document.getElementById('img');
div.style.transform = 'scale(.5)';
})
body {
height: 100vh;
overflow: hidden
}
div {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg");
background-size: cover;
transition: transform 30s;
}
<div id="img"></div>
It uses css property "transition" and starts transition on body click.

Just use css, way better. If you open up your inspector you'll see that your tweenlite code is setting/ updating the style attribute of your div very fast with this piece of code: transform: translate3d(0px, 0px, 0px) scale(1.00212, 1.00212);.
This is JS calculating something and then telling CSS what to do (very basic explanation). CSS can do this on it's own. Why do you want to stick with your GSAP engine so badly?

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.