VUE & Gsap - how do i put my already working timeline tween on a separated file?

[vlbn 13 Likes (Newbie)]

hello there beautiful people!

 

first of all, this marvelous timeline is working as intended, the problem: "it's going to get huge" as i add more elements and i dont want to polute my Home.vue view with a long long non readable timeline... I WANT to move this code to a separated file. how do i do that? 

 

i know i have to create a separate file and put it somewhere like ../tweens/home.js and then import it on my view import { twnHome } from '../tweens/home'

 

 

i did try this but it did not work.. im pretty sure i was close..

if this is kind of right... how do i access the TL controls (play, reverse..) ?

 

 

THANKS A LOT for your time. i hope this makes sense!

Edited June 19, 2020 by dnvdk
forgot to put tags

[ZachSaucier 7,132 Likes (Superhero)]

Hey dvndk. I'm not good with Vue, but shouldn't you just export twnHome, not { twnHome }? That's what this StackOverflow post does.

[vlbn 13 Likes (Newbie)]

2 hours ago, ZachSaucier said:

Hey dvndk. I'm not good with Vue, but shouldn't you just export twnHome, not { twnHome }? That's what this StackOverflow post does.

 

i did this and it did work as expected but thats because it is not about a timeline like on the previous post... i mean, i tryed to solve my first problem with the same approach used on the example below but honestly i have no idea how to control the timeline from outside... im super lost..  

 

 

[OSUblake 18,475 Likes (Superhero)]

You can use a mixin.

https://vuejs.org/v2/guide/mixins.html

[OSUblake 18,475 Likes (Superhero)]

And you don't need to import the css plugin. 

https://greensock.com/docs/v3/Installation?checked=core

 

[vlbn 13 Likes (Newbie)]

10 hours ago, OSUblake said:

You can use a mixin.

https://vuejs.org/v2/guide/mixins.html

THIS IS AWESOME!

now my Home.vue looks like this:

 

<template>
  <div class="home">

    <div class="px-3 py-3 is-fixed-1" v-if="isSignedIn">
      <figure
        class="image is-48x48"
        @mouseenter="cursorEnter"
        @mouseleave="cursorLeave"
      >
        <router-link to="/control">
          <img class="is-rounded" :src="user.photo" />
        </router-link>
      </figure>
    </div>

    <section class="fill-viewport-1">
      <div id="separador" class="separador-1"></div>
      <div
        id="nombre"
        class="nombre"
        @mouseenter="cursorEnter"
        @mouseleave="cursorLeave"
      >
        <router-link to="/oops">
          <img src="@/assets/images/nombre.svg" alt="🖼️" />
        </router-link>
      </div>
    </section>

    <div id="cursorFollow" class="cursor-follow" ref="cursorFollow"></div>
    <div id="cursor" class="cursor" ref="cursor"></div>

  </div>
</template>

<script>
import { mapState } from "vuex";
import { cursorTweens } from "../mixins/cursorTweens";
import { homeTweens } from "../mixins/homeTweens";

export default {
  mixins: [cursorTweens, homeTweens],
  name: "Home",
  computed: {
    ...mapState("auth", ["user", "isSignedIn"], "pagesTweensState", ["homeTweens"]),
  },
};
</script>

 

and my cursorTweens.js like this:

 

import { gsap } from "gsap";

export const cursorTweens = {
  data() {
    return {
      cursorTl: new gsap.timeline({
        paused: true,
      }),
    };
  },
  mounted: function() {
    this.cursorTl
      .to(this.$refs.cursor, 0.1, {
        scale: 0,
      })
      .to(this.$refs.cursorFollow, 0.1, {
        scale: 3,
      });
  },
  created: function() {
    window.addEventListener("mousemove", this.cursorAttach);
  },
  destroyed: function() {
    window.removeEventListener("mousemove", this.cursorAttach);
  },
  methods: {
    cursorAttach(e) {
      gsap.to(".cursor", 0.5, {
        x: e.clientX,
        y: e.clientY,
      });
      gsap.to(".cursor-follow", 0.9, {
        x: e.clientX,
        y: e.clientY,
      });
    },
    cursorEnter() {
      this.cursorTl.play();
    },
    cursorLeave() {
      this.cursorTl.reverse();
    },
  },
};

 

i did not add homeTweens.js (here on the post) because isn't finished yet, it only has a console.log()

NOW everything works like intended. thank you so much guys!