wpengine

wpengine

Welcome, Guest
Username: Password: Remember me

TOPIC: Basic use - how to animate?

Basic use - how to animate? 9 years 1 month ago #244

  • Oskar
  • Oskar's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: -2
Hi!

I'm new to this wonderful plugin and I'm quite a beginner at using custom CSS.
Could someone please describe how I should get started with this plugin? I've tried to find some basic user information, but every guide/tutorial seems to start far away from the basics..

I want to animate a few rows created in Page Builder for one of my pages. When scrolling down, the text and pictures should meet in the middle of the page. I've seen this animation is possible - but HOW do I apply it to my content??

There is a custom CSS space in the plugin - what am I supposed to write there to make the animations apply to my content?
Please bare with my 'silly' basic questions..

All help is welcome! Thank you.
link to site/page: oskarwebrell.com/aktuellt/
The administrator has disabled public write access.

Basic use - how to animate? 9 years 1 month ago #245

  • Oskar
  • Oskar's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: -2
OK, so I found the icon in Visual editor. Tried it out, just choosing animation and replacing the silly text with my own - but it didnt work. Any suggestions?
The administrator has disabled public write access.

Basic use - how to animate? 9 years 1 month ago #246

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

Thanks a lot for using the Animate It! Plugin.
Adding Animation to any widget is as easy as. Select Animation > Copy code > Paste it in Custom Animation Class and Save
This process is explained step-by-step here: http://www.downloads.eleopard.in/animate-it-documentation-wordpress.html#adding-animations-to-widgets

Note: In your case, while generating the animation, please set Scroll to "Yes". So that the animation will start when user has scrolled to the content which has animation.

In your case, i.e animating the elements at the center of the page. You can set on-scroll percentage to 50%. This setting will start the animations when the use scrolls down to the content and the content is at the center of the screen. You can play a little with on-scroll % in order to get the sweet spot you need.
Setting the on-scroll percentage is also explained step-by-step here: http://www.downloads.eleopard.in/animate-it-documentation-wordpress.html#note

Please feel free to let me know if you have any other queries.
The administrator has disabled public write access.

Basic use - how to animate? 9 years 1 month ago #247

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Could you please post the link to the page/post here, in which you have applied the animations?
The administrator has disabled public write access.

Basic use - how to animate? 9 years 1 month ago #248

  • Oskar
  • Oskar's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: -2
Thank you for the quick reply!

Link to page: oskarwebrell.com/aktuellt/

I suddenly understood that my content counts as widgets so that helped. However, my text isn't quite that sort of widgets after all since it isn't listed under the Widgets page? I tried something that actually worked for me:

> copy the requested animation code from the generator > go to Pages > select my target page 'Aktuellt' and open EDIT on every separate part of text/widget in Page Builder > paste the code under 'Widget Attributes'/'Widget Class' when editing that particular text/widget.

Does this make any sense to you? Hard to explain the steps I do when I'm only guessing my way. Is this OK and reliable as a way of animating my content? Seems to work fine so far!
The administrator has disabled public write access.

Basic use - how to animate? 9 years 1 month ago #249

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Yup, things are looking good here :cheer:

Let me know if you face any other issues.
Also, please don't forget to rate the plugin: https://wordpress.org/plugins/animate-it/
The administrator has disabled public write access.
The following user(s) said Thank You: Oskar
Time to create page: 0.167 seconds

Need Customization? Feel free to...

Contact Us

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