So basically I have a process with multiple steps that users will go through. Whenever they click a forward button, I want to slide the current step to the left and slide the next step on from right to left. When hitting backwards, I want the current step to slide off to the right and the previous step to slide in from the left. I have it working so it correctly does the slide on the first click both ways, the problem arrives when I basically try to toggle it (so clicking on forward, then back). When I do this, the thing will slide off correctly, but the previous step does not slide back on, leaving a blank content area. This is the state of the classes once you hit forward first, then hit back:
Here's my animation CSS:
#keyframes slide-in-from-left {
0% { tranform: translate(-100%); }
100% { transform: translateX(0%); }
}
#keyframes slide-out-left {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
#keyframes slide-in-from-right {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}
#keyframes slide-out-right {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
// Animation Classes
// ------------------------------
.slide-in-from-left {
animation: slide-in-from-left 0.5s forwards;
}
.slide-out-left {
animation: slide-out-left 0.5s forwards;
}
.slide-in-from-right {
animation: slide-in-from-right 0.5s forwards;
}
.slide-out-right {
animation: slide-out-right 0.5s forwards;
}
And then I just have:
[class^="step-"] {
position: absolute;
}
.step-4 {
transform: translateX(-100%);
}
And my jQuery/coffeescript:
goForwardAStep = () ->
step = $(this).data('step')
$('.signup .step-' + step).addClass('slide-out-left')
$('.signup .step-' + (step + 1)).addClass('slide-in-from-right')
goBackAStep = () ->
step = $(this).data('step')
$('.signup .step-' + step).addClass('slide-out-right')
$('.signup .step-' + (step - 1)).addClass('slide-in-from-left')
Should I be removing a class somewhere when the steps change? Should I have more classes involved to make sure things are laying off screen where they should?
A simpler approach. 3 clases for the state:
.current {
transform: {translateX(0%);}
}
.moved-left {
transform: {translateX(-100%);}
}
.moved-right {
transform: {translateX(100%);}
}
and a permanent one
.slide {
transition: transform 0.5s;
}
Related
This script I am using creates a rotating text effect for a title on a site I am building. I am wanting to increase the speed in which they rotate gradually, so it starts off slow, gradually speeds up, holds the top speed of say 7x original and then slowly goes back to the starting pace and does this in a loop..
The time in which it takes to rotate is currently set at the end of the function in the '1200' area, so I assume it would need to come from a variable and have that behaviour stored in it within the function? Just lost on where to go next.
setInterval(() => {
const up = document.querySelector('.span-one[data-up]');
const show = document.querySelector('.span-one[data-show]');
const down = show.nextElementSibling || document.querySelector('.span-one:first-
child');
up.removeAttribute('data-up');
show.removeAttribute('data-show');
show.setAttribute('data-up', '');
down.setAttribute('data-show', '');
}, 1200);
Here is a code that can help you Though keep in mind, the styles are applied on a bare element. In your code you have to take into account the context as well.
/* Here you defined the animation. You can play around more and adjust the speed as you want */
#keyframes example {
/* Here are some options */
/* uncomment the sections to experiment */
/* 0% { transform: rotate(0deg); }
25% { transform: rotate(90deg); }
50% { transform: rotate(120deg); }
75% { transform: rotate(180deg); }
100% { transform: rotate(360deg); } */
/* 0% { transform: rotate(0deg); }
25% { transform: rotate(80deg); }
50% { transform: rotate(180deg); }
75% { transform: rotate(290deg); }
100% { transform: rotate(360deg); } */
0% { transform: rotate(0deg); }
50% { transform: rotate(100deg); }
75% { transform: rotate(300deg); }
100% { transform: rotate(360deg); }
/* You can google about the animations and how these percentages work, but actually its pretty simple */
}
.rotating {
/* This is optional, but needed if your title is block level element, just play around and see the differnce */
display: inline-block;
/* this is mandatory */
animation-name: example;
animation-duration: 5s;
animation-iteration-count: infinite;
}
<html>
<body>
<h1 class="rotating">My Dear Rotating Title</h1>
</body>
</html>
Stackoverflow is too strict on pasting the link to jsfiddle, so I embedded it here
I want to make a simple JavaScript onclick animation. My problem is that when I click onto the button, the animation is executed, but when I click again onto the button, nothing happens. On the third clicks the animation plays again. I want to make that, the animation plays at the second click.
Heres my code"
var anim = document.getElementById("anim");
anim.onclick = function highA() {
var willCheck = document.getElementById("contactId");
if (!willCheck.classList.contains("highAnim")) {
willCheck.classList.add("highAnim");
} else {
willCheck.classList.remove("highAnim");
}
}
#contactId { background: red;}
.highAnim {
background-color: var(--white);
animation-name: highcheck;
animation-duration: 0.35s;
animation-timing-function: ease-in-out;
}
#keyframes highcheck {
0% {transform: rotate(0);}
25% {transform: rotate(1deg);}
50% {transform: rotate(2deg);}
75% {transform: rotate(1deg);}
100% {transform: rotate(0);}
}
<a onclick="anim()" id="anim">Click</a><br><br>
<div id="contactId">Some Text</div>
The issue is because the first click adds the class and triggers the animation, yet the second (and every even numbered click) after that removes the class so nothing happens.
To fix this you can use the animationend event to remove the class automatically after the animation has ended. That way when you next click again the class is added to the element once more and the animation plays. Try this:
var anim = document.getElementById("anim");
var willCheck = document.getElementById("contactId");
anim.addEventListener('click', () => {
willCheck.classList.add("highAnim");
});
willCheck.addEventListener('animationend', () => {
willCheck.classList.remove("highAnim");
});
#contactId { background: red; }
.highAnim {
background-color: var(--white);
animation-name: highcheck;
animation-duration: 0.35s;
animation-timing-function: ease-in-out;
}
#keyframes highcheck {
0% { transform: rotate(0); }
50% { transform: rotate(2deg); }
100% { transform: rotate(0); }
}
<a id="anim">Click</a><br><br>
<div id="contactId">Some Text</div>
Note that I removed the 25% and 75% items in the animation as it's a linear motion from 0% to 50% and back again, so they are not needed. This also helps to make the animation smoother.
Another idea using animationiteration
var anim = document.getElementById("anim");
var willCheck = document.getElementById("contactId");
anim.addEventListener('click', () => {
willCheck.style.animationPlayState="running";
});
willCheck.addEventListener('animationiteration', () => {
willCheck.style.animationPlayState="paused";
});
#contactId {
background: red;
animation: highcheck 0.35s ease-in-out infinite paused;
}
#keyframes highcheck {
50% {
transform: rotate(2deg);
}
}
<a id="anim">Click</a><br><br>
<div id="contactId">Some Text</div>
I'm trying to animate a list of elements to slide in one after the other when rendered into the page.
Everything works well in Chrome and Firefox, even in Safari 11 work well, but safari 12 is not doing the animation well.
As shown in the following image, all items should be aligned to the top when the animation is completed, but for some reason only in Safari 12, the items are randomly rendered. In addition to that, the mouse over on the button is off.
You can take a look at the problem here: https://codepen.io/crysfel/pen/GwoQxE (Make sure to open the link with safari 12)
I think the css is pretty standard:
#keyframes slideIn {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-in {
opacity:0;
transform: translateY(60px);
animation: slideIn ease 1;
animation-fill-mode: forwards;
animation-duration: 175ms;
}
And a simple javascript to animate the items one after the other:
function animateIn() {
$('ul li').each(function(index) {
$(this).removeClass('slide-in');
setTimeout(() => {
$(this).addClass('slide-in');
}, 50 * index)
})
}
$(() => {
animateIn();
$('#show').click(function() {
animateIn();
});
});
EDIT:
I've fixed the issue: It turns out all I had to do was removing transform: translateY(60px); from slide-in. Apparently safari was using that style at the end of the animation overwriting the final value. It's very weird, because visually looks wrong but the active zones and all are fine.
You probably need to add a prefix to keyframes and animation for safari. Use something like this:
#keyframes slideIn {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#-webkit-keyframes slideIn {
from {
opacity: 0;
-webkit-transform: translateY(60px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
}
}
.slide-in {
opacity:0;
transform: translateY(60px);
-webkit-transform: translateY(60px);
animation: slideIn ease 1;
-webskit-animation: slideIn ease 1;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-duration: 175ms;
-webkit-animation-duration: 175ms;
}
A helpful tool to use is shouldiprefix.com
I am trying to make a simple component. When a button is pressed, it will show a menu that should slide out from the left. When clicked again, it should slide in from the right. It looks as follows.
I used the following as my enter, enterActive, leave, and leaveActive (respectively).
.open {
opacity: 0;
transform: scaleX(0);
transform-origin: left;
transition: all 200ms ease-in;
}
.opened {
opacity: 1;
transform: scaleX(1);
}
.close {
opacity: 1;
transform: scaleX(1);
transform-origin: right;
transition: all 200ms ease-in;
}
.closed {
opacity: 0;
transform: scaleX(0);
}
There is a working codepen here to show the problem.
What I don't get is: how do I make the close animation start from the right, and move left while closing? It seemed like transform-origin was the correct CSS, but it did not work as intended. The initial opening animation was correct, but not the leaving animation.
I've used one template from W3 Schools in order to build a theme with Bootstrap for WordPress
http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
One feature is the animation to slide some elements within a div in the webpage as you scroll it, using jQuery.
Currently the animation is implemented only from bottom to top, but I'm struggling to implement from right to left and vice versa as well.
Here is the code already working for bottom to top animation:
jQuery(function($) {
$(window).scroll(function () {
$(".slideanim-bottom").each(function () {
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
});
.slideanim {
visibility: hidden;
}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
<div class="row slideanim-bottom">
Does anyone know how to implement the same thing for left to right and vice versa as well? I think it is just a matter of adding some code in the js.
Thanks!
Just change translateY to translateX like this:
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
With code above you will get animation from right to left.
If you want animation from left to right than set negative percentage.
For example: -webkit-transform: translateX(-70%);
Also, because you do horizontal animations there will be visible horizontal scroller while animation plays so you should set overflow:hidden for your cointainer. In your case it is .container-fluid class.
You can see full example on your template page here: https://jsfiddle.net/uzxbn9da/
Have you tried changing translateY to translateX?
This would most likely modify the movement from top-down to left-right. You would have to tweak the percentage values to achieve the desired effect though.
Like this:
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}