Inspiration for Item Transitions

that is very cool marry 😀 but how to set time that it changes automatically 🙂

Wow amazing. Thank you so much, you made my day! 🙂

I really like it, nice effects, i find it really inspiring (especially with transparent and full width), thanks

Great work!
Thank’s for sharing that!

Hello, I actually have a question about your animated responsive grid. http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/ I don’t want to use random. And I don’t want to use sliding animations type. Is it possible to specify 2 or 3 animation types I want to use in animType field? Thanks.

Again a very inspiring article. Finding names for transitions was probably a great exercise as well!

how can i program it so one animation is automatically selected without all the options? if anyone could please help mew this this i would appreciate it. 🙂

thank you
great demo!

Really nice stuff !!!!!!!

Hello! Nice implementation! Is it possible to improve with autoplay feature?

thanks!

Really awesome!

The “cliff diving” one reminded me a lot of those old viewfinder toys. I put a thick white border around the surrounding article element, and it looked awesome! Rather nostalgic. Thanks for these, Mary Lou! Excellent work as usual.

Hi guys this is how i have main.js, i didn’t wanted it to auto scroll, but mine doesn’t need to select an effect:

find this line and change it
classie.addClass( component, ‘fxSoftScale’ );

here it goes

(function() {
var support = { animations : Modernizr.cssanimations },
animEndEventNames = {
‘WebkitAnimation’ : ‘webkitAnimationEnd’,
‘OAnimation’ : ‘oAnimationEnd’,
‘msAnimation’ : ‘MSAnimationEnd’,
‘animation’ : ‘animationend’
},
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( ‘animation’ ) ],

/*effectSel = document.getElementById( ‘fxselect’ ),*/
component = document.getElementById( ‘component’ ),
items = component.querySelector( ‘ul.itemwrap’ ).children,
current = 0,
itemsCount = items.length,
nav = component.querySelector( ‘nav’ ),
navNext = nav.querySelector( ‘.next’ ),
navPrev = nav.querySelector( ‘.prev’ ),
isAnimating = false;

function init() {
showNav();
changeEffect();
navNext.addEventListener( ‘click’, function( ev ) { ev.preventDefault(); navigate( ‘next’ ); } );
navPrev.addEventListener( ‘click’, function( ev ) { ev.preventDefault(); navigate( ‘prev’ ); } );
/*effectSel.addEventListener( ‘change’, changeEffect );*/
}

function hideNav() {
nav.style.display = ‘none’;
}

function showNav() {
nav.style.display = ‘block’;
}

function changeEffect() {
component.className = component.className.replace(/\bfx.*?\b/g, ”);
/*if( effectSel.selectedIndex ) {
classie.addClass( component, effectSel.options[ effectSel.selectedIndex ].value );
classie.addClass( component, ‘fxPushReveal’ );
showNav();
}*/
classie.addClass( component, ‘fxSoftScale’ );
/*else {
hideNav();
}*/
}

function navigate( dir ) {
/*if( isAnimating || !effectSel.selectedIndex ) return false;*/
isAnimating = true;
var cntAnims = 0;

var currentItem = items[ current ];

if( dir === ‘next’ ) {
current = current 0 ? current – 1 : itemsCount – 1;
}

var nextItem = items[ current ];

var onEndAnimationCurrentItem = function() {
this.removeEventListener( animEndEventName, onEndAnimationCurrentItem );
classie.removeClass( this, ‘current’ );
classie.removeClass( this, dir === ‘next’ ? ‘navOutNext’ : ‘navOutPrev’ );
++cntAnims;
if( cntAnims === 2 ) {
isAnimating = false;
}
}

var onEndAnimationNextItem = function() {
this.removeEventListener( animEndEventName, onEndAnimationNextItem );
classie.addClass( this, ‘current’ );
classie.removeClass( this, dir === ‘next’ ? ‘navInNext’ : ‘navInPrev’ );
++cntAnims;
if( cntAnims === 2 ) {
isAnimating = false;
}
}

if( support.animations ) {
currentItem.addEventListener( animEndEventName, onEndAnimationCurrentItem );
nextItem.addEventListener( animEndEventName, onEndAnimationNextItem );
}
else {
onEndAnimationCurrentItem();
onEndAnimationNextItem();
}

classie.addClass( currentItem, dir === ‘next’ ? ‘navOutNext’ : ‘navOutPrev’ );
classie.addClass( nextItem, dir === ‘next’ ? ‘navInNext’ : ‘navInPrev’ );
}

init();
})();

Hi Mary Lou, I like your second demo, I mean it;s easy for me.