Hi
I am sure this question has been asked before but searching the web and this forum I am still not sure of the answer. Its day 2 now . . lol
I have the code to imbed the animations here . .
1)
<div class="9promopanels">
<div class="embed-container">
<iframe src="http://myURLhere.co.uk/wp-content/dynamiccontent/promo%20box%202/9%20p romo%20box.html" frameborder="0"></iframe>
</div>
</div>
And the (responsive)CSS:
.9promopanels {
width: 100%;
margin: 0px auto;
}
.embed-container {
height: auto;
width: 100%;
padding-bottom: 100%;
overflow: hidden;
position: relative;
}
.embed-container iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
Then for the next one I have again the same code, just different settings on the padding-bottom: 30% to set the height relative to the aspect ratio (as a percentage).
Now then. Heres the tricky part! I need to get the two animations to run on the same page in the main content, just one further down the page. As it stands now there is a conflict on page, but I am not that great at Js!
I am not the cleverest one out there, but am ok so I would appreciate a fairly simple explaination!! 
Thanks for the help!