Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Reanimated 4.4.0 is here and it can push CSS animations straight to Core Animation on iOS! ✨ What else? Animation Backend integration (behind a flag), useTimestamp hook, and precompiled headers cutting C++ build times on Android. Check out the demo with 25 vs 120 FPS on the UI Thread ⬇️

swmansion's profile picture

Software Mansion

23,028 subscribers

31,222 Aufrufe • vor 4 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

I find it offensive that doing the same thing on iOS is much faster and easier than Android. On WhatsApp, you can swipe left on a message to check delivered/read status. Very useful in group chats. Can’t do it on Android.
0:06

I find it offensive that doing the same thing on iOS is much faster and easier than Android. On WhatsApp, you can swipe left on a message to check delivered/read status. Very useful in group chats. Can’t do it on Android.

Adan

23,452 Aufrufe • vor 3 Jahren

Reanimated 4.3.0 is out with a lot of exciting features! 🚀 ✦ CSS animations for SVG components – animate vector graphics with just a few lines of code ✦ Shared Values on multiple threads at once – easily control animations in apps that already have a lot of multithreaded code And that's not all – check out the full release notes! ⬇️
0:12

Reanimated 4.3.0 is out with a lot of exciting features! 🚀 ✦ CSS animations for SVG components – animate vector graphics with just a few lines of code ✦ Shared Values on multiple threads at once – easily control animations in apps that already have a lot of multithreaded code And that's not all – check out the full release notes! ⬇️

Software Mansion

18,796 Aufrufe • vor 6 Monaten

Player stats UI animation with GPT Image 2 and MiniMax H3. This model is amazing for UI animations. Give GPT Image 2 your character image and ask it to create a stats UI. Then use that UI as a reference for MiniMax H3. You can check the prompt in the replies.
0:15

Player stats UI animation with GPT Image 2 and MiniMax H3. This model is amazing for UI animations. Give GPT Image 2 your character image and ask it to create a stats UI. Then use that UI as a reference for MiniMax H3. You can check the prompt in the replies.

Kōda

42,502 Aufrufe • vor 1 Monat

The new UI is officially ready for testing! ✅ Available now on Android 🍎 Coming soon to iOS We’d love to hear your feedback. Try it out and let us know what you think!
0:17

The new UI is officially ready for testing! ✅ Available now on Android 🍎 Coming soon to iOS We’d love to hear your feedback. Try it out and let us know what you think!

Catacomb Crawlers

45,448 Aufrufe • vor 1 Jahr

