wpengine

wpengine

Welcome, Guest
Username: Password: Remember me

TOPIC: How do I nest animations using the class generator

How do I nest animations using the class generator 9 years 11 months ago #84

  • stephen
  • stephen's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: -9
I would like to nest animations on a widget. I this possible using the class generator?
The administrator has disabled public write access.

How do I nest animations using the class generator 9 years 11 months ago #85

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Dear Stephen,

You can have nested animations by Nesting the div elements with required applied generated using Animate It Class Generator:
http://downloads.eleopard.in/class-generator

Format should look something like this:
<div class="animation-stye1">
     <div class="animation-stye2">
        "Your Content Here"
     </div> <!-- animation-stye2 Closed-->
</div> <!-- animation-stye1 Closed-->

And Example of the above format:
<div class=" animated bounceOut delay8">
     <div class=" animated bounceIn delay2">
        "Your Content Here"
     </div> <!-- animation-stye2 Closed-->
</div> <!-- animation-stye1 Closed-->

Please remember to use proper animation sequence. For instance in the above example Entrance animation (bounceIn 1 Second) is applied inside of Exit animation (bounceOut 4Seconds)

Please let me know if you have any queries.
Last Edit: 9 years 11 months ago by eLEOPARD.
The administrator has disabled public write access.
The following user(s) said Thank You: Mzlaki

How do I nest animations using the class generator 9 years 8 months ago #111

  • Rune
  • Rune's Avatar
  • Offline
  • New Member
  • Posts: 4
  • Karma: 0
Hi - thanks for a great plugin.
I am having some problems with nested animations if I define delay as bigger than 12.
When doing so, the text doesn't show at all.
Did I miss something?

Thanks for a great plugin btw :)
The administrator has disabled public write access.

How do I nest animations using the class generator 9 years 8 months ago #112

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Dear Rune,

The problem is, the delays are set to the maximum of delay12(= 6 seconds)

If you wish to obtain more delay, you can add the delay class yourselves and add them to the animate classes.

for example, lets say you wish to add a delay of 15 seconds, then here's the css you add:
.delay30 {
    -webkit-animation-delay: 15s;
        -moz-animation-delay: 15s;
          -ms-animation-delay: 15s;
             -o-animation-delay: 15s;
                  animation-delay: 15s;
}

This css class can be added to your theme's / template's custom style.css or something similar.

If you could send me your website link, I can tell you more precisely which file to add it.

Finally, when you add the shortcode class, just replace the delay by the new delay class you just created.
For example, change: animated bounce delay2 to animated bounce delay30 in this case.

Please let me know if you have any more queries. Thanks for using Animate it :)
Last Edit: 9 years 8 months ago by eLEOPARD.
The administrator has disabled public write access.

How do I nest animations using the class generator 9 years 8 months ago #113

  • Rune
  • Rune's Avatar
  • Offline
  • New Member
  • Posts: 4
  • Karma: 0
Thanks for the swift reply, I will take a look at it today :)
The administrator has disabled public write access.
Time to create page: 0.220 seconds

Need Customization? Feel free to...

Contact Us

If you like these extensions, help us buy Yoga Mats :)