Bodymovin & Revolution Slider

  • Resolved nina3123

    (@nina3123)


    5 years, 1 month 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 5 years, 1 month ago by nina3123.
Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter nina3123

    (@nina3123)

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

    What was your solution?

    Thread Starter nina3123

    (@nina3123)

    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.

    How??

    Thread Starter nina3123

    (@nina3123)

    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)

    @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.

    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, 11 months ago by ahillstead2.

    @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, 10 months ago by ovanova.
    • This reply was modified 4 years, 10 months ago by ovanova.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Bodymovin & Revolution Slider’ is closed to new replies.