<div class="circle"></div>

<div class="square"></div>
.circle{
  background-color: blue;
  height:5em;
  width: 5em;
  border-radius: 100%;
}
.square{
  background-color: red;
  height:5em;
  width: 5em;
}
new Vue({
  el: '#app',
  data() {
    return {
      
    }
  },
  mounted: function(){
    gsap.fromTo('.circle',{opacity:0 }, {opacity: 1 , x: 500 , duration: 2 });
    gsap.fromTo('.square', {opacity:0, x:500}, { opacity:1, x: 1 , duration: 2 });
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js
  2. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js