CODEWITHSUNDEEP
htmlcssangulartypescriptangular-animations
yousif fayed
yousif fayed

Reputation: 341

how to execute a sequence of animation in angular ngFor

Background

Hey, I am currently trying to animate a svg using angular animation, it has several paths and it may change in the future or even be dynamically updated from a serve so I made a list of all paths and added in my type script and using ngFor I add them one by one in the HTML. each path represents a letter.

The problem

I need to add two animations to the svg

what I tried and did already


    const listAnimation = trigger('listAnimation', [
      transition('* <=> *', [
        query(':enter',
        [ 
          style({
                  'stroke-dashoffset': "647", 
                  fill:"#ff000000"
                }),
          stagger('60ms',
                  animate('4500ms ease-out', 
                          style({'stroke-dashoffset': "0", fill:'green'})
                          )
                  )
        ]
        ),
        query('#p2',
        [ 
          style({
                  transform: 'translate(0px, 0px)'
                }),
          stagger('60ms', 
                  animate('1500ms ease-out', 
                          style({transform: 'translate(-25px, -25px)'})
                          )
                  )
        ]
        )
      ])
    ]);

HTML


    <svg *ngIf="show2" id="Logo" [@listAnimation]="pathes.length" width="100%" height="100%" viewBox="-30 -30 765 264" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path *ngFor="let path of pathes; index as i" id={{path.id}} attr.d={{path.d}} stroke="#737373" stroke-width="5" />
    </svg>

what I want and What's Expected

any way that allow me to do the above two animations after each other and repeating the second one endlessly.

code

Here is My StackBlitz code of what I did so far, feel free to edit.

Upvotes: 0

Views: 601

Answers (1)

yousif fayed
yousif fayed

Reputation: 341

turns out all I need to do is either add both query from what i did in a "group" *See this link "Angular Group" to make it go in parallel with eachother. or just simply create a new trigger on a div that contains both "svg and path" then make a new animation const calling it after the first animation which will make it occur one after the other "See this link "angular Animation" as for the endless loop all is to make a function that is called when the animation ends which in return will result in changing the state which will restart the animation again and so on "See this link "Angular triggers" and This Example

Upvotes: 0

Related Questions