Vue & GSAP

In this example below you will see how to do a Vue & GSAP with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Sixl, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Sixl ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Vue & GSAP</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app" class="container">
  <div class="row first">

    <p>
      <button 
        class="btn btn btn-primary" 
        @click="load=!load">Load / Remove element</button>
    </p>

    <transition 
      @before-enter="beforeEnter" 
      @enter="enter" 
      @after-enter="afterEnter" 
      @enter-cancelled="enterCancelled" 
      @before-leave="beforeLeave" 
      @leave="leave" 
      @after-leave="afterLeave" 
      @leave-cancelled="leaveCancelled" 
      :css="false">
        <div v-if="load" class="thing"></div>
    </transition>

  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Sixl/vue-andamp-gsap-RLZpOZ */
.row.first {
  margin: 5rem -15px;
}

.thing {
  width: 150px;
  height: 150px;
  border-radius: 3px;
  position: relative;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.75);
  background: linear-gradient(135deg, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
}


/*Downloaded from https://www.codeseek.co/Sixl/vue-andamp-gsap-RLZpOZ */
console.clear();


var vue = new Vue({
  el: "#app",
  data: {
    load: true
  },
  methods: {
    // --------
    // ENTERING
    // --------
    beforeEnter: function(el) {
      // ...
    },
    enter: function(el, done) {
      // ...
      console.log("Enter");
      TweenMax.fromTo(
        el,
        1,
        {
          x: 200,
          autoAlpha: 0,
          scale: 1.3,
        },
        {
          x: 0,
          autoAlpha: 1,
          scale: 1,
          ease: Power4.easeOut,
          onComplete: done
        }
      );
      done();
    },
    afterEnter: function(el) {
      // ...
    },
    enterCancelled: function(el) {
      // ...
    },
    // --------
    // LEAVING
    // --------
    beforeLeave: function(el) {
      // ...
    },
    leave: function(el, done) {
      // ...
      console.log("Leave");
      TweenMax.to(el, 0.5, {
        x: 150,
        autoAlpha:0,
        scale:0.5,
        onComplete:done
      });
    },
    afterLeave: function(el) {
      // ...
    },
    // leaveCancelled only available with v-show
    leaveCancelled: function(el) {
      // ...
    }
  }
});

Comments