Karma Blackshaw
Members-
Posts
17 -
Joined
-
Last visited
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
Karma Blackshaw's Achievements
- Rare
- Rare
- Rare
Recent Badges
10
Reputation
-
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.
- 6 comments
-
- 5
-
- svg
- line drawing
- (and 4 more)
-
Karma Blackshaw started following PointC
-
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!
-
Reset to initial position removes element
Karma Blackshaw replied to Karma Blackshaw's topic in GSAP
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!- 4 replies
-
- 1
-
- initial
- resetting timeline
-
(and 2 more)
Tagged with:
-
Reset to initial position removes element
Karma Blackshaw replied to Karma Blackshaw's topic in GSAP
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 ?- 4 replies
-
- initial
- resetting timeline
-
(and 2 more)
Tagged with:
-
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); }, }
- 4 replies
-
- initial
- resetting timeline
-
(and 2 more)
Tagged with:
-
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.
-
Karma Blackshaw started following OSUblake
-
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!