<div id="app">
   <div ref="box" class="box"></div>
</div>
.box { 
  height: 60px; 
  width: 60px; 
  background: red; 
}


body {
  background: #1a1a1a;
}
new Vue({
  el: '#app',
  mounted() { 
    const box = this.$refs.box
    const timeline = new TimelineLite()
    
    timeline.to(box, 1, {
      x: 200,
      rotation: 90,
      ease: Back.easeInOut, // Specify an ease
    })
    timeline.to(box, 0.5, {
      background: 'green'
    },
    '-=0.5' // Run the animation 0.5s early
    ) 
   }
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenLite.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineLite.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/easing/EasePack.min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/CSSPlugin.min.js