Counting up animation for an html5 banner ad

New Here ,
Jun 27, 2021 Jun 27, 2021

Copy link to clipboard

Copied

Hello community,

 

I am reaching out because I need to figure out a way to animate a counter going up from 15 to 95 for an html5 banner ad.

 

I tried searching for a solution in the community and found a couple of similar questions but so far the solutions haven't worked for me.

 

Would anyone please be able to assist me with this one? Thank you!

 

TOPICS
Ad development , Code , How to

Views

194

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Jun 28, 2021 Jun 28, 2021
Hi. You can use TweenJS for this kind of animation. Like this: this.countText.count = 15; createjs.Tween.get(this.countText).to({ count: 95 }, 1000, createjs.Ease.sineOut).addEventListener("change", function(e) { e.target.target.text = Math.round(e.target.target.count).toString(); }); I hope it helps. Regards, JC

Likes

Translate

Translate
Adobe Community Professional ,
Jun 28, 2021 Jun 28, 2021

Copy link to clipboard

Copied

Hi.

 

You can use TweenJS for this kind of animation. Like this:

this.countText.count = 15;

createjs.Tween.get(this.countText).to({ count: 95 }, 1000, createjs.Ease.sineOut).addEventListener("change", function(e)
{
	e.target.target.text = Math.round(e.target.target.count).toString();
});

 

I hope it helps.

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 29, 2021 Jun 29, 2021

Copy link to clipboard

Copied

This worked for me. Thank you so much, JC!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 30, 2021 Jun 30, 2021

Copy link to clipboard

Copied

LATEST

Awesome! You're welcome!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines