CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
ZWis212
ZWis212

Reputation: 132

Animate div from middle of div to bottom right of screen into a fixed position

What I am trying to figure out is how to animate a div that will start out in the middle of a div that is in the middle of a page. The div originally should not have a position: absolute. Unless it is not possible, I would like it not to start with that because it seems very tough to have any data below it. It's not going to be that big of a box. I am guessing anywhere between the height of 100px and 600px, with a width between 400px and 800px.

I originally found this JsFiddle Example that does a great job and almost exactly what I need. But the div starts with an absolute position and it is already located at the bottom right of the page to be animated.

Once the div is at the bottom right of the page, it needs to be fixed there so that I can scroll up and down the page without it moving. At this point I am not worried about being able to push it back up to the spot in which it came.

A couple things I tried: Lining it up in the position I desired, and then on the click of a button, add a class with the attribute position: absolute and calling the animate function like this: 

chatWindow.stop().animate({
         bottom: 0
       , right: 0
    }, 2000);

But my guess is that it originally needs to the the position set as in top: 0; left: 0 and that's why it won't work.

I already have it working without any animation and would love to be able to figure out how to animate this thing. Without animation, it's as simple as toggling a class with it's normal positions attributes with one that has a position: fixed; bottom: 0; right: 0.

Here is a Codepen Example that I created to show really what I need other than right animation part not being there. Any help would be awesome as I've been toying with this for quite some time now.

Upvotes: 1

Views: 1832

Answers (2)

Max Starkenburg
Max Starkenburg

Reputation: 1539

One possibility, still using absolute positioning, based on what's going on in your codepen example, would be to fake the current positioning by adding the following CSS:

.container {
  padding-top: 250px;
}
.center-window {
  position: absolute;
  right: 50%;
  margin-right: -200px; /* i.e. half of its width */
  bottom: 100%;
  margin-bottom: -250px; /* i.e. its height */
}

Then you could animate the right, bottom, and margin properties accordingly. See https://codepen.io/anon/pen/RaOJYY (though it doesn't currently do anything with the padding). Of course, if your not sure of the dimensions of .center-window, perhaps this solution won't quite work.

Upvotes: 0

Nutshell
Nutshell

Reputation: 8537

If you want an animation from left to right, you will have to play with left and top values. But the negative point is that will cause a weird animation because you want to keep a relative position of the box in the beginning. So when you will do the animation, it will start from the very top left on the window, which is not good.

Like this

To avoid that, you will have to use absolute position in the beginning state. You said in your question you doesn't want it but I think it is required to get the wanted visual effect.

See here the live example with good effect

However, to keep a pretty nice animation, but I know it is not what you want, you can play with right and bottom values. It will make the box appears from the right and bottom corners of the window.

Like this

Upvotes: 1

Related Questions