Trigger css animation only once images have loaded - javascript

I'm using animate.css (FadeInDown) on some images and text on page entry.
Runs fines locally, but on server it's not smooth at all because of all the images that need to be loaded (not massive file sizes, just many images).
The problem: animate.css kicks in (on page load), but while the images are half loading. I know I can 'display: none' the images and use JS/LazyLoad to show the images once loaded, but by then animate.css has already triggered.
So I think I need:
A. to delay animate.css until exactly when the images are loaded/displayed
or failing that, B. once you clicked a link to a page, it doesn't proceed to the next page until everything is fully loaded.
Anybody who can help?
animate.css
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}

In jQuery, you can use $(document).ready() to execute a function when the DOM is loaded and $(window).on("load", handler) to execute a function when all other things are loaded as well, like images.
so basically, you can use this:
$(window).on("load", function(){
// '#yourElement' this is the id of the html element you want to animate.
// you can also use any other selector as well.
$('#yourElement').addClass('animated fadeInDown');
});

If you want to set animation on each image separately, when individual image is loaded you can do it something like this:
$("img").one("load", function() {
$(this).addClass('fadeInDown');
}).each(function() {
if(this.complete) $(this).load();
});

Related

How to get CSS animated background image which is currently displaying using java script

Currently i am running CSS based ken burn effect using opensource code https://codepen.io/anon/pen/VzYRWV
I would like to know how to get the current image which is getting displayed in text box shown in the above demo.
Thanks for your kind help.
Try these CSS effects https://jsfiddle.net/ipsjolly/cugLbrfu/4/
.parent.rotate:hover .child, .parent.rotate:focus .child {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
.parent.scalein:hover .child, .parent.scalein:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.parent.scaleout:hover .child, .parent.scaleout:focus .child {
-ms-transform: scale(0.9);
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
Created two new scale In and Scale Out
Source
https://css-tricks.com/zooming-background-images/
You can catch css-animations events with javascript function addeventlistener
Ex.
// first image
var img = document.getElementsByClassName('slideshow-image')[0];
// fired on animation start
img.addEventListener("animationstart",function() {
// do stuff here
console.log("Animation start");
},0);
Now, although this works well and how it is supposed to do it, with (not your) example will not work well since the animation is not sequential but all at the same time. (Controls the percentage instead of "steps")
But, you can get the idea and play with it to archive what you're looking for.
Important note: Vendor prefix is still used.
Additional references:
Event reference
animationstart A CSS animation has started.
animationend A CSS animation has completed
animationiteration A CSS animation is repeated.
transitionstart A CSS transition has actually started (fired after any delay).
transitioncancel A CSS transition has been cancelled.
transitionend A CSS transition has completed.
transitionrun A CSS transition has began running (fired before any delay starts).
Detecting CSS Animation Completion with JavaScript
CSS Animation Events
SO tag addeventlistener
SO tag css animations

Why does the CSS animation continue to play even after the class name is removed?

I am trying to create a simple 'edit mode' feature in an app that I am building.
When the app is in edit mode, the items need to wobble.
I have added a CSS animation to achieve the wobble effect. The animation uses transforms to manipulate the orientation and position.
#keyframes wobble {
0% { transform: translateY(2px) rotate(-2deg);}
25% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(2px) rotate(2deg); }
75% { transform: translateY(0px) rotate(0deg); }
100% { transform: translateY(2px) rotate(-2deg); }
}
Then using jQuery's toggleClass function to trigger the animation.
$('button').on('click', function(){
$('.items').toggleClass('editting');
})
This works fine in Chrome but in Internet Explorer the animation continues to play even after the class is removed.
Strangely, clicking the button 2 extra times will stop the animation in IE.
See jsFiddle here
Has anybody else experienced this before?
It seems that Internet Explorer does not register animation properly when the class name is removed.
As a fix, I have added a not-editting class name to counteract the editting animation.
By adding this feature along with this CSS I am able to get Internet Explorer to behave as expected.
.not-editting .item {
animation: none;
}
See this updated jsFiddle

