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?