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