functions not working on animejs in Angular

54 views Asked by At

I am currently trying to code a small animation for the component of a dashboard. I want to have around 4 or 5 elements which will display some data on the screen and I want them to move to the left to show 4 or 5 others until all my data zone are passed. I decided to try to use animejs for this but when I arrived at the point where I wanted to use a function for the translateX parametre my animation stopped working without giving me any errors. I surely am missing something but I cant seem to figure out what it is.

Also im currently working with angular and Ionic.

this is what I tried in my code

import { Component, ElementRef, QueryList, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { trigger, state, style, animate, transition, sequence, keyframes } from '@angular/animations';
import { Animation, AnimationController } from '@ionic/angular';
import anime from 'animejs/lib/anime.es.js';

@Component({
  selector: 'app-animation-page',
  templateUrl: './animation-page.page.html',
  styleUrls: ['./animation-page.page.scss'],
})

export class AnimationPagePage {

 constructor() {
  }

 ngAfterViewInit(): void {
    anime({
      targets: '.infoCard',
      translateX: function(elRef, i, l) {
        return [
        { value: '100%', duration: 1000, delay: 1000 },
        { value: '200%', duration: 1000, delay: 1000 }
       ];
      },
      easing: 'easeOutElastic(1, .8)',
      loop: true,
    })
  }

my html looks like this:

<div class="sectionBorder" style="height: 30%; max-height: 30%; display: flex; overflow: hidden;">
    <ion-card class="infoCard" #cardRef>
      <ion-card-header>
        <ion-card-title>Label</ion-card-title>
      </ion-card-header>
      <ion-card-content>
          Value: 8
      </ion-card-content>
    </ion-card>
  </div>

and my scss is like this:

.infoCard {
    min-width: 18.95%;
    margin-left:0;
    margin-right:0
}

Im trying to make it work on a single ion-card before I try it on multiple cards at once but im not sure if its necessary

0

There are 0 answers