Streaming live at 10am (PST)

Image animation convert to wordpress


#1

Hi everyone
I try to turn my static page to a WordPress theme, I have one image element come with animation, I try to use couple ways, but my image won’t load on scroll (move up), so I was wondering anyone has any solution? Big thanks!

Here’s my HTML element:

<div>
img src="images/pexels-photo-386151.jpeg" data-w-id="f56f7b61-5a1c-8912-469a-280339605312" style="-webkit-transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);-moz-transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);-ms-transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0)"
class="image-3">
</div>

I turn them to WordPress theme using

<?php the_post_thumbnail('medium',array(
        'class' =>'image-3',
        'data-w-id' => 'c970815c-c99b-0b5b-602f-1df1d50b885dl',
        'style' => '-webkit-transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);
        -moz-transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);
        -ms-transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);
        transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0)'
      ));?>

I try to just use class ‘image-3’ on my CSS, but the animation still not working.

Thank you guys for the help!


#2

Welcome to the Webflow forum!

Could you please edit your post Screenshot_2017-08-16_140811 and provide ALL the necessary details in your post so we can take a look at your site/issue?

If you want faster replies and more accurate answers, it is recommended that you put in a bit more effort to include all the details listed in this link, so that forum members don’t have to waste time following up with you to request more information.

Hope to hear from you soon. Thanks!