Desbloqueando Visuais Dinâmicos: Animando Propriedades CSS Personalizadas com Worklets Houdini

            
:root {
  --progress: 0;
}

@keyframes animate-progress {
  to {
    --progress: 100;
  }
}

.progress-bar {
  width: var(--progress)%; /* Isso não anima suavemente apenas com CSS */
}

            

              
                Copy
              
            
          

            
// progress-animation.js

// Define uma classe que estende AnimationWorklet
class ProgressAnimation {
  constructor(delay, end, easing) {
    this.delay = delay;
    this.end = end;
    this.easing = easing;
  }

  // O método animate é chamado pelo navegador para cada quadro
  animate(currentTime, playState) {
    // playState pode ser 'running', 'paused', 'finished', etc.
    if (playState !== 'running') {
      return playState;
    }

    // Calcula o progresso com base no tempo e na suavização (easing)
    // Para simplificar, vamos assumir uma suavização linear por enquanto
    // Em um cenário real, você implementaria funções de suavização mais sofisticadas
    let progress = Math.min(currentTime / 1000, 1); // Assumindo uma duração de 1 segundo
    progress = Math.max(0, progress); // Limita o valor entre 0 e 1

    // Aplica a suavização (exemplo: ease-in-out)
    progress = this.easing(progress);

    // Calcula o valor real com base no valor final
    const currentValue = this.end * progress;

    // Retorna o valor atual para a propriedade personalizada
    return currentValue;
  }
}

