Beautiful Router Animations with Angular

[@damianboryga1229]

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

[@TreyDubya]

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.

[@TreyDubya]

​@@matiaslopez9915 I used components and routerLink and got it to work. Idk. I had to adjust the data: object from "left" and "right" to be numbered instead. Look at (and copy from) his repo, that really helped me.

[@-0-__-0-]

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.

[@ikezedev]

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

[@reyco1]

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

[@Fireship]

Always great to hear that! Thanks Rey :)

[@CharlesX711967]

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

[@Fireship]

Lol, I'll be looking in the mail for that :)

[@realsandeep]

@@Fireship Did you get the mail? Tell me what happend in 100 seconds

[@zoecarlibur]

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

[@LarsRyeJeppesen]

Back to feeling stupid again.. the life of a web developer

[@minigeek]

seriously dude

[@MercyFromOverwatch2]

Jeff is my favourite tech youtuber

[@tl8990]

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

[@Tonycodes22]

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.) ```

[@akshaykarajgikar3849]

Any luck getting it to work?

[@alexandergerlach4579]

just add ', { optional: true }' (without the quotes) as the last argument of every query, right after ']'.

[@ANUJGROVER01]

Thank you for all such creative tutorials 🧡

[@Fireship]

Thank you for watching :)

[@tobi-osimosu]

Thanks for this video!

[@sauravbhatt5426]

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

[@ericnjanga3245]

Very helpful, thank you.

[@okopyl]

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.

[@kennethkwakye-gyamfi4765]

Slow down 😢

[@LarsRyeJeppesen]

Play on 0.75x

[@randomlee101]

Lol I kept dragging it back. The video was helpful though

[@shyagam]

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.

[@ShaifulBorhan]

do you mind doing a pastebin of this? thanks

[@ApexHighlightReels]

how do i call it with style(dir(direction, 0)) ? can you please share a blitz stack or something?

[@robertomanganelly8725]

Simply wonderful. Thanks

[@LarsRyeJeppesen]

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).

[@yassinekhe466]

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

[@8manjusha]

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

[@avihusiso6888]

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 ?

[@narendrasinghrathore1012]

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.

[@carniattos]

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

[@Fireship]

Yes, it should work with lazy routes out of the box :)

[@ameerpappay6782]

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

[@kamleshmerugu7621]

Way to go, looking forward for some more awesome videos

[@Juanmv05]

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?

[@LarsRyeJeppesen]

Same here, did you ever resolve it?

[@muhammadfirghi5009]

Have you resolved this? I tried placing it all under one function, and tried to inject ForRoot and it still did not work

[@swastikdas9169]

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

[@CodingCatDev]

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?

[@Fireship]

I would use CSS for simple isolated animations like a button hover, but ng animations for things tied to the state of the app, i.e the router state.

[@CodingCatDev]

@@user-if1de8pt2j oh that is interesting I will have to throw some Lorem Ipsum in and see what happens!

[@Xenon77x]

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

[@akbaralimajeed]

Excellent but Just relax man

[@shaunb]

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

[@Fireship]

Add '{ optional: true }' to the query. I did not get that locally on the first animation, but that should fix it.

[@shaunb]

Thanks for the reply! It got rid of the error message, but the animations still do not fire.

[@linkinbrr]

@@shaunb Did you add the #outlet="outlet" at the router-outlet element? I was getting the same error, fixed it with that.

[@shaunb]

Ricardo Zanardo I confirmed that I have added that. Maybe it’s related to material?

[@metalllus]

@@shaunb same here, not working with site using angular material, did you find a solution?

[@ApexHighlightReels]

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

[@metalvarez1]

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.

[@LonliLokli]

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

[@sonoftroy8572]

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

[@Fireship]

Code everyday and try to build cool stuff :) Then try teach it by blogging or making videos

[@MarkStatkus]

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.

[@ThiagoLucioBittencourt]

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 :)

[@islamelsayed7263]

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

[@kokiiito]

love this! thanks!

[@belabztech1055]

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

[@cholasimmons]

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

[@minigeek]

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

[@ahmadartcraft9235]

Awesome tutorial.... :)

[@Agus013013]

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.

[@space_monkey125]

Awesome video very helpful

[@saisreenivas2227]

Thanks for sharing lot of information

[@will_abule]

terrific!

[@AlekseyNew]

Wow! Cool! Thanx!

[@sagnikpradhan3594]

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

[@JuanCruz-uk3qi]

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

[@themindstorm9947]

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'.

[@themindstorm9947]

I have a quick fix for anyone experiencing the same issues: - create three variables: optional, toTheLeft, and toTheRight - assign these variables instead of the slideTo('left') or slideTo('right') functions See the full code here: pastebin.com/H1CKMvw5

[@otaviofrank5902]

@@themindstorm9947 Thank you!

[@HelpUsBelieve]

@@themindstorm9947 Thanks

[@LarsRyeJeppesen]

@@themindstorm9947 thanks

[@surajankita1]

on default routing , animation not working?

[@jeremysistrunk3742]

How do you ensure smooth animations using resolveGuard?

[@theyja1]

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 }), ])), ]) ]), ]) ]);

[@meenakshinegi]

Thanks

[@divinedela9125]

number 1

[@Fireship]

🥈silver

[@NitrosS]

I´m in 0.75 speed

[@ashrafkamal1806]

@Fireship will this work on ionic angular? ionic v4

[@MedracZ]

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

[@Skylark9704]

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

[@alexandergerlach4579]

mine is in header component cause my header wraps the whole app because of angular-material. i just put all the logic in the header.ts file and it works.

[@jorgenorena727]

Why so hurry? Please slow down...

[@theobellash6440]

WooooWooonderfull

[@barjosa31blogspot83]

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

[@kellvivar]

what is the Font of your editor?

[@Boilinglemon]

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

[@romaincrevecoeur5952]

I have the issue if you happen to fix it

[@HelpUsBelieve]

This is happening to me as well.

[@Boilinglemon]

Romain Crevecoeur I still haven’t fixed it, I’ve just been building without -prod 😕

[@romaincrevecoeur5952]

I did animations with CSS instead. It's not totally what i exepected but it's good enough

[@wisesa_dev]

Hmmm nice

[@sisterhood6022]

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

[@ankitabhatt4359]

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.)

[@Mike-qg1we]

Hi, yesterday I've been struggling with these errors - what helped me was changing this -> [@routeAnimations]="prepareRoute(outlet)" into that -> [@fadeInAnimation]="outlet.isActivated ? outlet.activatedRoute : ''" and discarding the function. I know this will leave you with only one animation for route change but this was my goal anyway, and you always can wrap it in a function. Hope someone will find this helpful ;) (btw fadeInAnimation is what my animation is called in route-animations.ts)

[@ciprianlupsa557]

The pace is too fast

[@imaliazhar]

What VS code theme are you using?

[@marcellokabora]

Looks very complex :(

[@veshrajjoshi1]

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".

[@ninipop82]

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

[@Peleshoeloriginal]

Set the video speed to 0.5

[@darshangowda309]

first :P

[@Fireship]

🥇 gold