Make div fly with animation to another DOM position

Question

I am moving an <img> element (the octopus) from the large gray <div> above (#large) to the small orange <div> below (#small) using

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

This works great but I want it to transition smoothly and to 'fly' over so it will slowly interpolate its coordinates and size.

I tried adding a CSS transition

img { transition: all 3s; }

to my <img>, but that won't work as the image is readded to the DOM and not moved.

How can such animation be established?

JS Fiddle

Answer 1

You need to compute the current dimensions of the image, the target dimensions, and calculate the needed transform.

To make it easier, I will calculate the transform needed to make the new element (the cloned one) look like it is still at the current position.

Later, a standard animation (that just resets scale and position) will do the trick.

I avoided using jQuery so the solution is easier to port

function func (target) {
    var image = document.getElementById('image');
    var current = image.parentNode;
    var rectImage = current.getBoundingClientRect();
    var rectTarget = target.getBoundingClientRect();
    evalRect (rectImage);
    evalRect (rectTarget);

    var scaleX = rectImage.width / rectTarget.width;
    var scaleY = rectImage.height / rectTarget.height;
    var translateX = rectImage.centerX - rectTarget.centerX;
    var translateY = rectImage.centerY - rectTarget.centerY;

    var dup = image.cloneNode();
    var scale = 'scale(' + scaleX + ', ' + scaleY + ') '; 
    var translate = 'translate(' + translateX + 'px, ' + translateY + 'px) ';
    target.appendChild(dup);
    dup.style.transform = translate + scale;
    current.removeChild(image);
}

function evalRect (rect) {
    rect.centerX = rect.left + rect.width * 0.5;
    rect.centerY = rect.top + rect.height * 0.5;
}

.container {
  border: solid 1px black;
  position: relative;
  display: inline-block;
}

#container1 {
  width: 200px;
  height: 100px;
}

#container2 {
  width: 400px;
  height: 200px;
}

#container3 {
  width: 200px;
  height: 200px;
}

#image {
  background: linear-gradient(45deg, yellow, tomato);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  animation: adjust 1s forwards;
}

@keyframes adjust {
  to {transform: translate(0px, 0px);}
}

<div id="container1" class="container" onclick="func(this)">click me
    <div id="image"></div>
</div>
<div id="container2" class="container" onclick="func(this)">click me</div>
<div id="container3" class="container" onclick="func(this)">click me</div>

Answer 2

appendto do not accept animations, but this question maybe helpful for you

appendTo() animation

Answer 3

i made a responsive solution ( so i think ) using JQ . check it out below or in jsFiddle

first i cached all the necessary selectors for cleaner and concise code .

the -20 is because of the div { margin-top:20px}` there i calculated the TOP offset of both divs in relation to the document, then got the width and height of the small div

in the click function first i got the image's top offset so i could compare that with the #small's offset .

so if the image's distance to top is smaller than the #small's distance to top, it means that the img is in the #large div and so i move it using transform:translate giving it an Y-axis value equal to the TOP offset of the #small Div, so the img offset.top ( iOffset ) will become equal to the #small offset.top ( sOffset )

also adding width and height of the #small div to the image

else ( if iOffset is = or bigger than sOffset ) then it means that the image is not in the large div, so i need to translate it back to the offset of the #large div and add width:100% and height:100%

hope i got it right and explained correctly. let me know if it helps

var Large = $("#large"),
  Small = $("#small"),
  lOffset = $(Large).offset().top - 20 + 'px',
  sOffset = $(Small).offset().top - 20 + 'px',
  sWidth = $(Small).width(),
  sHeight = $(Small).height()

$(document).on("click", "img", function() {
  var iOffset = $(this).offset().top + 'px'
  if (iOffset < sOffset) {
    $(this).css('transform', 'translate(0,' + sOffset + ')')
      .width(sWidth).height(sHeight)
  } else {
    $(this).css('transform', 'translate(0,' + lOffset + ')')
      .width("100%").height("100%")
  }
})

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: 5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="large">
  <img src="https://ak.picdn.net/assets/cms/5bb580387901a83212e3028ab5a2fa8fb1153d7b-img_offset_2x.jpg" />
</div>
<div id="small">
</div>

Answer 4

Just add a transition and change the size and position to match the target. On the transitionend event, append the image to the target element.

// when transition completes
$('img').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  // place in container
  $('#target').append($('img'));
  // set to corner of container
  $('img').css({
    top: '0',
    left: '0'
  });
});

// position in corner of target and make size the same
$('img').css({
	position: 'absolute',
  top: $('#target').offset().top + 'px',
  left: $('#target').offset().left + 'px',
  height: $('#target').css('height'),
  width: $('#target').css('width')
});

#target {
  height: 150px;
  width: 150px;
  border: 1px solid grey;
  position: absolute;
  top: 350px;
  left: 5px;
  z-index: 1;
}

img {
  position: absolute;
  top: 0;
  left: 5px;
  transition: all 1s;
  height: 300px;
  width: 300px;
  z-index: 5;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97300&w=300&h=300" />
<div id="target">
</div>

Answer 5

Using the jQuery .append method won't allow you to animate the element between the 2 states.

Here is an example with an animation using CSS transition and the scale() function. This example also uses the transform-origin property to change the position the of the image on the "big" state. Fiddle here.

$(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 that :

• you will need to add vendor prefixes to the transition, transform and transform-origin properties depending on the browsers you need to support.
• this technique relies on the fact you are using hard values (in pixels). It would be possible to make this responsive (using percent values for widths, margins and paddings) but it will need more calculations.