Trying to animate some page transitions with smoothstate.js, and I'm at an impasse.
Here's a jsfiddle, but it's throwing a console error that I'm not getting when developing. However you can still see the css issue i'm talking about: http://jsfiddle.net/3f5wp9xL/6/
Here's another demo, that doesn't have the console error: http://davidwesleymartin.com/animtest/index.html
All animations are set in CSS (via @keyframe, animation properties).
The animations work on page load, but are behaving strangely when I try to reverse them after a link is clicked. I am trying to reverse them by resetting the 'animation-direction' property when an exit class ('is-exiting') is added to the main container after a link is clicked.
The only way I can get this to work is by also setting a NEW value for 'animation-name', if this is the same value as it was before, it doesn't work.
Relevant HTML:
<div id='main'>
<aside class='main-side'>
<div class='anim_element anim_element--fadeIn'>
<h2>sidebar</h2>
<ul>
<li>
<a href='index.html'>Link 1</a>
</li>
<li>
<a href='index.html'>Link 2</a>
</li>
<li>
<a href='index.html'>Link 3</a>
</li>
</ul>
</div>
</aside>
<div class='main-content'>
<div class='anim_element anim_element--fadeInLeft'>
<h1>Main Content</h1>
<p>Lorem...</p>
</div>
</div>
</div>
Relevant CSS (note:everything is properly prefixed on the demo, that is not the issue):
@keyframes fadeIn{
0% {
opacity:0;
transform:scale(0.8);
}
100% {opacity:1;}
}
@keyframes fadeInLeft{
0% {
opacity:0;
transform: translate3d(-100%, 0, 0);
}
100% {
opacity:1;
}
}
#main .anim_element{
animation-duration: .25s;
transition-timing-function: ease-in;
animation-fill-mode: both;
}
#main .anim_element--fadeIn{
animation-name: fadeIn;
}
#main .anim_element--fadeInLeft{
animation-name: fadeInLeft;
}
#main.is-exiting .anim_element{
animation-name: fadeIn;
animation-direction: alternate-reverse;
}
It works for me.
http://davidwesleymartin.com/animtest/index.html
But jsfiddle demo is broken. I think you need to specify the page to load in href
.
It works.
<a href='index.html'>Link 3</a>
It doesn't work.
<a href='/'>Link 3</a>
The point is the linked page has #main
element or not. I think this is kinda bug of smoothState.js. The error occurred in this line for me that is when finding a #id
element.
https://github.com/weblinc/jquery.smoothState.js/blob/master/jquery.smoothState.js#L215
UPDATE
To restart css3 animation, you need to redraw element.
more info: http://css-tricks.com/restart-css-animation/
;(function($) {
'use strict';
$.fn.restartCSSAnimation = function(cls) {
var self = this;
self.removeClass(cls);
$.smoothStateUtility.redraw(self);
setTimeout(function () { self.addClass(cls) });
return self;
};
var $body = $('html, body'),
content = $('#main').smoothState({
// Runs when a link has been activated
onStart: {
duration: 1000, // Duration of our animation
render: function (url, $container) {
// toggleAnimationClass() is a public method
content.toggleAnimationClass('is-exiting');
// restart animation
$('.anim_element--fadeIn').restartCSSAnimation('anim_element--fadeIn');
$('.anim_element--fadeInLeft').restartCSSAnimation('anim_element--fadeInLeft');
// Scroll user to the top
$body.animate({scrollTop: 0});
}
}
}).data('smoothState');
})(jQuery);
CSS
#main .anim_element--fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn; }
#main .anim_element--fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft; }
#main.is-exiting .anim_element {
-webkit-animation-direction: alternate-reverse;
animation-direction: alternate-reverse; }
http://jsfiddle.net/jewmmqoa/2/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With