Beautiful Router Animations with Angular
HTML-код
- Опубликовано: 8 сен 2024
- Create beautiful 🎨 page transitions with the Angular Router by building four different animation sequences from scratch fireship.io/le...
- Deal Crunch App play.google.co...
- Angular Router angular.io/gui...
- Angular Animations angular.io/gui...
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
When you think you're an advanced Angular user, And then Jeff makes a video :-\
Back to feeling stupid again.. the life of a web developer
seriously dude
I'll need to re-watch this..... Thanks again Jeff
Going to add this to my project at work, I'll mail you a percentage of my paycheck.
Lol, I'll be looking in the mail for that :)
@@Fireship Did you get the mail? Tell me what happend in 100 seconds
thanku so much sir this tutorial help me so much thanku and love from INDIA
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.
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.
@@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.
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.)
```
Any luck getting it to work?
just add ', { optional: true }' (without the quotes) as the last argument of every query, right after ']'.
I needed this tutorial so bad, man! Came right in the nick of time too :)
Always great to hear that! Thanks Rey :)
Thanks for saving my class project by the due day. You are such a brilliant guy.
Jeff is my favourite tech youtuber
Simply wonderful. Thanks
Thanks for this video!
Very helpful, thank you.
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).
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.
do you mind doing a pastebin of this? thanks
how do i call it with style(dir(direction, 0)) ? can you please share a blitz stack or something?
Thank you for all such creative tutorials 🧡
Thank you for watching :)
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.
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?
Same here, did you ever resolve it?
Have you resolved this? I tried placing it all under one function, and tried to inject ForRoot and it still did not work
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.
I'm getting the following error that's preventing the animations from triggering: "query(":enter, :leave")` returned zero elements."
Add '{ optional: true }' to the query. I did not get that locally on the first animation, but that should fix it.
Thanks for the reply! It got rid of the error message, but the animations still do not fire.
@@shaunb Did you add the #outlet="outlet" at the router-outlet element? I was getting the same error, fixed it with that.
Ricardo Zanardo I confirmed that I have added that. Maybe it’s related to material?
@@shaunb same here, not working with site using angular material, did you find a solution?
thanks for the tuto but How I can use the same animation only between some components and not all of the application?
Excellent but Just relax man
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 ?
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 video!! Could this also be used with lazy loaded routes?
Yes, it should work with lazy routes out of the box :)
slider animation not working if consecutive routes has same animation left or right
why its so?
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.
Awesome tutorial.... :)
Slow down 😢
Play on 0.75x
Lol I kept dragging it back. The video was helpful though
Thanks for sharing lot of information
Way to go, looking forward for some more awesome videos
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?
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.
@@user-if1de8pt2j oh that is interesting I will have to throw some Lorem Ipsum in and see what happens!
It works very beautifully on development ... but does not work on production (ng s/b --prod)
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.
love this! thanks!
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
Awesome video very helpful
Hello, why this error console (.Unable to process animations - returned zero elements ) !?
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
terrific!
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'.
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
@@themindstorm9947 Thank you!
@@themindstorm9947 Thanks
@@themindstorm9947 thanks
nothing worked for me, maybe coz I have nested routes?
does he make all of his videos like ctrl + z ?
WooooWooonderfull
Wow! Cool! Thanx!
Here I am sitting and using ejs while seeing these kind of videos. LOL.
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.
Thanks
This is awesome! What can I do to get the deep understanding of code the way you do
Code everyday and try to build cool stuff :) Then try teach it by blogging or making videos
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 }),
])),
])
]),
])
]);
number 1
🥈silver
what if your router outlet is not in app-component?
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.
Hi, how can i add this transitions/animations to another routing ? I havnt got all the components in AppRoutingModule. Thanks!
Anyone else having issues with overflow when routing to a new page?
someone tell this man to demonstrate live instead of coding by copy pasting.. it literally makes me think, I know nothing of angular :/
How do you ensure smooth animations using resolveGuard?
It would be great if you just slow down a litttle bit while speaking and moving on. Will appreciate this!
Still, deserved like!
on default routing , animation not working?
@Fireship will this work on ionic angular? ionic v4
Beautiful tutorial with sweet pace, shirt, smart and interesting,
PS: I love your Editor Font, what font is please?
Keep Rocking,
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.)
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)
Hmmm nice
I´m in 0.75 speed
what is the Font of your editor?
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
I have the issue if you happen to fix it
This is happening to me as well.
Romain Crevecoeur I still haven’t fixed it, I’ve just been building without -prod 😕
I did animations with CSS instead. It's not totally what i exepected but it's good enough
Why so hurry? Please slow down...
What VS code theme are you using?
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".
Awesome content (thank you!).
But why are you in **such** a hurry ALL-THE-TIME ;-) ?
The pace is too fast
Looks very complex :(
These videos are good. But also very fast....
Set the video speed to 0.5
first :P
🥇 gold