Jump to content
Search Community

wone

Members
  • Posts

    3
  • Joined

  • Last visited

wone's Achievements

  1. there seems to be a difference in results between ease "Elastic" gsap v.2 and gsap v.3 ease: Elastic.easeOut, easeParams: [.6, .2], and get the same animation results but when using gsap v.3 for ease: "elastic.out(.6, .02)", animation does not occur on gsap v.3 when I use
  2. loading.mp4 hello seniors, how to make an animation so it looks like it follows the percentage when the page is loaded? here is the code snippet i made: first i make a small circle with pixi js this.stage = new PIXI.Graphics(); let dot, numDots = 40, radius = 90, circle = 1.5 * Math.PI, angle = circle / numDots; this.clock = new PIXI.Sprite; for (var i = 0, j = 0; i < circle; i += angle, ++j) { dot = new PIXI.Graphics; dot.beginFill(10066329); dot.drawCircle(0, 0, 1); dot.angle = i - Math.PI / 2; this.clock.addChild(dot) } this.stage.addChild(this.clock); then i positioned them in a circle and added animation with gsap: progress(progress, delay) { var clockTweens = []; if (!this.active && !this.visible) gsap.to(this.$el.find(".counter-wrap"), { duration:.75, scale: 1, autoAlpha: 1, delay: delay, ease: "power2.out", }); this.active = true; this.visible = true; this.$el.find(".count").html(Math.round(progress * 100)); underscoreMin.each(this.clock.children, function(dot, i) { if (i < Math.round(progress * 40) && !dot.start) { dot.start = true; clockTweens.push(gsap.fromTo({ radius: 90, alpha: 1, dot: dot }, { duration:.2, radius: 50, alpha: 0 }, { radius: 90, alpha: 1, ease: "elastic.out(.6, .02)", onUpdate: function() { var x = 190 + Math.cos(this._targets[0].dot.angle) * this._targets[0].radius , y = 190 + Math.sin(this._targets[0].dot.angle) * this._targets[0].radius , alpha = this._targets[0].alpha; this._targets[0].dot.alpha = alpha; this._targets[0].dot.x = x; this._targets[0].dot.y = y } })) } }); this.progressTimeline = gsap.timeline({ tweens: clockTweens, stagger: .02, delay: .15, onComplete: underscoreMin.bind(function() { this.active = progress != 1 }, this) }) } can anyone help me to fix my code to get animation results like in the video?
  3. is using easeParams in gsap 3 no longer supported, I have old code that used easeParams: [.6, .2], but got error gsap-core.js:89 Invalid property easeParams set to (2) [0.6 , 0.2] Plugin is lost? gsap.registerPlugin()
×
×
  • Create New...