I would like to auto slide/ease a div from outside the viewport (top) to to a certain position (top: 200px). I was reading the documentation about the animate() Plugin, but can’t translate it back to what I want. Any ideas on this are more than welcome.
Thank you in advance

This demo should help you get started.

On page load, it moves a 200 x 200 green div from just off the top of the window to 100px below the top of the window.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<style type="text/css">
body {
      position: relative
#myDiv {
    width: 200px;
    height: 200px;
    background-color: green;
    position: absolute;
    left: 300px
<script type="text/javascript">
var currPos = -230;
var step = 10;
var finalTop = 100;
function moveDiv() {
    currPos += step;
    if(currPos <= finalTop) { = currPos + 'px';
window.onload=function() {
    divO = document.getElementById('myDiv');
<div id="myDiv"></div>

Hi Kalon. Thanks for the response. It is a start indeed and I thank you for that :slight_smile: Do you know of any jQuery plugin like easing or slide, where the movement Is just a bit more fluent? I only found examples where the movement is triggered by a click or hover event

To be honest, I don’t use JQuery but I would imagine there is a function for sliding elements in there somewhere.

You can play with the step value and the setTimeout interval in the demo code I posted to get a smoother animation.

If you change the value of step to 2 and the time interval in setTimeout to 10, you will get a much smoother animation.