Jump to content
Search Community

Check if all tween is done tweening, still tweening, kill all tweens using VueJS

Karma Blackshaw test
Moderator Tag

Recommended Posts

Hello guys! I am pretty new with Greensock and I'm having trouble with TweenMax. I wish to start all elements at the same time. Yes I made it to start all but when checking for the status of elements seems to be wrong. I have here my code:

 

<template>
  <div class="layout">
    <div class="lane">
      <div class="snail snail-1" />
    </div>
    <div class="lane">
      <div class="snail snail-2" />
    </div>
    <div class="lane">
      <div class="snail snail-3" />
    </div>

    <button @click="start">Start</button>
  </div>
</template>

<script>
import { TweenMax } from 'gsap'

export default {
  name: 'home',

  data() {
    return {
      snail: null,
      lane: null,
      snails: null,
      lanes: null,
      snailWidth: null,
      laneWidth: null,
      finishLine: null,
      heirarchy: 0,
      tween: null
    }
  },

  mounted() {
    this.lanes = document.getElementsByClassName('lane')
    this.snails = document.getElementsByClassName('snail')
    this.lane = this.lanes[0]
    this.snail = this.snails[0]
    this.laneWidth = this.lane.offsetWidth
    this.snailWidth = this.snail.offsetWidth
    this.finishLine = this.laneWidth - this.snailWidth
    this.tween = new TweenMax() // I wish to do it like this. Similar to TimelineMax
  },

  methods: {
    reset() {
      this.heirarchy = 0
      TweenMax.set(this.snails, { x: 0 })
      // Supposedly, TweenMax.kill() but it emits an error.
    },

    getRandomFinishDuration:() => (Math.random() * 10) + 5,

    completeRace(msg) {
      if (this.heirarchy === 0) {
        console.log('Winner is ' + msg)
        this.heirarchy++
      }
    },

    animateSnails({ element, params }) {
      return TweenMax.to(element, {
        duration: this.getRandomFinishDuration(),
        x: this.finishLine,
        ease: "none",
        onComplete: this.completeRace,
        onCompleteParams: params
      })
    },

    start() {
      if (TweenMax.isTweening()) return // This emits an error.

      let obj = [
        { element: '.snail-1', params: ['Snail One!'] },
        { element: '.snail-2', params: ['Snail Two!'] },
        { element: '.snail-3', params: ['Snail Three!'] }
      ]

      // Is there a way for selecting all element and start them all? Unlike this, which seems
      // very costly because it is creating a new instance of TweenMax
      obj.forEach(({ element, params }) => this.animateSnails({ element, params }))
    }
  }
}
</script>

<style scoped>
.lane {
  height: 100px;
  background: black;
  margin: 2px;
}

.snail {
  height: 100px;
  width: 20px;
}

.snail-1 {
  background: orange;
}

.snail-2 {
  background: blue;
}

.snail-3 {
  background: red;
}
</style>
 
 
Link to comment
Share on other sites

You can kill instances by using gsap.killTweensOf() or using tween.kill(). However it's not clear from your other post if you actually mean kill or just play/pause them.

 

To kill an instance inside of the reset method, you might be able to do something like this:

// This may work
TweenMax.killTweensOf(this.snails);
TweenMax.set(this.snails, { x: 0 })

If the above doesn't work, you may need to save a reference to each tween and then call .kill() on each of them.

const tweens = [];
animateSnails({ element, params }) {
  let tween = TweenMax.to(element, {
    duration: this.getRandomFinishDuration(),
    x: this.finishLine,
    ease: "none",
    onComplete: this.completeRace,
    onCompleteParams: params
  })
  
  tweens.push(tween);
  return tween;
},
  
//...
// Inside of reset()
tweens.forEach(tween => tween.kill());
TweenMax.set(this.snails, { x: 0 })

You can check if something is animating using .isActive(), not isTweening. Maybe our section on controlling animations in our getting started article can help your overall understanding.

 

11 hours ago, Karma Blackshaw said:

this.tween = new TweenMax() // I wish to do it like this. Similar to TimelineMax

Why? You'd probably like GSAP 3. You very well may be loading it already! It has a new, more condensed form of making tweens. You'd simply say gsap.to(...) to create new .to tweens.

 

11 hours ago, Karma Blackshaw said:

// Is there a way for selecting all element and start them all? Unlike this, which seems // very costly because it is creating a new instance of TweenMax

You're not creating new instances of TweenMax every time. You're using the same instance but using it to create new tween instances. There's nothing to worry about performance wise here.

 

As Blake said, a demo would help us help you.

Link to comment
Share on other sites

On 1/14/2020 at 11:25 PM, ZachSaucier said:

You can kill instances by using gsap.killTweensOf() or using tween.kill(). However it's not clear from your other post if you actually mean kill or just play/pause them.

 

To kill an instance inside of the reset method, you might be able to do something like this:


// This may work
TweenMax.killTweensOf(this.snails);
TweenMax.set(this.snails, { x: 0 })

If the above doesn't work, you may need to save a reference to each tween and then call .kill() on each of them.


const tweens = [];
animateSnails({ element, params }) {
  let tween = TweenMax.to(element, {
    duration: this.getRandomFinishDuration(),
    x: this.finishLine,
    ease: "none",
    onComplete: this.completeRace,
    onCompleteParams: params
  })
  
  tweens.push(tween);
  return tween;
},
  
//...
// Inside of reset()
tweens.forEach(tween => tween.kill());
TweenMax.set(this.snails, { x: 0 })

You can check if something is animating using .isActive(), not isTweening. Maybe our section on controlling animations in our getting started article can help your overall understanding.

 

Why? You'd probably like GSAP 3. You very well may be loading it already! It has a new, more condensed form of making tweens. You'd simply say gsap.to(...) to create new .to tweens.

 

You're not creating new instances of TweenMax every time. You're using the same instance but using it to create new tween instances. There's nothing to worry about performance wise here.

 

As Blake said, a demo would help us help you.

Thank you sir! GSAP 3 is the answer indeed.


So I did it like this: 
 

mounted () {
  this.tween = gsap
},

 

computed: {

   isTweening() {
     return this.snails ? this.tween.isTweening(this.snails) : false // Check if tweening.
   }
},
  methods: {
    start() {
      if (this.isTweening) return
 
      let obj = [
        {
          element: '.snail--1',
          params: [
            { message: 'Snail One!', snail_id: 1, ease: this.getRandomEase() }
          ]
        },
        {
          element: '.snail--2',
          params: [
            { message: 'Snail Two!', snail_id: 2, ease: this.getRandomEase() }
          ]
        },
        {
          element: '.snail--3',
          params: [
            { message: 'Snail Three!', snail_id: 3, ease: this.getRandomEase() }
          ]
        }
      ]
 
      obj.forEach(({ elementparams }) =>
        this.tween.to(element, {
          duration: this.getRandomFinishDuration(),
          x: this.finishLine,
          ease: this.getRandomEase(),
          onComplete: this.completeRace,
          onCompleteParams: params
        })
      )
    }
  }

And that made my mini race ^^ Thank you GSAP!

  • Like 1
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.
×
×
  • Create New...