Animate a div to gracefully soar to a new position within the DOM

Question

Animate a div to gracefully soar to a new position within the DOM

https://i.sstatic.net/SQDeE.png

I need to relocate an image (which is an octopus) from a large gray container (#large) to a small orange box (#small) below it using the following jQuery code:

$(document).on("click", "#large > img", function() {
  $(this).appendTo("#small");
});

The current functionality works perfectly, but I want to enhance it by adding a smooth transition effect to make the octopus 'fly' over smoothly with gradually changing size and position.

I attempted to include a CSS transition property like this:

img { transition: all 3s; }

However, this method doesn't work because the image is actually reinserted into the DOM instead of simply being moved. Can anyone suggest how to achieve such an animation effect?

Link to JS Fiddle for reference

javascript jquery css animation

Answer 1

Answer №1

Using the jQuery .append method does not have the capability to animate the element between two different states.

Instead, you can create an animation using CSS transition and the scale() function. To see an example of this in action, check out this demo on JSFiddle.

$(document).on("click", "img", function() {
  $(this).toggleClass("big");
});

div {
  margin: 20px;
  padding: 10px;
}

#large {
  width: 600px;
  height: 400px;
  background-color: gray;
}

#small {
  width: 120px;
  height: 90px;
  background-color: orange;
}

img {
  width: 100%;
  height: 100%;
  transition: transform .3s ease-out;
  transform-origin: 0 129px;
}

img.big {
  transform: scaleX(5) scaleY(4.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="large">

</div>
<div id="small">
  <img src="https://ak.picdn.net/assets/cms/5bb580387901a83212e3028ab5a2fa8fb1153d7b-img_offset_2x.jpg" />
</div>

Note:

If you want to support multiple browsers, remember to add vendor prefixes for the transition, transform, and transform-origin properties.
This technique uses hard-coded pixel values. While it is possible to make it responsive by using percentage values, it would require more complex calculations.

Answer 2

Using the jQuery .append method does not have the capability to animate the element between two different states.

Instead, you can create an animation using CSS transition and the scale() function. To see an example of this in action, check out this demo on JSFiddle.

$(document).on("click", "img", function() {
  $(this).toggleClass("big");
});

div {
  margin: 20px;
  padding: 10px;
}

#large {
  width: 600px;
  height: 400px;
  background-color: gray;
}

#small {
  width: 120px;
  height: 90px;
  background-color: orange;
}

img {
  width: 100%;
  height: 100%;
  transition: transform .3s ease-out;
  transform-origin: 0 129px;
}

img.big {
  transform: scaleX(5) scaleY(4.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="large">

</div>
<div id="small">
  <img src="https://ak.picdn.net/assets/cms/5bb580387901a83212e3028ab5a2fa8fb1153d7b-img_offset_2x.jpg" />
</div>

Note:

If you want to support multiple browsers, remember to add vendor prefixes for the transition, transform, and transform-origin properties.
This technique uses hard-coded pixel values. While it is possible to make it responsive by using percentage values, it would require more complex calculations.

Answer 3

Answer №2

After much deliberation, I have crafted a responsive solution (I believe) using JQuery. Feel free to explore the code below or check it out live on jsFiddle.

To keep things tidy and clear, I started by caching all the essential selectors.

The value of -20 is due to the div having a margin-top of 20px. My calculations involved determining the top offset of both divs in relation to the document, as well as capturing the width and height of the smaller div.

In the click function, my first step was to fetch the image's top offset so that I could compare it with the small div's offset.

If the image's distance from the top is less than the small div's distance from the top, it indicates that the image resides within the large div. In this case, I translated the image using transform:translate, setting its Y-axis value equal to the top offset of the small div, aligning the image with the same top position as the small div.

I also adjusted the width and height of the image to match those of the small div.

On the other hand, if the image's top offset is equal to or greater than that of the small div, it implies that the image is not in the large div. Consequently, I returned the image to the top offset of the large div and set its width and height to 100%.

I sincerely hope that my interpretation and explanation are accurate. Please don't hesitate to reach out if you find this helpful.

Answer 4