Beautiful Router Animations with Angular 

I love that i don't have to spent 30mins on watching tutorial about how to install angular cli and all the basics when i just need what i'm searching for. Thank you

I'll need to re-watch this..... Thanks again Jeff

I've watched so many of your videos in the last 6 months as I've learned FE dev. And this helped me put the final touches on my portfolio site. Thank you so much.

I needed this tutorial so bad, man! Came right in the nick of time too :)

Im a beginner in react and Ive always wondered how they're able to transition to a different route very smoothly. Thanks god I found this.

When you think you're an advanced Angular user, And then Jeff makes a video :-\

I get this error but the animations still work. ``` core.js:15713 ERROR Error: Unable to process animations due to the following failed trigger transitions @routeAnimations has failed due to: - `query(":enter, :leave")` returned zero elements. (Use `query(":enter, :leave", { optional: true })` if you wish to allow this.) - `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.) - `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.) ```

Going to add this to my project at work, I'll mail you a percentage of my paycheck.

Thanks for saving my class project by the due day. You are such a brilliant guy.

thanku so much sir this tutorial help me so much thanku and love from INDIA

Thank you for all such creative tutorials 🧡

Jeff is my favourite tech youtuber

Simply wonderful. Thanks

Thanks for this video!

Awesome video!! Could this also be used with lazy loaded routes?

Beautiful job as always Jeff! I was just working on page flips for the same. Are there any suggestions on when to do animation work using CSS directly vs using Angular Animations?

Very helpful, thank you.

I'm getting the following error that's preventing the animations from triggering: "query(":enter, :leave")` returned zero elements."

thanks for the tuto but How I can use the same animation only between some components and not all of the application?

Way to go, looking forward for some more awesome videos

When I use AOT in "ng build --aot=true", it shows an error: "Functions expressions are not supported in decorators in x references x. Consider changing the function expression into an exported function". But, when I change it to "export function", it shows the same error. Some ideas?

Excellent but Just relax man

ERROR in app/main/containers/app/app.component.ts(32,5): Error during template compile of 'AppComponent' Reference to a non-exported function in 'slider' 'slider' contains the error at app/main/containers/app/route-animations.ts(20,10).

Thanks a lot for a great video. But the problem with this approach is that when you open a route for the first time, it slides from left or right, but what if I want it to slide only when I switch manually and not when I open them from the first time from URL? Basically, I need to cancel the animation if a user comes from the same route or just opened the route for the first time.

This doesn't seem to compile when building with *ng build --prod* . The AOT compiler doesn't like the *[direction]* key specification. A workaround is to create a function that returns the direction object: *export function* dir(direction: 'left' | 'right', value: *number* | *string* ) { *return* direction === 'left' ? { left: value } : { right: value }; } Then call it like so: *style(dir(direction, 0))* . Now it's possible to keep using the same animation function without duplicating it for each direction. ( ! ) Notice the *export* keyword as the AOT compiler requires it.

i implemented similar but routing animation works only on first route , on routing to same component again, the routing animation is not working

Great video on animations. Waiting something on dynamic components, ng-content, ng-container, content management in angular,( for.eg angular.io ) some advance angular concepts.

Slow down 😢

Good video, but...... talk to fast, don't show some pieces of code (imports too). But... It's a great video anyway. Thanks. In your Site, the write version solves this problem. One more point with total 10 :)

Awesome tutorial.... :)

slider animation not working if consecutive routes has same animation left or right why its so?

love this! thanks!

Thanks for sharing lot of information

a question.. when i apply the slide transition , some elements jump in the air untill the slide transition ends and then they jump back to their place.. how do i fix this ?

Awesome video very helpful

is there a way to implement his on an ionic 4 app ? the official ionic docs don't mention any of this, and the documentation page of ion-router-outlet is pretty obscure, it just says that it supports animationBuilder animations, just that, not a word on hwo to implement it.

