How to recreate the custom 'About' animations

After trying to move arounds with the 'About - Meet our talented...' module, the animation and layout of the module disappeared. Leaving me with the images and text in what mostly looks like a single column, without the social buttons appearing on hoover, or the effect when scrolling down.

I've been trying to recreate it, but it seems I am not profficient enough to do so.

Can anyone help me figure this out?

Thank you so much.

This is common problem - our custom modules requires custom html structure which is being damaged by tinyMCE editor.
1. Go to global configuration and change editor to no-editor
2. Go back to module and paste this referrence code:

Code: Select all

<div class="gkTeam col4 animate_queue">
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro"  class="animate_queue_element">
      <img src="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="images/demo/about/2.jpg" border="0" alt="Julia Morena" />
      <figcaption>
         <h3>Julia Morena</h3>
         <small>Creative Director</small> </figcaption>
   </figure>
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="images/demo/about/3.jpg" border="0" alt="Eddy Doe" />
      <figcaption>
         <h3>Eddy Doe</h3>
         <small>Customer Support</small> </figcaption>
   </figure>
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" class="animate_queue_element">
      <img src="images/demo/about/4.jpg" border="0" alt="Robert Frost" />
      <figcaption>
         <h3>Robert Frost</h3>
         <small>Web Designer</small> </figcaption>
   </figure>
</div>
<p style="text-align: center;"><a class="border bigbutton" href="#">Learn More</a></p>


Now always edite modules with tinyMCE disabled.

I see... Well thank you very much.

A side question, if I may... Is it only tinyMCE editor that damages the structure?

Not only. In fact any wysiwyg might change html structure. It depends on editor configuration.
Its always safe to edit modules with no-editor.

duly noted.
Well, thank you again, and also thank you for the fast replies.

No problem. We are here to help .
If You will have any other questions, feel free to create new forum threads.