Scroll-triggered animations are coming to Chrome early next year (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️
0:19

Scroll-triggered animations are coming to Chrome early next year (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️

Una 🇺🇦

38,782 Aufrufe • vor 9 Monaten

i'm really excited about a new send animation we just released for ChatGPT on iOS! messages and attachments now smoothly morph straight out of the composer and whoosh into the chat instead of sliding up from the bottom. try it out and lmk what you think!
0:19

i'm really excited about a new send animation we just released for ChatGPT on iOS! messages and attachments now smoothly morph straight out of the composer and whoosh into the chat instead of sliding up from the bottom. try it out and lmk what you think!

Naman Kedia

150,822 Aufrufe • vor 20 Tagen

What brought you here, big guy?” 🐻😂 A new funny SFW animation starring Ryan the Bear is out now! If you enjoy my OC animations, please support me on Patreon 💎 More skits and animations coming soon! #bara #animation #funny #furry #cartoon
0:11

What brought you here, big guy?” 🐻😂 A new funny SFW animation starring Ryan the Bear is out now! If you enjoy my OC animations, please support me on Patreon 💎 More skits and animations coming soon! #bara #animation #funny #furry #cartoon

Kamballee

19,506 Aufrufe • vor 8 Monaten

Rendering some of my previous work with Eevee Next! Very impressed with it so far, I simply loaded my old blend file and worked straight away! Also, the compositor can run on the GPU! exciting times ahead! This animation is based on the 240W USB-C charger from EPC #b3d #blender3d #Eevee #electronics #engineering #usbc #Charger #hardware #efficiency #animation #science #geometrynodes Blender 🔶 #kicad #altium
0:11

Rendering some of my previous work with Eevee Next! Very impressed with it so far, I simply loaded my old blend file and worked straight away! Also, the compositor can run on the GPU! exciting times ahead! This animation is based on the 240W USB-C charger from EPC #b3d #blender3d #Eevee #electronics #engineering #usbc #Charger #hardware #efficiency #animation #science #geometrynodes Blender 🔶 #kicad #altium

Sam M

19,249 Aufrufe • vor 2 Jahren

The gold standard fluid interactions on iOS are built using in-process client animations (like SwiftUI does it) and not render-server animations (like CoreAnimation does it). This is common knowledge inside of Apple’s UI framework and system experience teams. A close inspection of iOS’s evolution reveals the gradual upgrading of system experiences written using render-server animations (that often disable user interaction) with ones using client animations (that are interruptible and interactive). The app switcher for iPhone X, the Dynamic Island, and Liquid Glass bars are prime examples of this trend. The other thing that makes these experiences feel so fluid is their use of spring animations that preserve velocity, rather than Bézier curve easing functions. To get velocity preservation, you need to be able to interrupt a spring animation and retarget it or drive it with a gesture. That’s a lot easier to do when the animation is running in the same process as the event handling. When we were first pitching SwiftUI, two of our go-to demos were a recreation of the iOS 9 navigation and Home Screen interactions which were fully interactive and interruptible, at a time when the actual implementations of those experiences in the OS disabled user interaction and ran server-side animations. CoreAnimation is great and the framework does much more than animation. You can build a fine app using its server-side animations. But if your UI framework can’t do efficient main thread client animations, there’s a ceiling to the quality of the experience your app can provide.
0:12

The gold standard fluid interactions on iOS are built using in-process client animations (like SwiftUI does it) and not render-server animations (like CoreAnimation does it). This is common knowledge inside of Apple’s UI framework and system experience teams. A close inspection of iOS’s evolution reveals the gradual upgrading of system experiences written using render-server animations (that often disable user interaction) with ones using client animations (that are interruptible and interactive). The app switcher for iPhone X, the Dynamic Island, and Liquid Glass bars are prime examples of this trend. The other thing that makes these experiences feel so fluid is their use of spring animations that preserve velocity, rather than Bézier curve easing functions. To get velocity preservation, you need to be able to interrupt a spring animation and retarget it or drive it with a gesture. That’s a lot easier to do when the animation is running in the same process as the event handling. When we were first pitching SwiftUI, two of our go-to demos were a recreation of the iOS 9 navigation and Home Screen interactions which were fully interactive and interruptible, at a time when the actual implementations of those experiences in the OS disabled user interaction and ran server-side animations. CoreAnimation is great and the framework does much more than animation. You can build a fine app using its server-side animations. But if your UI framework can’t do efficient main thread client animations, there’s a ceiling to the quality of the experience your app can provide.

Kyle Macomber

192,621 Aufrufe • vor 12 Tagen

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 Aufrufe • vor 4 Monaten

Buy versus build: what are your lessons? "Just because you can build something doesn't mean you should. The best companies are ruthless about focusing on the few things they uniquely own and do better than anyone else. If it's not core to your business or competitive advantage, outsource it and stay focused on what matters." Matan Grinberg Single biggest advice to founders on build vs buy Marc Benioff Brian Halligan Sam Altman Max Junestrand
0:16

Buy versus build: what are your lessons? "Just because you can build something doesn't mean you should. The best companies are ruthless about focusing on the few things they uniquely own and do better than anyone else. If it's not core to your business or competitive advantage, outsource it and stay focused on what matters." Matan Grinberg Single biggest advice to founders on build vs buy Marc Benioff Brian Halligan Sam Altman Max Junestrand

Harry Stebbings

12,046 Aufrufe • vor 3 Monaten

I figure it out. It's the animations. I think Valve may have messed up the third person animation system, animation blending and transitions, foot IK, player positioning, and animation-to-movement synchronization, which can cause players to slide, have broken leg animations, or even clip into the map geometry. I talked before that 26th of April had the best CS2 official build. The feeling was way better, registration was instant, animations looked great, it was enjoyable to play and hold angles. After Cache update everything went downhill. Many asked for proof, I provide link to old build, I played on 60 ping on old build, everything felt amazing. But I couldn't say what was changed. Now after focusing what is happening in my games, it's animations. - People first kill you full running - then you see the counter strafe animation. - Characters clipping into walls, stairs, etc. - Characters sliding all the time. And many other moments where animations look very bad. All my clips are live recordings. And if you check the yt video (PROS PLAY NEW CS2 ANIMGRAPH 2 UPDATE!) You will see how clean it was.
0:14

I figure it out. It's the animations. I think Valve may have messed up the third person animation system, animation blending and transitions, foot IK, player positioning, and animation-to-movement synchronization, which can cause players to slide, have broken leg animations, or even clip into the map geometry. I talked before that 26th of April had the best CS2 official build. The feeling was way better, registration was instant, animations looked great, it was enjoyable to play and hold angles. After Cache update everything went downhill. Many asked for proof, I provide link to old build, I played on 60 ping on old build, everything felt amazing. But I couldn't say what was changed. Now after focusing what is happening in my games, it's animations. - People first kill you full running - then you see the counter strafe animation. - Characters clipping into walls, stairs, etc. - Characters sliding all the time. And many other moments where animations look very bad. All my clips are live recordings. And if you check the yt video (PROS PLAY NEW CS2 ANIMGRAPH 2 UPDATE!) You will see how clean it was.

Kerovski

11,093 Aufrufe • vor 22 Tagen

I was trying to watch this movie the other day and I think this has the worst animation out of every Thomas movie. What on earth is going on with Percy’s face here? Plus, the shading on his eyes look strange the entire movie
0:14

I was trying to watch this movie the other day and I think this has the worst animation out of every Thomas movie. What on earth is going on with Percy’s face here? Plus, the shading on his eyes look strange the entire movie

Duckbirps

11,497 Aufrufe • vor 6 Monaten

🔥The competition is heating up in #PokemonChampions!✨ Train, battle, and rise to the challenge! Do you have what it takes to become a Champion?🏆 Now available on Nintendo Switch and Nintendo Switch 2, as well as iOS and Android mobile platforms!
0:16

🔥The competition is heating up in #PokemonChampions!✨ Train, battle, and rise to the challenge! Do you have what it takes to become a Champion?🏆 Now available on Nintendo Switch and Nintendo Switch 2, as well as iOS and Android mobile platforms!

Pokémon Champions

1,760,292 Aufrufe • vor 1 Monat

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨
0:17

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨

jhey ʕ•ᴥ•ʔ

113,111 Aufrufe • vor 2 Jahren

Grok added a Listen button to top articles so one tap turns the whole piece into high quality audio narration. You can play it hands-free while scrolling your feed, switching apps, or straight from the iOS lock screen. This rolled out first on iOS with Android and web versions coming soon. Source: Tech Yahoo
0:17

Grok added a Listen button to top articles so one tap turns the whole piece into high quality audio narration. You can play it hands-free while scrolling your feed, switching apps, or straight from the iOS lock screen. This rolled out first on iOS with Android and web versions coming soon. Source: Tech Yahoo

Mario Nawfal

86,976 Aufrufe • vor 6 Monaten

$10,000. One winner. One week (July 21–28) Build anything you want straight from your preferred IDE or AI agent, deployed on Base44's backend (database, auth, realtime, integrations, and hosting - all included). Here’s some cool ideas for applications you can build: -Full-stack SaaS -Chrome-extensions -Internal tools -Chat Bots -Headless APIs -Smartwatch widgets or anything else you can think of! Grab 2,000 extra Integration credits by enrolling and telling us what you plan on building in the comments. Link to enroll is in the comments>>>
0:14

$10,000. One winner. One week (July 21–28) Build anything you want straight from your preferred IDE or AI agent, deployed on Base44's backend (database, auth, realtime, integrations, and hosting - all included). Here’s some cool ideas for applications you can build: -Full-stack SaaS -Chrome-extensions -Internal tools -Chat Bots -Headless APIs -Smartwatch widgets or anything else you can think of! Grab 2,000 extra Integration credits by enrolling and telling us what you plan on building in the comments. Link to enroll is in the comments>>>

Base44

59,374 Aufrufe • vor 2 Monaten