Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Karma Blackshaw

Members
  • Content Count

    3
  • Joined

  • Last visited

Community Reputation

1 Newbie

About Karma Blackshaw

  • Rank
    Newbie
  1. 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(({ element, params }) => 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!
  2. 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>
×