How To Delay Or Animate Buttons Or Modules

In this article, you are going to learn the 2 ways of adding animation and delay to a button or any Lime Funnels modules in your Funnel, Web Page, Course, and Blog.

Lime Funnels Advanced Animation

You can animate almost any content on your Site using the Lime Funnels Advanced Animation that can be found on Module's Settings > Advanced > Animation in all of your Lime Funnels modules.

Animations

Lime Funnels Advance Animation lets your Content gradually change from one style to another. Below are the available animations in any of your Lime Funnels Module:

Delay

This specifies a delay for the start of an animation.

Duration

The duration defines how long an animation should take to complete. If the animation duration is not specified or set to "0", no animation will occur.

Fade In Animation using CSS and JavaScript

Simply copy and paste into Lime Funnels.

1. Open the module you want revealed go to advanced and set the ID to reveal-30

2. Go to layout CSS for the page and add this CSS

#reveal-30 {

                  display:none;

                  }

3. Go to layout JS and add this:

// assume the hidden div has ID #revead-30

                                                                  (function($){

                                                                  $(document).ready(function(){

                                                                  {         

                                                                  setTimeout(function(){

                                                                  $('#reveal-30').fadeIn();

                                                                  }, 30000); // 30000 is 30s

                                                                  });

                                                                  })(jQuery);