Text starting position Left, Center and Right

Question

When I'm loading this animation, the text is starting from Left side of the HTML page.

But I need it like the below

1. "Hello" Should start from little outside of Left Top corner side of the html page
2. "Your" should start from little outside Middle Top (center top) of the page
3. "World" should start from little outside Right Top Corner of the page

(I have edited the above for better clarity and understanding)

All together, should come to the center zooming in. And all of them have to return zooming out to the left side of the page.

JSFiddle

$('#hello').animate({
      zoom: '150%',
      left: window.innerWidth / 1
}, 3000, function() {
    // 4. Pause for 3 seconds
    $(this).delay(3000)
    // 6. zooms out to 200% heading towards left top corner,
    // (logo position) 
    // 7. Fades out when reaching the logo 8. Logo appears
    .animate({
        zoom: '40%',
        left:0
    }, 3000, function() {
        $(this).find('span').fadeOut()
    })
});

h1 {
    font-size: 1em;
    zoom: 200%;
    transition: zoom 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="hello">
<h1>&nbsp;H<span>ello</span>&nbsp;Y<span>our</span>&nbsp;W<span>orld</span></h1>

Answer 1

since the animation you need is quite complex (slide in and zoom from different sides), perhaps create a custom one?

in the example below i utilize 2D transforms and the animation's step attribute. i put 2 long <span> in between the words to push them to the sides.

click on the red box to start the animation. if you have any questions, feel free to ask.

ps: i left borders on the elements so you can see how they move

$(function() {
  FixMargins();

  $(".container").click(function() {
    var phWidth = $(".placeholder").width();
    var height = $(".container").height();
    containerHeight = $(".theText").height();
    var newTopMargin = (height - containerHeight) / 2;
    
    $(".theText").animate({
      transform: 2
    }, {
      step: function(now, fx) {
        var newscale = 1 + +now;
       $(this).css({
         'transform': "scale(" + newscale + "," + newscale + ")",
                   "opacity":-1 + now
                   });
        $(this).css("margin-top",-150 + (newTopMargin+150) / 2 * now);
        $(".placeholder").css({
          "width": phWidth - phWidth * now/2
        });
        FixMargins();
      },
      duration: 700
    }).promise().done(function() {
      $(this).delay(500);
      var textTop = $(".theText").css("margin-top").split('p')[0];
      var textLeft = $(".theText").css("margin-left").split('p')[0];
      $(this).animate({
        transform: 2
      }, {
        step: function(now, fx) {
          console.log(textLeft - textLeft * now);
          var newscale = 3 - +now;
          $(this).css('transform', "scale(" + newscale + "," + newscale + ")");

          $(".theText").css("marginLeft", textLeft - textLeft / 2 * now);
          $(".theText").css("marginTop", textTop - textTop / 2 * now);
        },
        duration: 500
      }).promise().done(function() {
       
        $(this).find('span').css({
          "position":"absolute"
        }).animate({
          "width":0,
          "opacity":0
        });
      });
    });


  });
});

function FixMargins() {

  width = $(".container").width();
  containerWidth = $(".theText").width();
  leftMargin = (width - containerWidth) / 2;
  $(".theText").css("marginLeft", leftMargin);

}

.container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border:1px solid red;
}
.theText {
  position: absolute;
  margin-top:-150px;
  opacity:0;
}
.placeholder {

  width: 200px;
  display: inline-block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <span class="theText">
        H<span>ello</span>
  <span class="placeholder"></span>
  Y<span>our</span>
  <span class="placeholder"></span>
  W<span>orld</span>
  </span>
</div>

Answer 2

I edit your code's. But in this codes you havent class zoom and other classes. this code work is based on font size.

** Html **

<div id="hello">
    <h1>H <span>ello</span></h1>
    <h1>Y <span>our</span></h1>
    <h1>W <span>orld</span></h1>
</div>

** Css **

#hello h1 {
    width: 33%;
    font-size: 1em;
    text-align: center;
    display: inline-block;
}

** Edited > Css **

#hello{
    -webkit-animation: myfirst linear 12s; /* Chrome, Safari, Opera */
    animation: myfirst linear 12s;
}

@-webkit-keyframes myfirst {
    0%   {padding:0}
    10%  {padding: 40vh 0}
    50%  {padding: 40vh 0}
    85%  {padding: 40vh 0}
    100% {padding: 0}
}

@keyframes myfirst {
    0%   {padding:0}
    10%  {padding: 40vh 0}
    50%  {padding: 40vh 0}
    85%  {padding: 40vh 0}
    100% {padding: 0}
}

** Jquery **

window.onload = function() {

    var h1 = $('#hello h1');
    h1.animate({fontSize: '5em'}, 5000,

        function () {
            h1.delay(3000);

            h1.animate({'font-size': '1em'}, 2000,
                function () {
                    h1.children('span').fadeOut(1000);
                }
            );

        }
    );
};