Skip to content

Instantly share code, notes, and snippets.

@Pross
Created September 14, 2017 17:27
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Pross/b09e7de761650c54378f037c1f4e8d24 to your computer and use it in GitHub Desktop.
Save Pross/b09e7de761650c54378f037c1f4e8d24 to your computer and use it in GitHub Desktop.
Some animations using animate.css
<?php
// The following code is designed to be added to your child theme functions.php
// It adds a new 'Animation Redux' setting under the advanced tab for any module.
add_filter( 'fl_builder_module_custom_class', 'fl_builder_module_custom_class_filter', 10, 2 );
function fl_builder_module_custom_class_filter( $class, $module ) {
$animate = '';
if ( ! empty( $module->settings->animation_redux ) ) {
$animate = ' animated ' . $module->settings->animation_redux;
wp_enqueue_style( 'animate-css', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' );
}
return $class . $animate;
}
add_filter( 'fl_builder_render_module_settings', 'fl_builder_render_module_settings_filter', 10, 2 );
function fl_builder_render_module_settings_filter( $form, $module ) {
$form['advanced']['sections']['animation_redux'] = array(
'title' => 'Animated Redux',
'fields' => array(
'animation_redux' => array(
'type' => 'select',
'label' => 'Animation Style',
'options' => array(
'' => 'None',
'bounce' => 'bounce',
'flash' => 'flash',
'pulse' => 'pulse',
'rubberBand' => 'rubberBand',
'shake' => 'shake',
'swing' => 'swing',
'tada' => 'tada',
'wobble' => 'wobble',
'jello' => 'jello',
'bounceIn' => 'bounceIn',
'bounceInDown' => 'bounceInDown',
'bounceInUp' => 'bounceInUp',
'bounceOut' => 'bounceOut',
'bounceOutDown' => 'bounceOutDown',
'bounceOutLeft' => 'bounceOutLeft',
'bounceOutRight' => 'bounceOutRight',
'bounceOutUp' => 'bounceOutUp',
'fadeIn' => 'fadeIn',
'fadeInDown' => 'fadeInDown',
'fadeInDownBig' => 'fadeInDownBig',
'fadeInLeft' => 'fadeInLeft',
'fadeInLeftBig' => 'fadeInLeftBig',
'fadeInRightBig' => 'fadeInRightBig',
'fadeInUp' => 'fadeInUp',
'fadeInUpBig' => 'fadeInUpBig',
'fadeOut' => 'fadeOut',
'fadeOutDown' => 'fadeOutDown',
'fadeOutDownBig' => 'fadeOutDownBig',
'fadeOutLeft' => 'fadeOutLeft',
'fadeOutLeftBig' => 'fadeOutLeftBig',
'fadeOutRightBig' => 'fadeOutRightBig',
'fadeOutUp' => 'fadeOutUp',
'fadeOutUpBig' => 'fadeOutUpBig',
'flip' => 'flip',
'flipInX' => 'flipInX',
'flipInY' => 'flipInY',
'flipOutX' => 'flipOutX',
'flipOutY' => 'flipOutY',
'fadeOutDown' => 'fadeOutDown',
'lightSpeedIn' => 'lightSpeedIn',
'lightSpeedOut' => 'lightSpeedOut',
'rotateIn' => 'rotateIn',
'rotateInDownLeft' => 'rotateInDownLeft',
'rotateInDownRight' => 'rotateInDownRight',
'rotateInUpLeft' => 'rotateInUpLeft',
'rotateInUpRight' => 'rotateInUpRight',
'rotateOut' => 'rotateOut',
'rotateOutDownLeft' => 'rotateOutDownLeft',
'rotateOutDownRight' => 'rotateOutDownRight',
'rotateOutUpLeft' => 'rotateOutUpLeft',
'rotateOutUpRight' => 'rotateOutUpRight',
'slideInUp' => 'slideInUp',
'slideInDown' => 'slideInDown',
'slideInLeft' => 'slideInLeft',
'slideInRight' => 'slideInRight',
'slideOutUp' => 'slideOutUp',
'slideOutDown' => 'slideOutDown',
'slideOutLeft' => 'slideOutLeft',
'slideOutRight' => 'slideOutRight',
'zoomIn' => 'zoomIn',
'zoomInDown' => 'zoomInDown',
'zoomInLeft' => 'zoomInLeft',
'zoomInRight' => 'zoomInRight',
'zoomInUp' => 'zoomInUp',
'zoomOut' => 'zoomOut',
'zoomOutDown' => 'zoomOutDown',
'zoomOutLeft' => 'zoomOutLeft',
'zoomOutUp' => 'zoomOutUp',
'hinge' => 'hinge',
'rollIn' => 'rollIn',
'rollOut' => 'rollOut',
),
'preview' => array(
'type' => 'refresh',
),
),
),
);
return $form;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment