number counting animation

[bigjimmy15]

Hi,

I am currently using the impact theme. The number counting animation goes from 0-100 but I want to change it so it can go from 100 - 0. Is this possible? Attached is a photo of the number (100) I want to change so it ends at 0. 

Thank you

[EBOOST · Accepted solution]

Hi @bigjimmy15 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/theme.js
3. search "// js/sections/impact-text.js". Then update like the screenshot below

import { animate as animate14, inView as inView9 } from "vendor";
var ImpactText = class extends HTMLElement {
  connectedCallback() {
    if (!window.matchMedia("(prefers-reduced-motion: no-preference)").matches) {
      return;
    }
    inView9(this, ({ target }) => this._onBecameVisible(target), { margin: "-100px" });
  }
  async _onBecameVisible(target) {
    animate14(target, { opacity: 1, transform: ["translateY(10px)", "translateY(0)"] }, { duration: 0.3 });
    if (this.hasAttribute("count-up")) {
      const itemToSearch = this.childElementCount === 0 ? this : this.firstElementChild, matches = itemToSearch.textContent.trim().match(/\d+(?:[,. ]\d+)*/);
      if (!matches) {
        return;
      }
      itemToSearch.innerHTML = itemToSearch.textContent.replace(/\d+(?:[,. ]\d+)*/, `<span>${matches[0]}</span>`);
      const numberSpan = itemToSearch.querySelector("span");
      numberSpan.style.textAlign = matches[0] === matches["input"] ? null : "end";
      if (!itemToSearch.classList.contains("text-gradient")) {
        numberSpan.style.display = "inline-block";
        numberSpan.style.minWidth = `${numberSpan.clientWidth}px`;
      }
      const toReplace = matches[0].replace(/[,\. ]+/, ""), charactersMatches = [...matches[0].matchAll(/[,\. ]+/g)];
      await animate14((progress) => {
        let formattedString = parseInt(toReplace) -  Math.round(progress * parseInt(toReplace)).toString();
        charactersMatches.forEach((character) => {
          if (formattedString.length >= matches[0].length - character.index) {
            
            formattedString = formattedString.slice(0, character.index) + character[0] + formattedString.slice(character.index);
          }
        });
        numberSpan.textContent = progress === 1 ? 0 : formattedString;
      }, { duration: parseFloat(this.getAttribute("count-up")), easing: [0.16, 1, 0.3, 1] }).finished;
      numberSpan.style.minWidth = null;
    }
  }
};
if (!window.customElements.get("impact-text")) {
  window.customElements.define("impact-text", ImpactText);
}

[bigjimmy15]

Thank you for your help! It worked great! Can you help me out with another change I want to make? Attached is a photo of my mega menu but I want to make the tabs go vertical rather than horizontal and have more than one of the collection pictures and links on it as well. The second photo is of what I want it to look like. Can you help me out?

Thank you

[EBOOST]

Hi,

Could you share your URL store? I can refer this theme here https://support.maestrooo.com/article/709-mega-menu

1. create menu likes the screenshot below

/* important  Notes*/

•   You have to add 3 levels
•    Shop item only need a sub collection ( iTem 1)  -> maximum: 2 sub collections.
•   Level 3 is not limit sub collections

2.  Go to Theme -> Customize -> Header section -> Add Mega menu

/* important  Notes*/

-  Submenu is Bold - text only

- Layout: Horizontal