How do I get scroll reveal function working?

I see the checkbox in the "features" section of customization, but how do I actually make images scroll reveal in posts?

Do I need to make sure that the images are a specific size?
Do I need to choose certain options in the "Attachment Display Settings" on the Insert Media page?

The only way I can get it to work at the moment is by manually editing the page code before every image with:
<div class="gk-wide-image" data-sr="enter bottom and move 200px and scale up 20% over 1s">
which I copied from one of the demo pages.

But this then makes the images expand wider than screen width, and I can't find anywhere in the documentation to tell me how the numbers in this field should be adjusted.

I thought the scroll reveal code should be inserted automatically whenever I insert an image in a page...

Thanks in advance for help.

Hello,

Please wrap the image with additional container and then please add your data-sr attribute to this container. It is probably caused by fact that scroll reveal totally overwrites the transform CSS property matrix and overrides in this case the CSS code for the element.

Sorry, I don't understand about this.

What settings should I use for the "Attachment Display Settings" and what is the syntax for the data-sr attribute? I can't see it in the documentation.

And regarding "scroll reveal totally overwrites the transform CSS property matrix and overrides in this case the CSS code for the element", do you mean that something is not working correctly? Do you mean that every image on every post has to be manually adjusted?

I just found this:
https://github.com/jlmakes/scrollReveal ... i/Keywords which I will try out.

But shouldn't a container be applied by default to images if the scroll reveal setting is checked in customization?

You have to use a following syntax for images:

Code: Select all

<div class="gk-wide-image" data-sr="enter bottom and move 200px and scale up 20% over 1s">
<div id="attachment_24" style="width: 1908px" class="wp-caption aligncenter"><img src="https://demo.gavick.com/wordpress/photo/wp-content/uploads/2014/11/wide-blog-image.jpg" alt="Wide blog image" width="1898" height="641" class="size-full wp-image-24" /><p class="wp-caption-text">Photography &#038; Project by Innebo.com</p></div>
</div>


the WordPress editor automatically should add:

Code: Select all

<div id="attachment_24" style="width: 1908px" class="wp-caption aligncenter"><img src="https://demo.gavick.com/wordpress/photo/wp-content/uploads/2014/11/wide-blog-image.jpg" alt="Wide blog image" width="1898" height="641" class="size-full wp-image-24" /><p class="wp-caption-text">Photography &#038; Project by Innebo.com</p></div>

so you should wrap it only into:

Code: Select all

<div class="gk-wide-image" data-sr="enter bottom and move 200px and scale up 20% over 1s">
...
</div>

But shouldn't a container be applied by default to images if the scroll reveal setting is checked in customization?

using of the scroll reveal animations is optional - that's why you have to add the data-sr attribute to the elements which you want to animate. We won't add the container, because some people may want to use scroll reveal in other places excepting posts.