How to make animation smooth

Question

I have a created a animated logo that can be view on load only, what I am trying achieve is smoothness, there must be some way to make it more smooth, but not sure how to, here is my code in JSFiddle

Please help!

HTML code

<div class="logo-onload">
  <div class="logo-shape1"></div>
  <div class="logo-shape2"></div>
  <div class="logo-shape3"></div>
  <div class="logo-shape4"></div>
</div>

CSS Code

.logo-onload{position:absolute; width:100%; height:100%; left:0; top:0; bottom:0;}
.logo-shape1{position:absolute; left:0; top:0; background:url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}
.logo-shape2{position:absolute; right:0; top:0; background:url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}
.logo-shape3{position:absolute; left:0; bottom:0; background:url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}
.logo-shape4{position:absolute; right:0; bottom:0; background:url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}

and JS code is

$('.logo-shape1').animate({'left': '50%','margin-left': '-100px','margin-top': '-100px','top': '50%'},1500, 'linear').show();
$('.logo-shape2').animate({'right': '50%','margin-right': '-100px','margin-top': '-100px','top': '50%'},1500, 'linear').show();
$('.logo-shape3').animate({'left': '50%','margin-left': '-100px','margin-bottom': '-100px','bottom': '50%'},1500, 'linear').show();
$('.logo-shape4').animate({'right': '50%','margin-right': '-100px','margin-bottom': '-100px','bottom': '50%'},1500, 'linear').show();

Answer 1

Or just CSS3 and a bit of jQuery to know when you want to init the animation:

---

Demo:

https://jsfiddle.net/4uo2njfh/

---

CSS:

.logo-onload{
  position:absolute; 
  width:100%; 
  height:100%; 
  left:0; 
  top:0; 
  bottom:0;
  &.is-loaded {
    .logo-shape {
      &--1 {
        transform:translate(calc(50vw - 100px), calc(50vh - 100px));
      }
      &--2 {
        transform:translate(calc(-50vw + 100px), calc(50vh - 100px));
      }
      &--3 {
        transform:translate(calc(-50vw + 100px), calc(-50vh + 100px));
      }
      &--4 {
        transform:translate(calc(50vw - 100px), calc(-50vh + 100px));
      }
    }
  }
}
.logo-shape{
  position:absolute; 
  width:200px; 
  height:200px; 
  transition:transform 1s ease;
  &--1  {
    background:url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png) no-repeat; 
    background-size:contain;
    left:0;
    top:0;
  }
  &--2 {
    background:url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png) no-repeat; 
    background-size:contain;
    right:0;
    top:0;
  }
  &--3 {
    background:url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png) no-repeat; 
    background-size:contain;
    bottom:0;
    right:0;
  }
  &--4 {
    background:url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png) no-repeat; 
    background-size:contain;
    bottom:0;
    left:0;
  }
}

---

JS:

$(function(){
  setTimeout(function(){
    $('.logo-onload').addClass('is-loaded');
  }, 1000);
})

---

HTML:

<div class="logo-onload">
  <div class="logo-shape logo-shape--1"></div>
  <div class="logo-shape logo-shape--2"></div>
  <div class="logo-shape logo-shape--3"></div>
  <div class="logo-shape logo-shape--4"></div>
</div>

Answer 2

Did you use swing instead of linear. Check this fiddle.

JS

$('.logo-shape1').animate({'left': '50%','margin-left': '-100px','margin-top': '-100px','top': '50%'},1500, 'swing').show(); $('.logo-shape2').animate({'right': '50%','margin-right': '-100px','margin-top': '-100px','top': '50%'},1500, 'swing').show(); $('.logo-shape3').animate({'left': '50%','margin-left': '-100px','margin-bottom': '-100px','bottom': '50%'},1500, 'swing').show(); $('.logo-shape4').animate({'right': '50%','margin-right': '-100px','margin-bottom': '-100px','bottom': '50%'},1500, 'swing').show();

Answer 3

$('.logo-shape1').animate({'left': '50%','margin-left': '-100px','margin-top': '-100px','top': '50%'},1500, 'linear').show();
$('.logo-shape2').animate({'right': '50%','margin-right': '-100px','margin-top': '-100px','top': '50%'},1500, 'linear').show();
$('.logo-shape3').animate({'left': '50%','margin-left': '-100px','margin-bottom': '-100px','bottom': '50%'},1500, 'linear').show();
$('.logo-shape4').animate({'right': '50%','margin-right': '-100px','margin-bottom': '-100px','bottom': '50%'},1500, 'linear').show();

.logo-onload{position:absolute; width:100%; height:100%; left:0; top:0; bottom:0;}
	.logo-shape1{position:absolute; left:0; top:0; background:url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}
	.logo-shape2{position:absolute; right:0; top:0; background:url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}
	.logo-shape3{position:absolute; left:0; bottom:0; background:url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}
	.logo-shape4{position:absolute; right:0; bottom:0; background:url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}


* {
  -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-onload">
<div class="logo-shape1"></div>
<div class="logo-shape2"></div>
<div class="logo-shape3"></div>
<div class="logo-shape4"></div>
</div>

;-)