i dont mean to be so offtopic but does someone know of a trick to get back into an Instagram account? I was dumb lost the account password. I appreciate any help you can offer me
As a developer, I can tell its really hard to implement but not impossible. I'm really fascinated with such animations. I'm just confused about the precise handoff. There isn't a right tool for all this.
You guys are super negative. The animation looks great and stands out from the slew of basic apps out there all going for the same boring minimalist look. Instagram has to be simple because it's used by billions of people, an app used by thousands has to stand out to appeal to it's smaller market. Animations like this help with that. And as for impossible to develop, animation libraries and tools like Lottie help a lot with that, so it's easier than ever
@Evil Santathank you for the constructive reply. I completely agree multiple device support is definitely a consideration here, and there's no denying that this is more challenging than a traditional app. Personally I think the pros of having a stand out "feature" like this, would make those challenges worth it. It's harder than ever to stand out in the app stores. People would share this app, just to show their friends how cool the animation is
@Evil Santa I see but is it important for such a complex design to be implemented across all devices, I dont think it is important, not all devices can do the same thing, we could attack it with a point of view like, for the people who have invested a lot in their mobile devices will enjoy their mobile devices more. The people who have invested a lot in their mobile devices us as developers will meet them half way and invest a lot of time, passion and care to bring a great experience over to them. to the regular and out of date devices they can have the simple app, I am not yet much of a developer but I don't see it hurtful to think that way.
@Evil Santa as a designer learning to code this is madness, but this guy team develops their concepts, actually there is a link to repo with the component in the description. Look at his site is incredible.
I really like it. And the fluidity of these animations is just lovely. My only suggestion to these onboarding screens would be to put the "Skip" button at the bottom, where it's more reachable by your thumb and it would also be logically placed to the right of the step dots, which are also a part of navigation in this case. Just a little UX improvement.
I’ve been doing this for a long time. But this just makes me want to quit and take to the bottle. What a luxury to be able to hand off to such competent Devs as well... sickeningly good.
this is a very difficult tutorial to follow... it would be super helpful if you said which shortcuts you are doing. the design looks amazing thank you for sharing!
YOU ARE TOTALLY WRONG....! these are to separate works " UIX Design & Sketch WireFrames and Mobilde Development" what Cuberto is doing is just UIX Design, there is no CODE in there...... Mobile developers are the right ones that put code in it in order to Save data into a Data Base, Consume web services to do transactions, API's etc.....
@@poldaddy4905 Yeah I know sir, but it's better if my customer does not see this video :)). That animation is really awesome but It takes so much time to implement and improve that 😚. if my customer want my team do it, my team: "😭😭😭"
You can give a bigger estimation number to the customers if they want these cool features. For me, one day, I will suggest these features to my customers.
Tipical design stuff. That is why frontenders and designers don't get along. You are creating your animation in after affects to look good. What assets would you provide to the people that will be implemting this. "Here's the animation, figure it out". It can be done don't get me wrong, the reason you don't see it is because "this" is hard to implement because the deisgners to their thing (catch the eye) and in reality things don't work that way.
William Candillon implemented this in React Native using a package called reanimated, which make animations run at 60fps. If you are interested, just search "Can It Be Done in React Native" and look out for this video in his channel. But for web, you would probably need something like GSAP and Framer Motion (or any gesture lib) to do it. I don't know exactly how it could be done, but 100% sure it needs SVG and clip-path.
just shows we are far from done as developers, whoever wants to distinguish themselves go through that pain and figure out how to do these complex designs. This seriously attacks that point of view screaming market saturation in development, there's no market saturation if everybody cannot do the same thing
Newbie here. I get it can be done with code but what about the prototype in Figma? Is it possible to "test it out" in the Figma mirror app? Or it is just basically a video demonstration to stakeholders?
no entiendo mucho el video porque no se ingles pero esto se refiere a hacer animaciones simuladas con after effects? o de verdad se puede interactuar desde el telefono para que una accion en la pantalla active esa animacion en la app del telefono?
Hello! Thank you for the video.:) By any chance, did you bring the source code output from After Effect when you applied the motions to your phone after effect? Did you use a plug-in or a program that prints out the source code from After Effect?
At 18:25 mine goes black as soon as I select 'stencil alpha', however, it works if I keep the mode as normal and still change the matte to alpha matte. Anyone know why this might be?
There is no OPPORTUNITY to do this in Android Studio for SURE...... you need to understand the concepts "UIX Design" and "Development", what you are seeing in this video is Just Sketch Design (a Drawing and effects behavior) that's it... No CODE... must of these "Design Tools works" deliver just PSD or XD or Sketch formats, NO CODE...... After this job is done there is a process needed that converts this "Drawings and Look & Feel" in Code to be loaded into an Android project or Xamarin project, or Swift project for IOS. Hope this helps....
i know figma and how to make all those animations.. but it really doesnt make sense how those programs can work together like adobe family using dynamic linking
Join our Patreon channel to get design courses, source AE files and design tips: www.patreon.com/cuberto
how to code man?? this is so hard to code to make it work isn't?
how to bring this prototype live? imagine if this is a website prototype. what's next?
@@battlefist6884 I think Flutter and Flare can make it work easier.
can you make a video explaining all the best tips and tools used when making a simple effect?
i dont mean to be so offtopic but does someone know of a trick to get back into an Instagram account?
I was dumb lost the account password. I appreciate any help you can offer me
Imagine being a dev and the designer gives you this lol
Lol
I would kms
developer: look I'm the best coder here
designer: hold my beer
Then what about full stack😏
But him don´t coded, doing animations in After Effects isn't coding.
@@lelouchlamperouge5910 I think he was being ironic
Desginer: this is my concept
Developer: I hate you!
As a developer, I can tell its really hard to implement but not impossible. I'm really fascinated with such animations. I'm just confused about the precise handoff. There isn't a right tool for all this.
I see why your one of the top companies in the world.
as a beginner in coding, can make fade animation on slide really make me happy.
When seeing this i feel bad for the developers
In the age of minimalism why people are creating such messy design(if just for their satisfaction).
You guys are super negative. The animation looks great and stands out from the slew of basic apps out there all going for the same boring minimalist look. Instagram has to be simple because it's used by billions of people, an app used by thousands has to stand out to appeal to it's smaller market. Animations like this help with that. And as for impossible to develop, animation libraries and tools like Lottie help a lot with that, so it's easier than ever
@Evil Santathank you for the constructive reply. I completely agree multiple device support is definitely a consideration here, and there's no denying that this is more challenging than a traditional app. Personally I think the pros of having a stand out "feature" like this, would make those challenges worth it. It's harder than ever to stand out in the app stores. People would share this app, just to show their friends how cool the animation is
@Evil Santa I see but is it important for such a complex design to be implemented across all devices, I dont think it is important, not all devices can do the same thing, we could attack it with a point of view like, for the people who have invested a lot in their mobile devices will enjoy their mobile devices more.
The people who have invested a lot in their mobile devices us as developers will meet them half way and invest a lot of time, passion and care to bring a great experience over to them.
to the regular and out of date devices they can have the simple app, I am not yet much of a developer but I don't see it hurtful to think that way.
@Evil Santa as a designer learning to code this is madness, but this guy team develops their concepts, actually there is a link to repo with the component in the description. Look at his site is incredible.
I really like it. And the fluidity of these animations is just lovely.
My only suggestion to these onboarding screens would be to put the "Skip" button at the bottom, where it's more reachable by your thumb and it would also be logically placed to the right of the step dots, which are also a part of navigation in this case. Just a little UX improvement.
This is your daily dose of Recommendation
Liquid swipe
I’ve been doing this for a long time. But this just makes me want to quit and take to the bottle. What a luxury to be able to hand off to such competent Devs as well... sickeningly good.
i almost lost my developer motivation. thank god for comment section pulling me back
@Jelwi HAF it's not hard if you know how. I can draw 🏠 and 🌞, but Mona Lisa...
this is a very difficult tutorial to follow... it would be super helpful if you said which shortcuts you are doing. the design looks amazing thank you for sharing!
yea this is so f ing complicated wtf is he doing I have no idea where to start
You guys are an inspiration, I love this!
Love it Love it Love it Love it Love it Love it Love it
can this animation be saved as lottie and implemented with the json file ? And if so it would be nice to have a tutorial on this topic :D
خدارو شکر عالی هستید خدارو شکر کنید که به اینجا رسیدید .
your manager: ETA tomorrow
you as a developer:
this is my
resignation letter
I was actually thinking about how difficult this would be to code.
Frameworks
Code writers should implement not complain.
Brilliant Work! I LOVE IT!
*Awesome!* Liquid Swipe After Effects Animation
Mobile developer: you gonna kill me
Hahahaha
Hold my xml
YOU ARE TOTALLY WRONG....! these are to separate works " UIX Design & Sketch WireFrames and Mobilde Development" what Cuberto is doing is just UIX Design, there is no CODE in there...... Mobile developers are the right ones that put code in it in order to Save data into a Data Base, Consume web services to do transactions, API's etc.....
@@poldaddy4905 Yeah I know sir, but it's better if my customer does not see this video :)). That animation is really awesome but It takes so much time to implement and improve that 😚. if my customer want my team do it, my team: "😭😭😭"
You can give a bigger estimation number to the customers if they want these cool features. For me, one day, I will suggest these features to my customers.
Its awesome with so many creative features. Thank you..
Really amazing ❤️
Wow! Thank you so much bro!!
Did you just create a after effects video on it? I wanted to know how to code it and implement it on the site
Tipical design stuff. That is why frontenders and designers don't get along. You are creating your animation in after affects to look good. What assets would you provide to the people that will be implemting this. "Here's the animation, figure it out". It can be done don't get me wrong, the reason you don't see it is because "this" is hard to implement because the deisgners to their thing (catch the eye) and in reality things don't work that way.
@@ddrweb_ exactly it's hard to implement designs what we think
William Candillon implemented this in React Native using a package called reanimated, which make animations run at 60fps. If you are interested, just search "Can It Be Done in React Native" and look out for this video in his channel. But for web, you would probably need something like GSAP and Framer Motion (or any gesture lib) to do it. I don't know exactly how it could be done, but 100% sure it needs SVG and clip-path.
just shows we are far from done as developers, whoever wants to distinguish themselves go through that pain and figure out how to do these complex designs. This seriously attacks that point of view screaming market saturation in development, there's no market saturation if everybody cannot do the same thing
@@rejoiceregion1524 m
Great tips, thanks for sharing.
That's AWESOME!
UA-cam i already watch this... you can now stop recommending this.
Amaizing ui👌
i love this
nice job! congrats
Wow helpful tutorial. Thank you.
It's so smooth
Amazing 😍
Satan to those designer that show this stuff to developers: first of all, i must say I'm a huge fan
amazing!
designer : so.. this is how it works
dev : so......
I have just subscribed watching few minutes
Cool 😉
Thank you 👍
Just one word. wow.
Só amazing looooooovit toooooo!
You make the animations in after effects so you can show it to your development team?
Yep, Kinda like a concept, or previs.
@@MichaelLuckhardt But at the end and at the end ¿these animations are not triggered by touching the screen?
Music name: 11:52 ??❤
Great!
Relax. It's just for impressing portfolio
Very usefull
22:09 what program is this????
Hey i love your tutorial, don't stop I'll subscribe you sir, thx
is it possible to add this AE animation in XD? or this is just for a presentation purpose?
Wow great
amazing
I feel so bad for developers when i see these kinds of videos😂
Amazing. Thank you,,, 🤘🏻🤘🏻
Thankyou ❤❤❤
why do you hide the shortcut keys?
Thank you so much
The amazing tutorial can you tell me what screen recorder you using?
QuickTime
Very nice
Newbie here. I get it can be done with code but what about the prototype in Figma? Is it possible to "test it out" in the Figma mirror app? Or it is just basically a video demonstration to stakeholders?
no entiendo mucho el video porque no se ingles pero esto se refiere a hacer animaciones simuladas con after effects? o de verdad se puede interactuar desde el telefono para que una accion en la pantalla active esa animacion en la app del telefono?
I like it
Which software u use
how did you convert it into mobile ? where it became touch sensitive ??
This can be possible to make on Figma?
Do you guys offer any course on it?
How to transfer animation to figma?
When the design sooo good = death for developers. Especially that animations 😬😬😬
his trying to killing front end engineer !!!
Woohooo 💓💓💓💓💓
Sickkkk
Looks good but don’t see any link to any bank site?
What is the Motion v2 panel on the left? Nots not naive AE is it?
Hello! Thank you for the video.:)
By any chance, did you bring the source code output from After Effect when you applied the motions to your phone after effect? Did you use a plug-in or a program that prints out the source code from After Effect?
He might have used Lottie to export the file as a JSON file.
I found a same thing in a website, they use liquid menu. And i think, this is the answer 😄
Developer I don't want to die
It looks amazing and want to do it but then I have zero knowledge to code this in app dev XD
At 18:25 mine goes black as soon as I select 'stencil alpha', however, it works if I keep the mode as normal and still change the matte to alpha matte. Anyone know why this might be?
what plugins did you have here
?
is there any possibility to do this in android studio ?? thank you for your amaaazing videos ❤❤❤❤❤
There is no OPPORTUNITY to do this in Android Studio for SURE...... you need to understand the concepts "UIX Design" and "Development", what you are seeing in this video is Just Sketch Design (a Drawing and effects behavior) that's it... No CODE... must of these "Design Tools works" deliver just PSD or XD or Sketch formats, NO CODE...... After this job is done there is a process needed that converts this "Drawings and Look & Feel" in Code to be loaded into an Android project or Xamarin project, or Swift project for IOS. Hope this helps....
@@poldaddy4905
Hi, What is the process to convert that drawing/sketch to CODE ?
Soon these animations will be in no-code environments.
@@poldaddy4905 Ohh alright . thank you brother .. if u dont mind . what is the process that converts this Design ??
@@poldaddy4905 so how is it supposed to be made into an app? 😅😅
Can you please list down the plugins you used here?
can the effect use in react-native?
Can this be done with Adobe XD
It's beautiful
▀██▀▀▀█
─██▄█
─██▀█
▄██ ANTASTIC!
This isn't gonna happen in RL. If you can make it fully in figma, it probbably can, but if you include AE, it's just a play.
It is possible to build app use animation like this ?
Is there any tutorial how to actually develope this using react or flutter? 😅😅
ua-cam.com/video/gLopy2MCAqM/v-deo.html
What i wondering?
I wondering, how to combine figma and adobe ?
Hi, What format did you export the Animation in?
wow
RIP Junior Frontend
What's the name of that beautiful javascript editor with smartphone simulator?
How to do the same animation in a website?
Wait so to apply this in my app i just need the code ? not the whole thing he did with ae ?
Technically the animation shud be done in adobe animate, right?
being a developer, I'm crying
I don't know what happened but i have just hit a button
Can I get the same result on XD, by following these instructions?
Firma seems nothing special compared to Xd
i know figma and how to make all those animations.. but it really doesnt make sense how those programs can work together like adobe family using dynamic linking