So previously I had been figuring out how to specify which transition activates when a specific page is selected, I figured it out.
Now....I'm curious why there is a trailing section of the previous page when I transition out of my selected effect. Upon each click, you'll notice a trailing, fading section of the previous page:
Example: http://codepen.io/anon/pen/BzFjk
If you take a look at the original page then you'll see what I'm going for:
The goal: tympanus.net (go to Choose a transition > Rotate > Room)
There are many attributes such as the code below specifying the styling for rotateroomLeftOut and rotateRoomLeftIn...etc. But I've matched them exactly to the original code and it still doesn't look like.
#-webkit-keyframes rotateRoomLeftOut {
to { opacity: .9; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
#-moz-keyframes rotateRoomLeftOut {
to { opacity: .9; -moz-transform: translateX(-100%) rotateY(90deg); }
}
#keyframes rotateRoomLeftOut {
to { opacity: .9; transform: translateX(-100%) rotateY(90deg); }
}
#-webkit-keyframes rotateRoomLeftIn {
from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
#-moz-keyframes rotateRoomLeftIn {
from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
#keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
There is an opacity in your keyframes which is causing the colors to "trail"
Removing the opacity from the keyframes seems to solve your problem:
#-moz-keyframes moveFromRight {
from { -moz-transform: translateX(100%); }
}
Codepen
I think I found it, the culprit: pt-page-ontop
In all your cases (54 to 57) this class was added (in JS) the the page that moves out...
case 54:
inClass = 'pt-page-rotateRoomLeftIn';
outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop';
break;
...I don't know why this doesn't have the same effect on the tympanus-page, but if I change it to this...
case 54:
inClass = 'pt-page-rotateRoomLeftIn pt-page-ontop';
outClass = 'pt-page-rotateRoomLeftOut';
break;
...it works without the trail.
(You still see a veil of the out-page disappearing, but notice that's also the case on the tympanus-page, but there the transitions are just faster so you don't really see it).
Example: http://codepen.io/anon/pen/dxwuk
(BTW, your CodePen HTML had double html- and body-tags inside the body-tag, CodePen probably fixes that for you on rendering, but better check your code twice)
UPDATE
If you combine MathiasaurusRex' answer with this one, you will lose that last veil as well. Fiddle around with that to see what you like best..
I had the "same" problem months ago.
CSS - <p> leaving a trail when sliding
Sadly I didnt find any good solution, i had to use a PNG image to solve it :(
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
So, I'm animating a SVG button and I want to animate transform property combined with a fadeout with opacity attributes via Javascript.
The code would look like something like this: (Considering it's coming with opacity 0 and scale 0)
(I know the way I'm doing it it's incorrect because it's overriding till last set attribute)
function hiA(){
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("transform", "scale(.5)");
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("opacity", "1");
}
And the same but in reverse: (Considering it's coming with opacity 1 and scale 1)
function byeA(){
pathA.setAttribute("transform", "scale(.5)");
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("transform", "scale(0)");
pathA.setAttribute("opacity", "0");
}
I don't know if it's possible or if it's better to add a class with the animation on CSS.
you can set class and style in css: https://www.w3schools.com/css/css3_animations.asp
JS:
pathA.className+="hiA"
CSS:
#keyframes example {
0% {transform:scale(1);}
50% {transform:scale(.5)}
100% {transform:scale(1);opacity:1;}
}
.hiA{
animation: example 1s;
}
See example:
function hiA(){
var pathA=document.getElementById("pathA");
pathA.className="hiA";
setTimeout(function(){ pathA.className=""; }, 3000);
}
#keyframes example {
0% {transform:scale(.5);}
50% {transform:scale(1);}
100% {transform:scale(0);}
}
.hiA{
animation: example 3s;
}
<button onclick="hiA()" id="pathA">animation me</button>
ED
You could define keyframes in css:
#keyframes hia{
0%{
transform: scale(1);
}
50%{
transform: scale(0.5);
}
}
... and so on, and then add the animation in css to a class or add it to the element with js:
.element{
animation: hia 3s;
}
I quickly tested you example code on a SVG. It works.
But I would prefer defining the animations in CSS and simply adding and removing CSS classes to/from the SVG or its sub elements. This is a cleaner separation of concerns, in my opinion. And you enable possible performance accelerations by the browser, since it known about the animations beforehand and can do it on the GPU, theoretically.
There is several questions about how to rotate an image, but I want an animation-like rotating. By an
event (tap) I would like to rotate an image with -5 degree then with 5 degree, but if I write both rotating in
the same function (or eventhandler), the first rotate doesn't appear only the second is visible.
$("#imgdiv").on('taphold', function(e){
//$("#imageID").addClass("swing animated");
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(-5deg)"});
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(5deg)"});
//$("#imageID").removeClass("swing animated");
});
I have also tried a swing animation with classes (addClass, then removeClass), but with the same result:
#keyframes swing {
25% { transform: rotate(-5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.swing {
transform-origin: top center;
animation-name: swing;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
You may put the second animation in a setTimeout in order to delay its animation until the first one finishes.
You can also put your transition in the css rather than in JS. Just place the transform value in JS.
Try something like this SAMPLE.
JS:
$(".clickme").click(function(){
//animate to -5deg
$(this).css('transform','rotate(-5deg)');
//animate to 5deg
setTimeout(function(){$(".clickme").css('transform','rotate(5deg)')},1000);
//animate back to root position
setTimeout(function(){$(".clickme").css('transform','rotate(0deg)')},2000);
});
you can do with addclass and removeclass, but there is one mistake in your code.
you are doing addclass and removeclass at the same time. so, animation is not happening or only one time happens
so try setTimeout:
$("#imgdiv").on('click', function(e){
$("#imageID").addClass("swing animated");
setTimeout(function(){
$("#imageID").removeClass("swing animated");
},1000)
});
i have done that in jsfiddle - http://jsfiddle.net/tqn394k9/
I have an AngularJS animation set up for sliding in panels of an ng-switch directive using the latest version of Angular (1.2.9). I am noticing curious behavior if I try to animate the position using "transform: translate(0,0);" instead of just the "left" attribute. When using translate, the animation sometimes works properly and sometimes not (I'd say it's about 50/50). However, if I animate the left attribute, it works correctly 100% of the time.
The CSS for the animation I am using is
.slide-animation.ng-enter,
.slide-animation.ng-leave {
position: absolute;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
-o-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
}
.slide-animation.ng-enter {
-webkit-transform: translate(-125%, 0);
-ms-transform: translate(-125%, 0);
transform: translate(-125%, 0);
}
.slide-animation.ng-enter.ng-enter-active,
.slide-animation.ng-leave {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide-animation.ng-leave.ng-leave-active {
-webkit-transform: translate(125%, 0);
-ms-transform: translate(125%, 0);
transform: translate(125%, 0);
}
Here is a fiddle to demonstrate the issue I am having: http://jsfiddle.net/HXACU/5/
I wanted to use translate because it gives significantly better performance than animating the left attribute on mobile devices. Do I have something wrong, is this a bug in Angular, or should I give up and just animate with "left"?
I think it's a rendering time race - caused by the 125%. I don't think it knows what 125% is until it's rendered, I've seen similar things before.
For argument sakes I replaced all % with px equivalents here: http://jsfiddle.net/27te5/1/ and it appears to be more stable (i can't break it)
.slide-animation, .slide-animation-transform {
width: 96px;
}
.slide-animation.RL.ng-enter, .slide-animation.LR.ng-leave.ng-leave-active {
left:150px;
}
/*etc. etc.*/
I'm sure you would rather % values but i hope it helps in any case.
How would I add a custom animation delay for every div with the class "bounce"? Basically the class bounce contains the animation css keyframes (animate.css). Now, I have 20 divs called "360player bounce". but they all bounce at the same time.
example:
<div class="360player bounce">
<a href="audio/The_Song.mp3">
The Song
</a>
</div>
Just wondering how I could do this. I searched entire stackoverflow and google but no luck so far.
I have created a similar animation for falling stars. I believe you are going to have to create distinct animation sets each with different delays. It Depends on what you are trying to achieve in my instance I created 5, 6 different animation chains and delayed them each slightly so it appears they are all moving at different times.
Example below
#keyframes fallingstars {
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(0deg);
}
25% {
opacity: 1;
transform: translate(0px, 0px) rotateZ(deg);
}
100% {
opacity: 0;
transform: translate(-870px, 500px) rotateZ(310deg);
}
}
#keyframes fallingstars2 {
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(25deg);
}
25% {
opacity: 1;
transform: translate(0px, 0px) rotateZ(deg);
}
100% {
opacity: 0;
transform: translate(-570px, 600px) rotateZ(210deg);
}
}
#fallstar {
animation: fallingstars 12s infinite;
animation-delay:5s;
z-index:-1;
}
#fallstar2 {
animation: fallingstars2 12s infinite;
z-index:-1;
}
<img src="stars-ALL.svg" id="fallstar" alt="Stars" style="width:50px; height:50px; top:0px; right:-50px; position:absolute;" />
You could also modify the animation using jquery / js to change the delay. This is just one of several ways to accomplish this. Loop through all your divs, and for each div modify the animation delay. I feel this might be expensive.
I don't know if the CSS library you're using includes it, so here's the specific CSS property you're looking for:
http://www.w3schools.com/cssref/css3_pr_animation-delay.asp
You can apply this attribute on top of an existing CSS animation, perhaps by defining your own seperate class in your page's own CSS file and adding that.
CSS:
.wait300ms {
animation-delay: 300ms;
/*TODO: Add cross-browser attributes */
}
HTML:
<div class="360player bounce wait300ms">