Scroll Offset (in percentage):

Hi Rob,

Thanks for using the Animate It!

Scroll offset refers to the amount of element visible in the screen, after the element is visible as per the scroll offset, the animation starts.

e.g. let’s say you have added an animation to an image if size 100px x 100px. And the scroll offset is set to 50%.

Now, when you scroll down the page to that image. The Animation will start after the image is 50% visible in the screen area (in this case, half the image is visible, 50px).

In case you have set scroll offset to 0%, the image will animate as soon as you scroll to it, and its visible on the screen.

Hope this helps ??

Many thanks – makes sense. I seem to have it working for the “Why Buy From Us” section, animations happen just after all the image is in view (offset set to 120%).

The section before however (“How Does it Work”) doesn’t seem to work the same, if i set offset to around 220% then it works. Is this perhaps a margin issue as I have some negative margin values? If so is it possible to set offset percantage within the individual animated elements themselves?

Thanks for the support thus far, and an excellent plugin.
Cheers,
Rob

Hi Rob,

In order to provide unique “scroll offset” for the different animated elements, please follow the steps mentioned below for different methods:

METHOD 1: If you are using “Animate It!” button available in “TinyMCE” post editor.

1. While adding/editing any post, click on “Animate It” button.
2. In the popup, go to the options tab.
3. In there, if you set “Animate On” to scroll, you will get another input field to enter scroll offset unique to the animation you are creating.

METHOD 2: If you are using class generator from https://www.downloads.eleopard.in/class-generator-wordpress.html

1. Generate CSS classes as per your requirement. Remember to set “Scroll” to yes for “Animate On”.
2. While adding CSS classes to a DIV element, add another property eds_scroll_offset with the value of scroll offset as per the requirement. e.g.

<div class="animated flash duration1 eds-on-scroll" eds_scroll_offset="80">Content</div>

Please let us know if it helps.

• This reply was modified 6 years, 4 months ago by eleopard.
• This reply was modified 6 years, 4 months ago by eleopard.
• This reply was modified 6 years, 4 months ago by eleopard.
• This reply was modified 6 years, 4 months ago by eleopard.

Thanks – that perfect!

Marking as resolved