Bodymovin & Revolution Slider

Resolved nina3123
(@nina3123)

4 years, 6 months ago
Hi there,

We have exported an animation created in After Effects using the Bodymovin plugin. We want to add it as a layer in «Revolution Slider» in WordPress. There is an older thread with the same question but it is already closed and the answer does not help (we know we have to work with shortcode but somehow we can’t make it work). We have tried 2 ways:

1. Adding it to the custum CSS in the module “general options” of the Revolution Slider:
The animation is displayed in the preview window but does not show up on the actual site. And it is placed below and not on top of the first layer.

2. Adding it with the Bodymovin plugin shortcode:
The shortcode does not work at all in the Revolution Slider. It only works on a normal wordpress page if we add a new text block below the Revolution Slider, however again it is only displayed below the Revolution Slider instead of on top of it.

Is anyone familiar with this issue?
Many thanks in advance for your help.
- This topic was modified 4 years, 6 months ago by nina3123.

Viewing 8 replies - 1 through 8 (of 8 total)

Thread Starter nina3123
(@nina3123)

4 years, 6 months ago

We’ve found a solution not using revolution slider at all.

studioluminous
(@studioluminous)

4 years, 6 months ago

What was your solution?

Thread Starter nina3123
(@nina3123)

4 years, 6 months ago

We didn’t use the revolution slider after all but applied the bodymovin shortcode directly to an image that we simply had uploaded to the media library. It works perfectly now.

johanpmuniz
(@johanpmuniz)

4 years, 6 months ago

How??

Thread Starter nina3123
(@nina3123)

4 years, 6 months ago

Whats your exact question?

1. We exported the bodymovin animation without the background image.
2. In WordPress we installed the bodymovin plugin to create a shortcode of the animation.
3. We posted the shortcode to the “raw html” field in wp bakery page builder
4. We added our animation background image by chosing it as a background image in the “raw html” field settings.

ovanova
(@ovanova)

4 years, 5 months ago

@nina3123 @johanpmuniz

Im interested in inserting a bodymovin animation in revolution slider also. Could you guys put a link to see how it worked for you.

Thank you so much.
ahillstead2
(@ahillstead2)

4 years, 4 months ago
SOLVED – you just need to set the width and height of the shortcode text element in Slider Revolution. If you leave it on auto then Bodymovin will automatically set the element to 0x0 width and height.

See mohasky.co.nz for example
- This reply was modified 4 years, 4 months ago by ahillstead2.
ovanova
(@ovanova)

4 years, 3 months ago
@ahillstead2

Hi there. Thank you for your reply. Would you be a little more specific as where exactly do I need to add the width and height?

I added it everywhere and the animation does not start unless you start scrolling.

[bodymovin anim_id=”135″ loop=”true” lazyload=”true” autoplay_viewport=”true” autostop_viewport=”true” width=”150″ height=”150″ align=”center”]

and also I set the w and h of the text element containing thise shortcode… the same 150 and 150…

Thank you for your reply.

PS: Nevermind. I figured it out what was wrong. I had the Enabled Timeline Scroll activate :))

Now it works perfect. Thank you!

BTW – kick ass website your website https://mohasky.co.nz/ 🙂
- This reply was modified 4 years, 3 months ago by ovanova.
- This reply was modified 4 years, 3 months ago by ovanova.