@Simon Grimm Is it possible to change the animation direction defending on the active page?. Example First Page --> Second direction forward, Second Page --> Third Page direction Backward.
Hi guys when i want to build its says Error during template compile of 'fancyAnimation' Function expressions are not supported in decorators can you Consider changing the function expression into an exported function. help me ?
@@galaxies_dev Not everywhere, but it's something similar to this: 2.bp.blogspot.com/-SYxpgdCZYdQ/WoYW8x3m0II/AAAAAAAAFEs/m4ZE9gpGwsE1n1SopuBkvbg9_IGzGqgpgCLcBGAs/s1600/intro.gif Basically, to have an element animate from an initial position in one screen to a final position in another, and reverse the animation when going back
my code is ionic 5 in my project it nav-animation.ts file is not invoked and no console was not printed would you know why or is there any solution for that
I think that's an open bug that will be fixed in an upcoming release. In the last version you could only globally supply this, so hopefully soon we can do it on the module level of each page!
Is it possible to use navAnimation for a specific page instead of all pages? Suppose I use this.router.navigate, can I then specify a nav animation somehow? I want different animations for different pages.
Yes! Check out my guest post and the code quite at the bottom, you can directly include a custom navigation when using the router: ionicframework.com/blog/building-interactive-ionic-apps-with-gestures-and-animations/
Hi, there! Great video! I'm having trouble animating page transitions to the same route but with different URL params. Let's say we have a product details page and you click to see the next product page, it's the same Route but with a different product id in the URL. Some internal components are flashing the content because they are in the same route before the animation starts. Do you have any advice on that?
Actually not sure about React, I'd have to check it with Angular.. But overall I guess you should still be able to use a custom animation for a page transition like I described in this post: ionicframework.com/blog/building-interactive-ionic-apps-with-gestures-and-animations/
Hey hi Simon, Thanks for the video. Loved it! So when I tried running the animation on my browser, I am getting this error- "core.js:6241 ERROR TypeError: Cannot read property 'play' of undefined at HomePage.toggleAnimation"
Excelent Simon, allways strait to the point and usefull. I was wonder if this can be apply to Ion-tab as well, i tried with all my poor knowlege on Ionic and acomplished nothing xD
@SimonGrimm I love your work. your style of explaining is best can you make a video on Shared Animation with list items on ionic it would be very helpful
@SimonGrimm I greatly appreciate your work. your style of explaining is really awesome can you make a video on Shared Animation with list items on ionic it would be very helpful
@@galaxies_dev Shared or connected animation between two pages the image chosen from a list get displayed in second (details) page. Like this one --- www.joshmorony.com/media/blogimages/sharedtransition.mp4
FINALLY! Simon you are a beast! I was waiting for a video with the Page transitions topic and I love it!
Amazing, thanks!
Glad you liked it :)
@Simon Grimm Is it possible to change the animation direction defending on the active page?. Example First Page --> Second direction forward, Second Page --> Third Page direction Backward.
Hi guys when i want to build its says Error during template compile of 'fancyAnimation'
Function expressions are not supported in decorators can you
Consider changing the function expression into an exported function.
help me ?
Awesome vid, can you help me? why does opacity work but transform translate doesnt work
Great video, how would it be a good way to implement shared element transitions with this approach? Similar to what the Play Store does with images.
I'm not sure what the play store does with images?
@@galaxies_dev Not everywhere, but it's something similar to this: 2.bp.blogspot.com/-SYxpgdCZYdQ/WoYW8x3m0II/AAAAAAAAFEs/m4ZE9gpGwsE1n1SopuBkvbg9_IGzGqgpgCLcBGAs/s1600/intro.gif
Basically, to have an element animate from an initial position in one screen to a final position in another, and reverse the animation when going back
my code is ionic 5 in my project it
nav-animation.ts file is not invoked and no console was not printed
would you know why or is there any solution for that
Please do some advanced tutorial on Ionic React
Yes ! Thank you so much i was waiting for this video !
Hope you like it!
Hi Simon, Really love your videos. Thanks
You are very welcome :)
Dude!! great video!! 100% yes.. more videos about this!!!
Thanks! Will do!
Nice tutorial but
How can I make the animation in when browsing tabs?
I cannot detect the change of tabs.
hi simon and thanks for this tutorial ,
did you find any solution to make it works in iOS ?
great tutorial
Thanks!
You saved my day. Thank you!
Glad I could help!
Thanks for the video, Simon! And congrats on the 30K Subs! 100K soon! :))
Long way to go x)
Hi Simon, is possible use different transition for each ionic page?
I think that's an open bug that will be fixed in an upcoming release. In the last version you could only globally supply this, so hopefully soon we can do it on the module level of each page!
Awesome tutorial always.
Thank you Kasim!
Is it possible to use navAnimation for a specific page instead of all pages? Suppose I use this.router.navigate, can I then specify a nav animation somehow?
I want different animations for different pages.
Yes! Check out my guest post and the code quite at the bottom, you can directly include a custom navigation when using the router: ionicframework.com/blog/building-interactive-ionic-apps-with-gestures-and-animations/
Hey Simon, in my app I have a list of items that I want to animate the entrance and exit
You can actually use standard Angular animations for that as well!
@@galaxies_dev Thanks! I actually ended up using them!
this tutorial is fire good looks my brutha
hi Simon! how are you? could you tell me which software do you use for making your video?
I use Screenflow for my screen recordings!
Simon Grimm thanks
Hi Simon, do you know why animations are disabled in ion-tabs?
No I'm not aware of that!
Hi, there! Great video! I'm having trouble animating page transitions to the same route but with different URL params. Let's say we have a product details page and you click to see the next product page, it's the same Route but with a different product id in the URL. Some internal components are flashing the content because they are in the same route before the animation starts.
Do you have any advice on that?
BTW, I'm using Ionic React, don't if this makes difference.
Actually not sure about React, I'd have to check it with Angular.. But overall I guess you should still be able to use a custom animation for a page transition like I described in this post: ionicframework.com/blog/building-interactive-ionic-apps-with-gestures-and-animations/
Hey hi Simon,
Thanks for the video. Loved it!
So when I tried running the animation on my browser, I am getting this error-
"core.js:6241 ERROR TypeError: Cannot read property 'play' of undefined
at HomePage.toggleAnimation"
Hey Simon, Thanks for such a great video... Can you make Video for handle device back button and back navigation by Hardware button?
I will try!
Excelent Simon, allways strait to the point and usefull. I was wonder if this can be apply to Ion-tab as well, i tried with all my poor knowlege on Ionic and acomplished nothing xD
There is no animation between tabs by design, so I guess the answer is no :/
@@galaxies_dev ok, i'll try to implement the swipeable tabs instead so. Thanks! I hope to see your speak in the IoniConf
Good work thanks. Is it possible to make simple games with ionic?
I guess it would, maybe I could do this as a funny little project :D
@SimonGrimm I love your work. your style of explaining is best can you make a video on Shared Animation with list items on ionic it would be very helpful
thanks mate i love it!
Do it on ionic react
@SimonGrimm I greatly appreciate your work. your style of explaining is really awesome can you make a video on Shared Animation with list items on ionic it would be very helpful
What type of list animation would you like to see Koustav?
@@galaxies_dev Shared or connected animation between two pages the image chosen from a list get displayed in second (details) page. Like this one --- www.joshmorony.com/media/blogimages/sharedtransition.mp4
The problem is to build modal animation. Everything behind the animation disappears.
Great video
Thanks!
Hey Simon, can you make a shopping cart tutorial with payment (stripe, paypal) as you said in the other video?
Yeah it's on my list as well!
loving it :)
usefull video!!
Glad it was helpful!
The use of export const name = () => { ... } can cause compile error in production build . Instead you should use export function name(){ ... }
Hmm I never encountered any compiler errors with that syntax? It's the standard ES6 syntax imho!
Cool