Jump to content


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

Recommended Posts

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 by dnvdk
forgot to put tags
Link to comment
Share on other sites

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..  





Link to comment
Share on other sites

10 hours ago, OSUblake said:


now my Home.vue looks like this:


  <div class="home">

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

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

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


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"]),


and my cursorTweens.js like this:


import { gsap } from "gsap";

export const cursorTweens = {
  data() {
    return {
      cursorTl: new gsap.timeline({
        paused: true,
  mounted: function() {
      .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() {
    cursorLeave() {


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!


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.