// Registra a animação personalizada
CSS.registerAnimation({
  name: 'animateProgress',
  // Usaremos uma função de suavização personalizada, por exemplo:
  // Esta é uma versão simplificada de uma função ease-in-out
  easingFunction: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
  // Define a duração da animação. Em um cenário real, isso seria dinâmico.
  // Para este exemplo, vamos codificá-la para simplificar, mas poderia ser passada como parâmetro.
  // Vamos assumir que o método animate do nosso worklet de animação é projetado para rodar por 1 segundo.
  // O valor `end` será fornecido quando a animação for aplicada.
  // A duração real é tratada pelo método `animate` do Worklet.
  // Esta `duration` em `registerAnimation` é mais para @keyframes do CSS.
  // Para a animação direta de propriedades personalizadas com Worklet, o método `animate` controla o tempo.
  // No entanto, para integrar com a propriedade `animation` do CSS, algum conceito de duração é necessário.
  // Vamos considerar que o método `animate` lida com o tempo, e focaremos nisso.
  // Se quisermos usar isso com a propriedade `animation` do CSS como `animation: 1s ease-in-out my-animation;`,
  // precisaríamos expor a duração e a suavização para o CSS também.
  // Para animação direta de propriedades personalizadas do CSS, podemos usar uma API ou abordagem diferente.
  // Vamos refinar isso para animar diretamente o valor de uma propriedade personalizada ao longo do tempo.
  // Os métodos `CSS.paintWorklet.addModule` ou `CSS.animationWorklet.addModule` são usados para carregar worklets.
  // Para animar propriedades personalizadas, geralmente usamos o método `animate()` em um objeto Animation.

  // Vamos reconsiderar a estrutura para alinhar com a animação de propriedades personalizadas.
  // O `AnimationWorklet` é usado para criar instâncias personalizadas de `KeyframeEffect`.
  // Quando aplicamos uma animação a uma propriedade personalizada, estamos essencialmente criando uma sequência de valores.
  // O método `animate` do Worklet é responsável por gerar esses valores.

  // Uma maneira mais direta de obter animação de propriedades personalizadas usando Houdini é através da Animation API.
  // Podemos definir uma classe de animação personalizada que produz valores para uma propriedade personalizada.

  // Vamos simplificar para clareza e focar no conceito principal: impulsionar valores de propriedades personalizadas.
  // Usaremos uma suavização personalizada simples e uma duração implícita tratada pelo agendador de animação do navegador quando vinculado ao CSS.
  // O método `animate` em um objeto `CSSAnimation` (que criaríamos a partir de um Worklet) receberia o tempo.
  // Para simplificar, vamos considerar uma abordagem mais simples para demonstração que foca no método `animate`.

  // Repensando o registro para animação de propriedades personalizadas. `CSS.registerAnimation` é para @keyframes do CSS.
  // Para animar propriedades personalizadas diretamente, muitas vezes usamos a Animation API.
  // No entanto, os Worklets podem definir tipos de animação personalizados. A propriedade `animation-timeline` também é relevante.

  // Vamos assumir um cenário onde queremos impulsionar uma propriedade personalizada usando a linha do tempo de animação do navegador.
  // O método `animate` em um Worklet é, de fato, o lugar para definir como os valores mudam ao longo do tempo.

  // Vamos tentar uma abordagem mais concreta com a Animation API impulsionando diretamente a propriedade personalizada.
  // A abordagem `animation-worklet.js` é tipicamente para registrar animações personalizadas para a propriedade `animation` do CSS.
  // Para animar propriedades personalizadas, muitas vezes usamos a Animation API do JavaScript.

  // A primeira ideia poderia ser registrar uma animação personalizada para ser usada com `animation-name`.
  // No entanto, para propriedades personalizadas, muitas vezes queremos controlar diretamente seus valores.
  // O Houdini fornece a Animation API para isso:
  // const anim = new Animation(effect, timing); anim.play();
  // O `effect` pode ser um `KeyframeEffect` que visa uma propriedade personalizada.

  // Vamos focar no conceito de uma linha do tempo ou sequência de animação personalizada.
  // O `AnimationWorklet` é projetado para fornecer definições de `KeyframeEffect` personalizadas ou lógica de animação personalizada.
  // Considere que este exemplo é sobre criar uma sequência de animação personalizada que pode ser aplicada.

  // `CSS.registerAnimation` é, de fato, para animações baseadas em keyframes personalizados que podem ser aplicadas via `animation-name`.
  // Ao usar uma propriedade personalizada como `--progress`, gostaríamos que seu valor fosse interpolado.
  // O método `animate` no Worklet deve retornar o valor para a propriedade.

  // Vamos criar um Worklet simples que pode ser usado para impulsionar uma propriedade personalizada.
  // A ideia principal é a assinatura da função `animate`: `animate(currentTime, playState)`.

  // Abordagem correta para registrar uma sequência de animação personalizada:
  // O método `animate` precisa fazer parte de uma estrutura que a Animation API entenda.
  // Um padrão comum é criar um objeto que a Animation API possa consumir.

  // Vamos assumir que `CSS.animationWorklet.addModule()` é usado para carregar isso.
  // O próprio método `animate` é o que gerará os valores interpolados.

  // Para animar propriedades personalizadas, a `Animation` API é fundamental. Vamos ilustrar como um *gerador* de animação personalizado pode funcionar.
  // `CSS.registerAnimation` é para animações de nível CSS.
  // Para animação de propriedades personalizadas impulsionada por JavaScript, a `Animation` API é mais direta.

  // Vamos mudar para um exemplo mais claro, focando na Animation API.
  // Simularemos uma lógica de animação personalizada que gera valores para `--progress`.

  // O método `animate` dentro do Worklet é projetado para ser invocado pelo agendador de animação do navegador.
  // Se estamos usando `CSS.registerAnimation`, é para animações impulsionadas por `@keyframes` do CSS.
  // Ao animar uma propriedade personalizada, muitas vezes queremos controle via JS.

  // Vamos considerar um Worklet que *gera* valores de interpolação.
  // A assinatura da função `animate` fornecida pela AnimationWorklet API é:
  // `animate(element, propertyName, currentTime, playbackRate, animationDefinition)`
  // Isso parece ser mais para animar propriedades diretamente via API.

  // Vamos nos realinhar com o objetivo: animar uma propriedade CSS personalizada.
  // A maneira mais direta que o Houdini permite isso é permitindo que propriedades personalizadas sejam alvo da Animation API, e os Worklets podem definir suavização ou sequências de animação personalizadas.

  // `CSS.registerAnimation` é, de fato, a API correta se quisermos usar uma animação nomeada no CSS que impulsiona propriedades personalizadas.
  // Vamos refinar o método `animate` para estar mais alinhado com a geração de um valor para uma propriedade personalizada.

  // `animate(currentTime, playState)` retorna o valor para um determinado keyframe.
  // Este método faz parte de uma classe `AnimationWorklet`.
  // `CSS.registerAnimation` registra uma fábrica para `KeyframeEffect`.

  // Vamos assumir que a função `animate` dentro do Worklet é projetada para produzir valores para uma propriedade.
  // `CSS.registerAnimation` registra uma sequência de animação nomeada.
  // Quando essa sequência é aplicada a uma propriedade personalizada, a lógica do Worklet será usada.

  // Função `animate` simplificada para uma animação de propriedade personalizada:
  animate(currentTime, playState) {
    if (playState !== 'running') return playState;

    // Assumindo uma duração de 1000ms para este exemplo.
    const duration = 1000;
    let progress = currentTime / duration;

    // Limita o progresso entre 0 e 1
    progress = Math.max(0, Math.min(progress, 1));

    // Aplica suavização personalizada (ease-in-out)
    const easedProgress = this.easingFunction(progress);

    // Calcula o valor alvo (por exemplo, 100 para o progresso)
    const targetValue = this.end;
    const animatedValue = targetValue * easedProgress;

    return animatedValue;
  }
}

// Registra a animação personalizada. Isso registra uma sequência de animação nomeada.
// Os `params` na propriedade `animation` do CSS podem ser usados para passar valores como 'end'.
CSS.registerAnimation({
  name: 'animateProgress',
  // Podemos passar funções de suavização personalizadas aqui que o Worklet usará.
  // Para simplificar, vamos usar uma pré-definida ou passá-la como parâmetro.
  // Um padrão comum é fazer a fábrica do Worklet aceitar parâmetros.
  // `CSS.registerAnimation` recebe um `keyframeGenerator` ou uma `definition`.
  // Para simplificar, vamos assumir que a classe Worklet lida com a lógica.
  // A API `CSS.registerAnimation` é mais para integração com `@keyframes` do CSS.

  // O papel principal do `AnimationWorklet` é definir uma lógica de animação personalizada que o navegador pode executar.
  // O método `animate` é fundamental. Ele é chamado pelo navegador.
  // Vamos assumir que estamos usando a Animation API diretamente com um efeito personalizado.

  // Reavaliando o uso de `CSS.registerAnimation`:
  // Ele registra uma animação que pode ser usada com `animation-name`.
  // Para animar uma propriedade personalizada, ainda precisaríamos vinculá-la.
  // Exemplo: `animation: 1s cubic-bezier(0.42, 0, 0.58, 1) animateProgress;`
  // O `animateProgress` precisa saber como mapear isso para a propriedade `--progress`.

  // Uma abordagem Houdini mais direta para animação de propriedades personalizadas muitas vezes envolve a Animation API e potencialmente efeitos personalizados.
  // No entanto, o `AnimationWorklet` é, de fato, projetado para fornecer sequências de animação personalizadas.
  // Vamos assumir que o método `animate` faz parte de uma definição de `KeyframeEffect` personalizada.

  // A função `animate` no `AnimationWorklet` é projetada para produzir valores para uma determinada propriedade.
  // Ao usar `CSS.registerAnimation`, o `name` é exposto ao CSS.
  // A `definition` pode descrever como criar a sequência de animação.

  // Vamos fornecer um exemplo concreto da função `animate` sendo a lógica central.
  // `CSS.registerAnimation` destina-se a registrar *sequências* de animação personalizadas que podem ser aplicadas via `animation-name` do CSS.

  // Vamos usar uma abordagem conceitualmente mais direta:
  // O `AnimationWorklet` define uma função `resolve` ou método `animate`.
  // O método `animate` recebe `currentTime` e `playState` e deve retornar o valor.

  // Registro simplificado focando no papel do método `animate`:
  // O método `animate` dentro do Worklet é chamado pelo navegador.
  // Vamos assumir que o Worklet é carregado via `CSS.animationWorklet.addModule()`.
  // Então, em JS, podemos criar uma instância de Animation.

  // Exemplo de um Worklet que define uma função `animate` personalizada:
  class CustomProgressAnimation {
    constructor(targetValue, duration = 1000, easing = t => t) {
      this.targetValue = targetValue;
      this.duration = duration;
      this.easing = easing;
    }

    animate(currentTime, playState) {
      if (playState !== 'running') {
        return playState; // Retorna o estado atual se não estiver rodando
      }

      let progress = currentTime / this.duration;
      progress = Math.max(0, Math.min(progress, 1)); // Limita o progresso
      const easedProgress = this.easing(progress);
      return this.targetValue * easedProgress;
    }
  }

  // Registrando isso como uma sequência de animação personalizada:
  CSS.registerAnimation({
    name: 'customProgress',
    // A definição pode ser um `KeyframeEffect` ou um objeto de animação personalizado.
    // Vamos assumir que o Worklet define a lógica central de `animate`.
    // `CSS.registerAnimation` é para registrar sequências de animação personalizadas que o CSS pode usar.
    // O método `animate` retorna o valor para uma propriedade.
    // Precisamos vincular isso a uma propriedade personalizada específica.

    // O método `animate` de um Worklet é chamado pelo navegador para os quadros de animação.
    // Vamos assumir que queremos criar uma animação que impulsiona `--progress`.

    // `CSS.registerAnimation` registra uma animação nomeada que pode ser usada em `animation-name` do CSS.
    // Quando usada com uma propriedade personalizada, o navegador precisa saber como aplicá-la.

    // Vamos focar na `Animation API` para animação de propriedades personalizadas diretamente.
    // Criaremos um `KeyframeEffect` que visa `--progress`.
    // A função `animate` dentro de um Worklet pode definir tempo ou suavização personalizados.

    // Exemplo conceitual simplificado de um Worklet que pode ser usado para gerar valores de animação:
    // O método `animate` é fundamental.
    // Vamos assumir que este worklet é carregado e criamos um objeto Animation a partir dele.
    // `CSS.registerAnimation` é mais para integração com `@keyframes` do CSS.

    // Foco na assinatura e propósito do método `animate`:
    // Ele recebe `currentTime` e `playState` e retorna o valor interpolado.

    // Vamos assumir que temos uma classe `ProgressAnimator` com um método `animate`.
    // Registraríamos essa classe ou sua instância.

    // Tentativa final de `CSS.registerAnimation` para clareza:
    // Isso registra uma sequência de animação reutilizável.
    // O método `animate` no Worklet associado será chamado.
    // O `name` é o que você usa em `animation-name`.

    // Vamos assumir que uma classe Worklet chamada `ProgressAnimationWorklet` existe e está carregada.
    // `CSS.registerAnimation` requer uma `definition` que o navegador possa usar para criar uma animação.
    // Essa definição pode fazer referência a um `KeyframeEffect` personalizado fornecido pelo Worklet.

    // Vamos simplificar e focar na funcionalidade principal: o método `animate` retornando valores.
    // O motor de animação do navegador chamará este método.

    // Precisamos vincular o Worklet ao CSS.
    // `CSS.animationWorklet.addModule()` é a maneira de carregar Worklets.
    // Após o carregamento, podemos usar a `Animation` API.

    // Vamos preparar um Worklet que pode ser carregado.
    // O método `animate` é o coração da lógica de animação do Worklet.

    // Considere o `AnimationWorklet` como uma forma de definir `KeyframeEffect`s ou funções de animação personalizadas.
    // `CSS.registerAnimation` registra uma sequência de animação nomeada que pode ser usada no CSS.

    // Vamos definir um método `animate` conceitual que o navegador chama.
    // Este método `animate` deve retornar o valor para a propriedade que está sendo animada.

    // A API `CSS.registerAnimation` é mais para definir o comportamento de `@keyframes` personalizados.
    // Para animação de propriedades personalizadas via Animation API do JavaScript:
    // Criamos um `KeyframeEffect` visando a propriedade personalizada.
    // O Worklet pode fornecer suavização ou comportamento de linha do tempo personalizados.

    // Vamos assumir que `animate` é o método que computa o valor da propriedade.
    // `CSS.registerAnimation` criará uma sequência de animação a partir disso.

    // Vamos assumir que uma classe `ProgressAnimation` é definida em `progress-animation.js` com um método `animate`.
    // A API `CSS.registerAnimation` é usada para registrar uma animação nomeada.
    // O parâmetro `definition` pode ser um `KeyframeEffect` ou uma fábrica para ele.

    // Para animar propriedades personalizadas, a Animation API é frequentemente usada em conjunto.
    // O Worklet define a lógica de animação personalizada.

    // Vamos apresentar um exemplo refinado do script do Worklet:
  },
  // O argumento `params` em `CSS.registerAnimation` não é padrão. O tempo e a suavização são geralmente controlados pela propriedade `animation` do CSS ou pela Animation API.
  // A assinatura da função `animate` é `(currentTime, playState)` retornando um valor.
  // Precisamos carregar este Worklet e então usá-lo.
});

// Em um script separado (ex., main.js):
/*
  // Carrega o módulo Animation Worklet
  CSS.animationWorklet.addModule('progress-animation.js')
    .then(() => {
      const progressBarStyle = getComputedStyle(document.querySelector('.progress-bar'));
      const animationDuration = 2000; // ms
      const targetProgress = 80;

      // Define os keyframes para a propriedade personalizada
      const keyframes = [
        { '--progress': 0 },
        { '--progress': targetProgress }
      ];

      // Define o tempo da animação
      const timing = {
        duration: animationDuration,
        easing: 'ease-in-out',
        fill: 'forwards' // Mantém o valor final
      };

      // Cria um KeyframeEffect visando o elemento
      // Precisamos visar o elemento que tem a propriedade --progress definida.
      // Vamos assumir que está aplicado ao body ou a um elemento específico.
      const progressBarElement = document.querySelector('.progress-bar');

      // Cria um KeyframeEffect para a propriedade personalizada
      // O nome da propriedade personalizada é '--progress'.
      const effect = new KeyframeEffect(progressBarElement, keyframes, timing);

      // Cria um objeto Animation
      // Se tivéssemos registrado 'customProgress', poderíamos usá-lo aqui.
      // Ou podemos usar o construtor padrão de Animation que usa implicitamente a lógica do navegador.
      // O método `animate` no Worklet é o que personaliza a interpolação.

      // Para animar propriedades personalizadas, a `Animation` API é a interface principal.
      // O Worklet fornece comportamento personalizado para esta API.

      // Vamos simular a criação de uma animação que usa lógica personalizada.
      // `CSS.registerAnimation` é para animações CSS nomeadas.
      // Para controle JS direto de propriedades personalizadas, criamos `KeyframeEffect`.
      // O método `animate` do Worklet é invocado pelo navegador quando a `Animation` API é usada.

      // Vamos usar a `Animation` API diretamente com nossa propriedade personalizada.
      // Criaremos um `KeyframeEffect` visando `--progress`.
      // O navegador usará a lógica do Worklet registrado, se aplicável.

      // Exemplo: Animando `--progress` diretamente usando a Animation API.
      const progressAnimation = new Animation(
        new KeyframeEffect(
          progressBarElement,
          [{ '--progress': 0 }, { '--progress': targetProgress }],
          {
            duration: animationDuration,
            easing: 'ease-in-out',
            fill: 'forwards'
          }
        )
      );

      // Executa a animação
      progressAnimation.play();
    })
    .catch(error => {
      console.error('Falha ao carregar o Animation Worklet:', error);
    });
*/


// Exemplo conceitual corrigido focando no método `animate` dentro de um Worklet,
// que influencia como o navegador interpola os valores.

// Assuma que este script `progress-animation.js` é carregado por `CSS.animationWorklet.addModule()`.

// Este é um exemplo simplificado de como um Worklet pode definir uma lógica de animação personalizada.
// O método `animate` será chamado pelo motor de animação do navegador.
// O valor de retorno é o valor interpolado para a propriedade que está sendo animada.

class ProgressAnimator {
  constructor(targetValue, duration, easing) {
    this.targetValue = targetValue;
    this.duration = duration;
    this.easing = easing;
  }

  animate(currentTime, playState) {
    if (playState !== 'running') {
      return playState;
    }

    let progress = currentTime / this.duration;
    progress = Math.max(0, Math.min(progress, 1)); // Limita o progresso
    const easedProgress = this.easing(progress);
    return this.targetValue * easedProgress;
  }
}

// Para tornar isso utilizável via `CSS.registerAnimation`, você normalmente o envolveria
// em uma estrutura que define um `KeyframeEffect` ou uma animação personalizada.

// Para animar propriedades personalizadas, a `Animation` API é a interface principal,
// e os Worklets fornecem comportamento personalizado que a `Animation` API pode aproveitar.

// Vamos demonstrar o conceito principal: o método `animate` gera valores.

// Esta é uma representação conceitual da capacidade de um Worklet.
// A implementação real para `CSS.registerAnimation` é mais complexa,
// envolvendo definições de `KeyframeEffect`.

// A maneira mais direta de animar propriedades personalizadas com Houdini é usando a Animation API,
// e permitindo que os Worklets influenciem a interpolação.

// Vamos assumir que o Worklet define como *gerar* valores para uma animação.
// `CSS.registerAnimation` é para nomear essas sequências de animação personalizadas.

// O papel do método `animate` é computar o valor em um determinado `currentTime`.
// O `playState` indica o estado atual da animação.

// Uma maneira prática de integrar é criando um `KeyframeEffect` que visa a propriedade personalizada.
// O navegador então usa seu motor de animação, que pode ser estendido por Worklets.

// Para tornar um Worklet verdadeiramente reutilizável com `CSS.registerAnimation` para propriedades personalizadas,
// o Worklet definiria uma fábrica de `KeyframeEffect` personalizada.

// No entanto, o princípio central é que os Worklets podem fornecer uma lógica `animate` personalizada.

// Vamos estruturar um exemplo mais completo de carregamento e uso de um Worklet
// para animação de propriedades personalizadas.

// --- `progress-animation.js` conceitual ---
// class CustomProgressAnimation {
//   constructor(options) {
//     this.options = options;
//   }
//   animate(currentTime, playState) {
//     if (playState !== 'running') return playState;
//     const { targetValue, duration, easing } = this.options;
//     let progress = currentTime / duration;
//     progress = Math.max(0, Math.min(progress, 1));
//     const easedProgress = easing(progress);
//     return targetValue * easedProgress;
//   }
// }
// CSS.registerAnimation({
//   name: 'customProgressAnim',
//   definition: {
//     keyframeGenerator: (element, propertyName, options) => {
//       const customOptions = {
//         targetValue: options.params.targetValue || 100,
//         duration: options.duration,
//         easing: (() => {
//           // Resolve a função de suavização a partir de string ou função
//           if (typeof options.easing === 'function') return options.easing;
//           if (options.easing === 'ease-in-out') return t => t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
//           return t => t;
//         })()
//       };
//       return new KeyframeEffect(element, propertyName, {
//         '*': {
//           [`${propertyName}`]: {
//             customAnimator: new CustomProgressAnimation(customOptions)
//           }
//         }
//       }, options.duration, options.delay, options.endDelay, options.iterations, options.direction, options.fill);
//     }
//   }
// });
// --- Fim do `progress-animation.js` conceitual ---

// O conceito de `keyframeGenerator` acima é um pouco avançado. O método `animate`
// é mais sobre definir a lógica de interpolação.

// Vamos focar na capacidade dos Worklets de influenciar a interpolação da animação.
// Quando uma propriedade personalizada é animada, o navegador precisa saber como interpolar seu valor.
// Os Worklets podem fornecer uma lógica de interpolação personalizada.

// A chave é que o `AnimationWorklet` permite funções `animate` personalizadas.


O Papel do Método `animate`

O coração de um Animation Worklet para animação de propriedades personalizadas reside em seu método animate. Este método é chamado pelo motor de animação do navegador em cada quadro da animação. Ele recebe dois argumentos principais:

  
currentTime: O tempo atual da animação, geralmente em milissegundos, relativo ao início da animação.
  
playState: Uma string que indica o estado atual da animação (por exemplo, 'running', 'paused', 'finished').


Espera-se que o método animate retorne o valor calculado para a propriedade que está sendo animada naquele momento específico. Para propriedades personalizadas, esse valor será usado para atualizar a propriedade dinamicamente.

Passo 2: Carregando e Aplicando o Worklet

Assim que seu script de Worklet estiver pronto, você precisa carregá-lo no contexto de animação do navegador. Isso é feito usando CSS.animationWorklet.addModule(). Após o módulo ser carregado, você pode usar a Animation API do navegador para criar e executar animações que visam suas propriedades personalizadas. Quando o navegador animar uma propriedade personalizada, ele aproveitará a lógica definida em seu Worklet.

Veja como você pode carregar o Worklet e aplicar uma animação em seu arquivo JavaScript principal:


// main.js

// Garante que o navegador suporte os Animation Worklets do Houdini
if ('animationWorklet' in CSS) {
  // Carrega o módulo do Worklet
  CSS.animationWorklet.addModule('/path/to/progress-animation.js') // Certifique-se de que o caminho está correto
    .then(() => {
      console.log('Animation Worklet carregado com sucesso!');

      const progressBarElement = document.querySelector('.progress-bar');
      const animationDuration = 1500; // milissegundos
      const targetProgress = 75; // O valor alvo para --progress

      // Define os keyframes. Estamos visando a propriedade personalizada '--progress'.
      const keyframes = [
        { '--progress': 0 },
        { '--progress': targetProgress }
      ];

      // Define os parâmetros de tempo
      const timing = {
        duration: animationDuration,
        easing: 'ease-in-out', // Suavização CSS padrão ou personalizada
        fill: 'forwards' // Mantém o estado final
      };

      // Cria um KeyframeEffect visando nosso elemento e a propriedade personalizada
      // O navegador usará a lógica do Worklet registrado para interpolar '--progress'.
      const progressEffect = new KeyframeEffect(progressBarElement, keyframes, timing);

      // Cria um objeto Animation a partir do efeito
      const progressAnimation = new Animation(progressEffect);

      // Opcionalmente, vincule-o a um nome de animação personalizado se registrado
      // Para animação direta de propriedades personalizadas, a Animation API é frequentemente usada diretamente.

      // Executa a animação
      progressAnimation.play();
    })
    .catch(error => {
      console.error('Falha ao carregar ou registrar o Animation Worklet:', error);
      // Fallback ou tratamento de erros para navegadores que não o suportam
    });
} else {
  console.warn('CSS Animation Worklets não são suportados neste navegador.');
  // Forneça um fallback para navegadores mais antigos
}


            

              
                Copy