This is awesome! What can I do to get the deep understanding of code the way you do

why dont you have word wrap turned on ? half my time was wasted just trying to figure out where the heck the slider came from

does he make all of his videos like ctrl + z ?

Beautiful tutorial with sweet pace, shirt, smart and interesting, PS: I love your Editor Font, what font is please? Keep Rocking,

Wow! Cool! Thanx!

Hello, why this error console (.Unable to process animations - returned zero elements ) !?

terrific!

what if your router outlet is not in app-component?

It works very beautifully on development ... but does not work on production (ng s/b --prod)

Here I am sitting and using ejs while seeing these kind of videos. LOL.

It would be great if you just slow down a litttle bit while speaking and moving on. Will appreciate this! Still, deserved like!

nothing worked for me, maybe coz I have nested routes?

Hi, how can i add this transitions/animations to another routing ? I havnt got all the components in AppRoutingModule. Thanks!

I tested this out.. chrome fairly smooth, other browsers 1 to 2 FPS. I wish there was a easier way to do this using GSAP or just straight CSS.

How do you ensure smooth animations using resolveGuard?

If you have eg 5 routes, all this isRight or isLeft will not work as you have to know both source and destination position on the screen

Is anyone else getting this error? ERROR in app/app.component.ts(20,5): Error during template compile of 'AppComponent' Function calls are not supported in decorators but 'slideTo' was called in 'slider' 'slider' calls 'slideTo'.

on default routing , animation not working?

that last stepper animation not working for me please help me! animations:[ fader, slider, transformer, stepper, ], app.routing.modules -> data:{animation:'isRight'} route-animation-> export const stepper = trigger('routeAnimations', [ transition('* *', [ query(':enter, :leave', [ style({ position: 'absolute', left: 0, width: '100%', }), ]), group([ query(':enter', [ animate('2000ms ease', keyframes([ style({ transform: 'scale(0) translateX(100%)', offset: 0 }), style({ transform: 'scale(0.5) translateX(25%)', offset: 0.3 }), style({ transform: 'scale(1) translateX(0%)', offset: 1 }), ])), ]), query(':leave', [ animate('2000ms ease', keyframes([ style({ transform: 'scale(1)', offset: 0 }), style({ transform: 'scale(0.5) translateX(-25%) rotate(0)', offset: 0.35 }), style({ opacity: 0, transform: 'translateX(-50%) rotate(-180deg) scale(6)', offset: 1 }), ])), ]) ]), ]) ]);

What VS code theme are you using?

I come from a plain JS background, I am just starting to build with AngularJS however this whole typescript and module stuff I don't know where to start. Would anyone point me in the right direction linking me to a resource, I want to start doing exactly what Jeff is doing on this video asap.

@Fireship will this work on ionic angular? ionic v4

WooooWooonderfull

Hi Jeff, I've followed your tutorial and the animations work great when using ng serve, but when I try to ng build --prod, I get this error: ERROR in src\app ecipe-builder ecipe-builder.component.ts(9,16): Error during template compile of 'RecipeBuilderComponent' Reference to a non-exported function in 'slider' 'slider' contains the error at src\app ecipe-builder oute-animations.ts(37,10) Any idea why this might be the case for building to production? Thanks

what is the Font of your editor?

Thanks

number 1

someone tell this man to demonstrate live instead of coding by copy pasting.. it literally makes me think, I know nothing of angular :/

Why so hurry? Please slow down...

Anyone else having issues with overflow when routing to a new page?

Awesome content (thank you!). But why are you in **such** a hurry ALL-THE-TIME ;-) ?

The pace is too fast

Can anybody please help me out . I am facing this error `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)

Hmmm nice

I´m in 0.75 speed

These videos are good. But also very fast....

Looks very complex :(

Content is very useful, appreciate it. One suggestion - make video slower which would be more effective. You are in fast-forward mode and sounds like "lfjdkljfsldflskdjfklsdjfl".

first :P