easing option for auto-animate

This commit is contained in:
Hakim El Hattab 2020-02-01 19:11:52 +01:00
parent a3cd500154
commit b6c890b1a7
4 changed files with 74 additions and 24 deletions

View file

@ -934,11 +934,8 @@ body {
/********************************************* /*********************************************
* AUTO ANIMATE * AUTO ANIMATE
*********************************************/ *********************************************/
.reveal section[data-auto-animate] {
transition: none; }
.reveal section[data-auto-animate] .auto-animate-target { .reveal section[data-auto-animate] .auto-animate-target {
transition: all 0.7s ease; transition-property: all;
-webkit-transform-origin: top left; -webkit-transform-origin: top left;
transform-origin: top left; } transform-origin: top left; }

View file

@ -994,12 +994,8 @@ $controlsArrowAngleActive: 36deg;
* AUTO ANIMATE * AUTO ANIMATE
*********************************************/ *********************************************/
.reveal section[data-auto-animate] {
transition: none;
}
.reveal section[data-auto-animate] .auto-animate-target { .reveal section[data-auto-animate] .auto-animate-target {
transition: all 0.7s ease; transition-property: all;
transform-origin: top left; transform-origin: top left;
} }

View file

@ -190,11 +190,19 @@
// Can be used to globally disable auto-animation // Can be used to globally disable auto-animation
autoAnimate: true, autoAnimate: true,
// Default settings for or auto-animate transitions, can be
// overridden per-slide via data arguments
autoAnimateEasing: 'ease',
autoAnimateDuration: 0.7,
// CSS styles that auto-animations will animate between // CSS styles that auto-animations will animate between
autoAnimateStyles: [ autoAnimateStyles: [
'opacity', 'opacity',
'color', 'color',
'backgroundColor', 'backgroundColor',
'font-size',
'line-height',
'letter-spacing',
'border-top-left-radius', 'border-top-left-radius',
'border-top-right-radius', 'border-top-right-radius',
'border-bottom-left-radius', 'border-bottom-left-radius',
@ -3018,8 +3026,24 @@
cueAutoSlide(); cueAutoSlide();
// Auto-animation
if( slideChanged && previousSlide && currentSlide ) { if( slideChanged && previousSlide && currentSlide ) {
// Skip the slide transition between our two slides
// when auto-animating individual elements
if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' ) ) {
previousSlide.style.transition = 'none';
currentSlide.style.transition = 'none';
setTimeout( function() {
previousSlide.style.transition = '';
currentSlide.style.transition = '';
}, 0 );
}
// Run the auto-animation between our slides
autoAnimate( previousSlide, currentSlide ); autoAnimate( previousSlide, currentSlide );
} }
} }
@ -3789,10 +3813,28 @@
if( config.autoAnimate ) { if( config.autoAnimate ) {
var options = {
easing: config.autoAnimateEasing,
duration: config.autoAnimateDuration,
offsetY: 0
};
// If our slides are centered vertically, we need to // If our slides are centered vertically, we need to
// account for their difference in position when // account for their difference in position when
// calculating deltas for animated elements // calculating deltas for animated elements
var offsetY = config.center ? fromSlide.offsetTop - toSlide.offsetTop : 0; if( config.center ) {
options.offsetY = fromSlide.offsetTop - toSlide.offsetTop;
}
// Check if easing is overriden
if( toSlide.hasAttribute( 'data-auto-animate-easing' ) ) {
options.easing = toSlide.getAttribute( 'data-auto-animate-easing' );
}
// Check if the duration is overriden
if( toSlide.hasAttribute( 'data-auto-animate-duration' ) ) {
options.duration = parseFloat( toSlide.getAttribute( 'data-auto-animate-duration' ) );
}
var fromTargets = {}; var fromTargets = {};
@ -3803,7 +3845,7 @@
toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) { toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) {
var fromElement = fromTargets[ toElement.getAttribute( 'data-id' ) ]; var fromElement = fromTargets[ toElement.getAttribute( 'data-id' ) ];
if( fromElement ) { if( fromElement ) {
autoAnimateElement( fromElement, toElement, offsetY ); autoAnimateElement( fromElement, toElement, options );
} }
} ); } );
@ -3815,25 +3857,22 @@
* Auto-animates the properties of an element from their original * Auto-animates the properties of an element from their original
* values to their new state. * values to their new state.
* *
* @param {HTMLElement} from * @param {HTMLElement} from
* @param {HTMLElement} to * @param {HTMLElement} to
* @param {Object} options
*/ */
function autoAnimateElement( from, to, offsetY ) { function autoAnimateElement( from, to, options ) {
var fromProps = getAutoAnimatableProperties( from ), var fromProps = getAutoAnimatableProperties( from ),
toProps = getAutoAnimatableProperties( to ); toProps = getAutoAnimatableProperties( to );
var delta = { var delta = {
x: fromProps.x - toProps.x, x: fromProps.x - toProps.x,
y: fromProps.y - toProps.y, y: fromProps.y - toProps.y + options.offsetY,
scaleX: fromProps.width / toProps.width, scaleX: fromProps.width / toProps.width,
scaleY: fromProps.height / toProps.height scaleY: fromProps.height / toProps.height
}; };
// Correction applied to account for varying vertical
// positions in decks with vertical centering
if( typeof offsetY === 'number' ) delta.y += offsetY;
to.style.transition = 'none'; to.style.transition = 'none';
to.style.transform = 'translate('+delta.x+'px, '+delta.y+'px) scale('+delta.scaleX+','+delta.scaleY+')'; to.style.transform = 'translate('+delta.x+'px, '+delta.y+'px) scale('+delta.scaleX+','+delta.scaleY+')';
to.classList.add( 'auto-animate-target' ); to.classList.add( 'auto-animate-target' );
@ -3846,6 +3885,8 @@
// Run the FLIP animation // Run the FLIP animation
to.style.transition = ''; to.style.transition = '';
to.style.transitionTimingFunction = options.easing;
to.style.transitionDuration = options.duration + 's';
to.style.transform = ''; to.style.transform = '';
config.autoAnimateStyles.forEach( function( propertyName ) { config.autoAnimateStyles.forEach( function( propertyName ) {
@ -3883,11 +3924,20 @@
// Cache the list of properties // Cache the list of properties
element._animatableProperties = properties; element._animatableProperties = properties;
// Provide a method for rolling back this element to its // Provide a method for rolling back all changes made to this
// pre auto-animated state. // element as part of auto-animating it
autoAnimatedRollbacks.push( function( originalStyleAttribute ) { autoAnimatedRollbacks.push( function( originalStyleAttribute ) {
element.setAttribute( 'style', originalStyleAttribute );
element.classList.remove( 'auto-animate-target' ); element.classList.remove( 'auto-animate-target' );
element.style.transitionTimingFunction = '';
element.style.transitionDuration = '';
if( typeof originalStyleAttribute === 'string' ) {
element.setAttribute( 'style', originalStyleAttribute );
}
else {
element.removeAttribute( 'style' );
}
delete element._animatableProperties; delete element._animatableProperties;
}.bind( null, element.getAttribute( 'style' ) ) ); }.bind( null, element.getAttribute( 'style' ) ) );

View file

@ -19,10 +19,17 @@
<div class="slides"> <div class="slides">
<section data-auto-animate> <section data-auto-animate>
<h3 data-id="opacity-test">Opacity 1.0</h2> <h3 data-id="opacity-test">Opacity 1.0</h3>
</section>
<section data-auto-animate data-auto-animate-duration="0.3">
<h3 data-id="opacity-test" style="opacity: 0.2; margin-top: 200px;">Opacity 0.2</h3>
</section>
<section data-auto-animate>
<h3 data-id="text-props" style="background: #555;">Text props</h3>
</section> </section>
<section data-auto-animate> <section data-auto-animate>
<h3 data-id="opacity-test" style="opacity: 0.2; margin-top: 200px;">Opacity 0.2</h2> <h3 data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Text props</h3>
</section> </section>
<section data-auto-animate style="height: 600px"> <section data-auto-animate style="height: 600px">