Angular ngAnimate not working first time on page load

I'm using ngAnimate which works great except for the first time after page load.
I have some html like this:
<!--other html here-->
<div class="content" ng-view></div>
The view updates when links are clicked using routing like so:
app.config(function($routeProvider) {
$routeProvider
.when('/newcontent', {
templateUrl : 'views/new-content.html',
controller : 'ContentCtrl'
});
});
Now I have my CSS setup to animate the content box so it slides in and out.
.content.ng-enter,
.content.ng-leave {
-webkit-transition: all 600ms cubic-bezier(.3,1,.5,1);
transition: all 600ms cubic-bezier(.3,1,.5,1); }
.content.ng-enter,
.content.ng-leave.ng-leave-active {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%); }
.content.ng-enter.ng-enter-active,
.content.ng-leave {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%); }
Note that this all works perfectly except the first time one of the links is clicked and the view updates, the animation does not happen, the content box just appears. I've noticed this on more than one project I've worked on now. What's happening?!
Update:
It looks like working properly again in v1.3.10.
Original answer:
I've just run into this problem after upgrading angular (and angular-animate) to v1.3.8. Reverting back to v1.2.28 made this work again. (Albeit I'm using Javascript animations instead of class based ones.) I'm not sure if it's an intended change or a bug, maybe someone with deeper knowledge of angular and the changelog could provide further info on this...

Page transition animation similar to Medium.com

I'm trying to find out how does medium do the animation when you click the bottom button to load the next article.
To see it, please head over to a Medium article, scroll to bottom and click to go to the next article.
I know how to use AJAX to load another page, but how can I use a similar animation ? I've searched through their code, but couldn't find it.
is similar to jquery pop effect
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
try pop effect on page.
it is just a css transition combination of scale and fade;
You can try to achieve the same effect using combination of css-animations and javascript. As a starting point you can look at effeckt.css it's a collection of css animations. Unfortunately it doesn't contain exact animation, so I've tried to reproduce it in this fiddle
The basic idea is to use two effects scaleDownFromFront and slideFromBottom:
#keyframes scaleDownFromFront {
to {
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes slideFromBottom {
from {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}

CSS Animation + Javascript Callback

I have a CSS transition that uses -webkit-transform: translateX to move a div from the right to the left, its a basic sliding movement (I am guaranteed to only have webkit users in my case).
My problem is that I need to run an action when the animation completes, and up until now I have been using a setTimeout call in javascript to run 1 ms after the animation completes.
It works 99% of the time perfectly, but in rare circumstances, it doesn't go smoothly and it causes problems and I know this is due to the timeout not running exactly at the correct time.
From my research online, I have heard of adding an event listener for webkit transition end but cannot get it working, it works fine on someone else's example online:
jsfiddle.net/jfriend00/5FnwY/
My animation is triggered by javascript, on click of a button, the .move_in class is added to the main div element which then starts the animation. The CSS is below:
.renderZone {
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-duration:805ms;
-moz-animation-timing-function:ease-in-out;
-moz-animation-duration:805ms;
}
.move_in {
-webkit-transform: translateX(0%) !important;
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-0%) !important;
-moz-animation-name: slideouttoleft;
}
.move_out {
-webkit-transform: translateX(-100%) !important;
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%) !important;
-moz-animation-name: slideouttoleft;
}
#-webkit-keyframes slideouttoleft {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(-100%);
}
}
Does anybody have any idea of the best way to approach this, or even a better way of doing what I am doing? I need to keep the CSS animation running the way it is as this provides the best performance on iOS which I have been experimenting a lot with.
Hoping somebody can help!
Thanks!!!
CSS3 has a property called “webkitAnimationEnd” which can be used as an event lister in JavaScript.
Example code:
function cssAnimationEnd() {
//looks for the ID box from the css and fires the event listen when the animation is complete.
box.addEventListener( 'webkitAnimationEnd', function( event) {
alert( "Finished animation!" );
}, false );
}

Categories

Resources