I am trying to create a sliding line, as shown in this video preview, but the issue is that it glitches on iOS as the animation completes, and starts a new cycle. Are there ways to adjust this code so the line is infinitely sliding with no glitches between cycles?
.animated {
ul {
#keyframes translateInfinite {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
animation: translateInfinite calc(var(--slider-line-speed, 40) * 1s) linear infinite;
}
}
Related
Struggling to even get started figuring this out, I am working on a website for a friend, here is a one of the pages..
http://sarahboulton.co.uk/livingroom.html
So on refresh it brings up one of four constellations of letters, which shift their constellations using math random.
We were hoping to start applying small animations to the letters.. something along these lines..
.lipbalm {
animation: shake 0.1s;
animation-iteration-count: infinite; }
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.5px) }
100% { transform: translate(0px) }
}
But whether these movements could be randomised for each letter, still small movements.. but using something similar to..
$(document).ready(function(){
$('.goldrocks-g').css({'left' : (Math.random() * 250) + 350})
});
..each letter randomises its movement, maybe one ends up on..
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.4px) }
100% { transform: translate(0px) }
}
.. and another has..
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.1px) }
100% { transform: translate(0px) }
}
and something similar for the speed too? All the letters have their own div, might be easier to view the source of the page to see whats going on !
The way I would approach this problem is by creating the a few variations of your shake class and then assign those classes at random when you are assigning the random constellation.
So something like this:
css
.shake-1{
animation: shake-1 0.3s;
animation-iteration-count: infinite;
}
.shake-2{
animation: shake-2 0.3s;
animation-iteration-count: infinite;
}
.shake-3{
animation: shake-3 0.3s;
animation-iteration-count: infinite;
}
#keyframes shake-1 {
0% { transform: translate(0px) }
50% { transform: translate(2px) }
100% { transform: translate(0px) }
}
#keyframes shake-2 {
0% { transform: translate(0px) }
50% { transform: translate(-2px) }
100% { transform: translate(0px) }
}
#keyframes shake-3 {
0% { transform: translate(0px) }
50% { transform: translate(0px, 2px) }
100% { transform: translate(0px) }
}
html
<div class="dyinglight-d shake-1" style="left: 839.646px; top: 212.011px;">...</div>
<div class="dyinglight-y shake-2" style="left: 959.592px; top: 97.9469px;">...</div>
etc
Here's a codepen I made for you with your site's code to show an example of it working: https://codepen.io/ChrisRArendt/pen/jQXjNa
You may generate CSS style using javaScript to integrate javaScript Math.random() into CSS logic.
For example you can generate 10 keyframes with names shake1 to shake10 with random transform on 50% and append this styles to the header style :
var css;
for (x=1;x=10;x++){
css += '#keyframes shake'+ x.toString() +' {';
css += '0% { transform: translate(0px)}';
css += '50% { transform: translate('+ Math.random() +'px)}';
css += '100% { transform: translate(0px)}';
css += '}';
}
$( "<style>" + css + </style>").appendTo( "head" );
Finally you can assign each keyframe randomly to target divs:
$('.goldrocks-g').each(function(){
(this).css({"animation": "shake" + Math.random()*10+1 +" 0.1s infinite");
})
I think the easiest way to do this would be to have a random feeling shake animation that could be applied to all letters. Then you can randomly apply inline CSS of animation-delay: 100ms or animation-delay: 300ms. That style could be applied differently each time. All letters will be using the same shake animation but will be at different intervals in the animation based on their delay time.
How can I trigger CSS class to start my logo animation when scrolling/changing slide with fullpage.js?
I have this (it works alright) for animating my SVG wheel logo:
.logo-img:hover #wheel {
-webkit-animation: in 1s;
transform-origin: 49% 50%;
}
#wheel {
-webkit-animation: out 1s;
transform-origin: 49% 50%;
}
#-webkit-keyframes in {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg);}
}
#-webkit-keyframes out {
0% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(0deg); }
}
It's a simple animation of spinning wheel 360deg., now I want it to spin when scrolling and use "in/out" keyframes depending on sliding page up or down.
I'm using fullpage.js and jquery v2.2.4
I hope It makes sense.
Thanks
Use the fullpage.js state classes.
So you can do:
.fp-viewing-section1-slide1 .myItem{
/*Whatever */
}
See my video tutorial here:
https://www.youtube.com/watch?v=qiCVPpI9l3M&t=5s
I have an introductory portion of a site where 4 letters (SVGS) pop onto the screen. Most of the time, it plays just fine. On occasion however, sometimes one or two or all the images won't animate in at all. I'm not sure what could be causing this (it's not the cache), and a page refresh usually fixes it. Am I missing something? Should I wait for the images to load AND for the entire DOM to be ready?
Here is the relevant CSS (Sass).
Animation:
#keyframes bobble {
0% {
transform: translateY(124px) scale(0.8, 1.6);
}
25% {
transform: translateY(-64px) scale(1.6, 0.8);
}
55% {
transform: translateY(16px) scale(0.9, 1.1);
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}
Styling
.hello-header-img {
height: 100%;
width: 100%;
opacity: 0;
animation: bobble $animation-duration cubic-bezier(0.64, 0.57, 0.67, 1.53);
animation-fill-mode: forwards;
animation-play-state: paused;
will-change: transform, opacity;
// Plays animations when images have loaded (JS)
.is-ready & {
animation-play-state: running;
}
}
Each letter also has an animation delay which starts at 0.4s and increases by 0.3s for each letter (so letter 1 = 0.4s delay, letter 2 = 0.7s delay, letter 3 = 1s delay, etc).
Javascript
const imgs = document.querySelectorAll('.hello-header img');
let counter = 0;
let hasScrolled = false;
// Animate after hello section images have loaded
[].forEach.call( imgs, function( img ) {
img.addEventListener( 'load', ()=> {
counter++;
if ( counter === imgs.length ) {
document.querySelectorAll('.js-hello-header')[0].classList.add('is-ready');
}
}, false );
});
Try replacing translate and scale with translate3d and scale3d (with the appropriate parameters).
translate and scale in general are very CPU expensive while their 3d counterparts utilize hardware acceleration from the graphics card and therefore play animations much smoother.
I have searched through a lot of questions related to my question in stackoverflow but i haven't found one yet that answers my question with plain JavaScript (not using libraries of any kind).
My problem is that I have an infinite animation with CSS3 i.e.:
.clockwiseAnimation {
top: 270px;
left: 200px;
position: absolute;
-webkit-animation: clockwise 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: clockwise 4s linear infinite; /* Firefox 5-15 */
-o-animation: clockwise 4s linear infinite; /* Opera 12+ */
animation: clockwise 4s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#-webkit-keyframes clockwise {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
#-moz-keyframes clockwise {
from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
#-o-keyframes clockwise {
from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
#keyframes clockwise {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
This animation allows me to spin (clockwise) whatever tag that has the class "clockwiseAnimation".
What I want to do is to change the time of execution (I'll call it speed) of the animation with javascript like:
HTML:
<span id="someID" class="clockwiseAnimation">sometext</span>
JavaScript:
var style = document.getElementById("someID").style,
speed = 6;
//obviously the speed is dynamic within my site (through an `<input type="range">`)
//for the purposes of this example I set the speed to a different value(6seconds) than the original value(4seconds).
style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s";
It works when I pause and then play(by play I mean UNPAUSE not restart) the animation, i.e.:
var style = document.getElementById("someID").style;
some = 6; //it is dynamic (as I pointed out before)
//pause
style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "paused";
//change speed
style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s";
//play (== UNPAUSE) //UPDATE: Added the timeout because I can't get it to work any other way.
setTimeout(function(){
style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "running";
},1);
UPDATED:
And it works! BUT, it has a big RANDOM jump in the animation, meaning that when I change the "speed" with the "<input type="range"> slider" the element jumps to a random location (not the beginning nor the end of the animation just a random location).
NOTE: Pause and play works very smooth without changing the "speed" of the animation.
My question(s): Can I change the "speed" of the animation smoothly WITH JavaScript? (WITHOUT the jumping)
If the answer is: "There is not a way to do it smoothly throughout the animation execution", then:
Is there a way to change it in the next iteration of the infinite animation?
If so:
Then how can I tell it to start in the next iteration and how to know which is the next iteration if I set the animation to infinite (animation-iteration-count property of the element that is doing the animation always returns "infinite").
Here is an example. I hope it helps.
What may be occurring is that the animation-duration "change" could be "jumping" to the point in the animation corresponding to the "changed" #keyframes - based on the total "changed" animation duration..
If the animation-duration began from (or 0%) proceeded to to (or 100%), the corresponding #keyframes "position" may be changed as well.
For example if the original animation-duration was 4s (or, 4000ms) at approximately 2s (or, 2000ms), the corresponding keyframes may be at approximately 50%, or
at 2 seconds into 4 second animation
50% { -webkit-transform: rotate(180deg) translateX(150px) rotate(-180deg); }
when the animation-duration is dynamically changed, the corresponding keyframes may be "changed" to the matching % point, or, a larger duration span for the same effect. The animated element may appear to go forwards or backwards, or hve a "jumping" due to it re-positioning itself within the "changed" corresponding keyframes and animations.
There is also 1s setTimeout function, that may or may not actually have a 1s duration.
It may be possible to "smoothly" "jump" to the newly "changed" position within the lengthier animation-duration the suggested transition effect or requestAnimationFrame (http://www.w3.org/TR/animation-timing/).
..
Try this:
html
<input type="range" id="speedSlider" min="2000" max="6000" value="4000">
css
input {
-webkit-transform: rotate(180deg);
top : 50px;
position : absolute;
}
.clockwiseAnimation {
/* top: 270px;
left: 200px; */
left : 50%;
top : 50%;
position:absolute;
/* css animation (no change) */
}
js
var speedSlider = document.getElementById("speedSlider");
speedSlider.addEventListener("change", changeSpeed, false);
function changeSpeed(e){
var speed = Math.floor(speedSlider.value);
var element = document.getElementById("span");
var style = element.style;
style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "paused";
style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = String(speed) + "ms";
style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "running";
}
With CSS: http://jsbin.com/UsunIMa/1/
CSS properties transition and animation allow you to pick the easing function.
div {
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
/* or */
animation: clockwise 4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
use setTimeout to add animation class to your required element with the removal of animation class as a callback.
Maybe jQuery queue could help you.
Here it is
I'm trying to show infinitely rotating image after some event in js.
Works perfectly in Chrome 26, Firefox 19, but fails in Opera 12 (latest).
I use initial image with style="display: none" like this:
<img src="http://example.com/img.png" id="test" style="display: none">
Then I show the image (remove display: none):
$('#test').show();
Expected behavior: see rotating image. Rotation does not happen in Opera.
Is this an Opera bug? I know I can start animation by applying it with class after image is shown, but I want to figure out how to trigger it when image has animation set initially.
Animation works fine when the initial image is shown (display: block).
Here is jsFiddle example: http://jsfiddle.net/vdJLL/
CSS which I use for rotation:
#test {
-webkit-animation: rotate 5s linear 0s infinite normal;
-moz-animation: rotate 5s linear 0s infinite normal;
-o-animation: rotate 5s linear 0s infinite normal;
-ms-animation: rotate 5s linear 0s infinite normal;
animation: rotate 5s linear 0s infinite normal;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
I've just ran into the similar problem - I've been trying to js display:none other div (that wasn't even affecting the animation) and got on Opera animation freezed (which, what's even more funny, could be unfreezed by entering dragonfly and re-enabling animation part of style) - so it sounds indeed like an Opera bug.
Anyways, I just learned a workaround - instead of display:none, it'll work with
visibility:hidden; height: 0px;
See also your jsfiddle updated http://jsfiddle.net/vdJLL/3/