Karma Blackshaw

Yes, I'm planning to use GSAP, but I have no lead of where to start.

Hi guys! I'm have you ever encountered an animation like TurnJS but uses card instead of a page. I don't know where to go since "Card Flip" query would always lead me to a simple card flip. I'm planning to start this project using GSAP

I see. Very well! Thanks for the tips, maybe soon I can join the Greensock Club Thank you!

I have an svg animation, it works great in chrome however, in other browsers such as Edge of IE, it seems stuck. Are there any workarounds for this ? PS: I don't have enough budget for DrawSVG yet haha

Good day GSAP! I have a problem to which I found this as a possible solution, unfortunately, I am unable to find the location of the DrawSVG Plugin within the gsap-member folder or even at the gsap-bonus/package folder. It seems that gsap-bonus is no longer a folder but an archive. Moreover, inside the archive, MorphSVGPlugin which is aforementioned and DrawSVG cannot be found.

Good day GSAP! I have a problem to which I found this as a possible solution, unfortunately, I am unable to find the location of the DrawSVG Plugin within the gsap-member folder or even at the gsap-bonus/package folder.

Because I thought it was only hidden behind some layer. But thank you for pointing it out sir!

Woah! Thank you sir! I've been looking for this but I don't know the term! Thank you!

The opacity. Thank you sir! I'm very sorry for the stupid question. I'm still new to GSAP and to programming as well. Thank you!

Thank you for the tips sir, especially in the css part. Ive read many forums on how to do things and maybe I've read the old ones. Back on track, the beginning of the the animation sir, I've set the lure and bait from 0 scale to 1. Do I need to use set instead of fromTo to reset the properties of lure and bait, and do I need to set them separately ?

What I am supposed to be doing is to throw the bait, and wait for 3 waves and a fish bites. When the fish bites, the bait, must look as if it was dragged down and then the fisherman gets the bait. However, after getting the bait and starting again, the bait is now gone. All that's left is the bait. PS: When throwing the bait, the bait must come from 200px above. It works on my PC however, in codepen, I don't know why it does not go 200px above. mounted() { this.timeline = gsap.timeline() }, methods() { throwBait(e) { let vue = this; this.animation = this.timeline .fromTo( [this.lure, this.bait], 1.3, { css: { left: e.pageX - 25, // 25: Half of lure's width top: e.pageY - 200, scaleY: 0, scaleX: 0, visibility: "hidden" } }, { ease: "elastic.inOut(1, 0.75)", css: { left: e.pageX - 25, // 25: Half of lure's width top: e.pageY, scaleY: 1, scaleX: 1, visibility: "visible" } }, 0 ) .fromTo( this.wave, 2, { y: "-5", width: "0px", height: "0px", border: "1px solid white", opacity: 1 }, { y: "-=5", ease: "Linear.easeNone", width: "50px", height: "10px", border: ".1px solid white", visibility: "visible", repeat: 2, opacity: 0 }, 1 ) .to( this.lure, 1, { y: "-=5px", ease: "Linear.easeNone", yoyo: true, repeat: 6 }, 0 ) .to( this.lure, 1, { y: 20, ease: "power4.out" }, 6 ) .to( this.lure, 0.5, { y: -100, ease: "power4.in", opacity: 0, scale: 0 }, 6.5 ) .then(x => vue.reset()); }, reset() { this.timeline = gsap.timeline(); this.timeline.time(0); }, }

Hi! I have a little project which is supposed to act like a floating bait. The problem is, I want to set the lure in front and the wave to be at the back of the lure. I tried using css' z-index and GSAP's zIndex to no avail.

Thank you sir! Literally what I've been looking!

I am making a fish game. So you throw the hook, a fish somehow plays with it so it vibrates a bit. Then you get it back. The problem is, I want to have a line which connects both the hook and the rod. And then animate the line which acts likes a real fishing rod string.

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!

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>