wpengine

wpengine

Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
Animate It!
Questions
Animate like in your example.

TOPIC: Animate like in your example.

Animate like in your example. 8 years 6 months ago #485

  • Nikolai
  • Nikolai's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: 0
Thank you very much for your plugin!
Trying to implement it like in your example:

Attachment not found



But I don't have experience in CSS and trying to do it through html, where I have 3 tables and 3 rows, and put the animation there. On laptop it looks good, but when I run the web through mobile phone, it doesn't move the tables on new rows.

The question is: Can you provide the code from your example how did you animated it?
Last Edit: 8 years 6 months ago by Nikolai.
The administrator has disabled public write access.

Animate like in your example. 8 years 6 months ago #486

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

Thanks a lot for using the Animate It! plugin.

The example you mentioned will take a class to place the elements side by side.

Please follow these steps to add the animation Side by Side:
http://www.downloads.eleopard.in/forum/advanced-user-settings-ai/220-adding-animations-side-by-side.html

Here are an extra rule to add in the CSS block, This will make the 3 icons centered and add some spacing in between them as well:
.side-by-side{
    display: inline-block;
    padding: 15px;
}

.side-by-side p{
    margin: 0;
}

Now, when you add each animations, select:
Entry Animation : rotateIn
select the animation delay as per your requirement, based on whether you want to show all icons at once, or one-by-one.

For the example given in the Demo by us, just copy and paste the following code, and it should work fine.
[edsanimate_start
entry_animation_type= "rotateIn" entry_delay= "0" entry_duration= "1.5" entry_timing= "ease-in-out"
exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= ""
animation_repeat= "1" keep= "yes" animate_on= "scroll" scroll_offset= "75" custom_css_class= "side-by-side"]

"IMAGE 1 HERE"

[edsanimate_end]

[edsanimate_start
entry_animation_type= "rotateIn" entry_delay= "1.5" entry_duration= "1.5" entry_timing= "ease-in-out"
exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= ""
animation_repeat= "1" keep= "yes" animate_on= "scroll" scroll_offset= "75" custom_css_class= "side-by-side"]

"IMAGE 2 HERE"

[edsanimate_end]

[edsanimate_start
entry_animation_type= "rotateIn" entry_delay= "3" entry_duration= "1.5" entry_timing= "ease-in-out"
exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= ""
animation_repeat= "1" keep= "yes" animate_on= "scroll" scroll_offset= "75" custom_css_class= "side-by-side"]

"IMAGE 3 HERE"

[edsanimate_end]

You can see this code Live in action here: animateitdemo.wpdevcloud.com/nikolai
Please let me know if you face any issues.
The administrator has disabled public write access.

Animate like in your example. 8 years 6 months ago #487

  • Nikolai
  • Nikolai's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: 0
Thanks a lot for your explanation +1 to your karma!) Trying to implement it for Joomla but it shows vertical, can't find something looks like 'Animate it! Option' from your example to put CSS you've wrote. Trying to put it in template options 'Custom CSS' but it doesn't work.

Attachment not found



Code From my Joomla
{edsnewanimate|class="eds-animate edsanimate-sis-hidden side-by-side"|data-eds-entry-animation="rotateIn"|data-eds-entry-delay="0"|data-eds-entry-duration="1.5"|data-eds-entry-timing="ease-in-out"|data-eds-exit-animation=""|data-eds-exit-delay=""|data-eds-exit-duration=""|data-eds-exit-timing=""|data-eds-repeat-count="1"|data-eds-keep="yes"|data-eds-animate-on="scroll"|data-eds-scroll-offset="75"}
Pic
{/edsnewanimate}

{edsnewanimate|class="eds-animate edsanimate-sis-hidden side-by-side"|data-eds-entry-animation="rotateIn"|data-eds-entry-delay="1.5"|data-eds-entry-duration="1.5"|data-eds-entry-timing="ease-in-out"|data-eds-exit-animation=""|data-eds-exit-delay=""|data-eds-exit-duration=""|data-eds-exit-timing=""|data-eds-repeat-count="1"|data-eds-keep="yes"|data-eds-animate-on="scroll"|data-eds-scroll-offset="75"}
Pic
{/edsnewanimate}

{edsnewanimate|class="eds-animate edsanimate-sis-hidden side-by-side"|data-eds-entry-animation="rotateIn"|data-eds-entry-delay="1.5"|data-eds-entry-duration="1.5"|data-eds-entry-timing="ease-in-out"|data-eds-exit-animation=""|data-eds-exit-delay=""|data-eds-exit-duration=""|data-eds-exit-timing=""|data-eds-repeat-count="1"|data-eds-keep="yes"|data-eds-animate-on="scroll"|data-eds-scroll-offset="75"}
Pic
{/edsnewanimate}
The administrator has disabled public write access.

Animate like in your example. 8 years 6 months ago #488

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

Could you please provide e temperory admin credentials for your website.
Please mail it to contact(at)eleopard.in

I would take a look at this issue myself.
The administrator has disabled public write access.

Animate like in your example. 8 years 6 months ago #489

  • Nikolai
  • Nikolai's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: 0
Sent it.
The administrator has disabled public write access.

Animate like in your example. 8 years 6 months ago #490

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Got it. Looking into it.
The administrator has disabled public write access.
Forum
Animate It!
Questions
Animate like in your example.
Time to create page: 0.234 seconds

Need Customization? Feel free to...

Contact Us

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