William Candillon
William Candillon
  • 268
  • 5 783 166
Binging with William: Chocolate Cake from Matrix
Previous tutorial inspired from the Matrix: ua-cam.com/video/49QR0wUDMG0/v-deo.html
Source code: github.com/Shopify/react-native-skia/pull/2325
Music by Broke for Free (brokeforfree.bandcamp.com/)
“XXV”
“Juparo”
Переглядів: 3 024

Відео

Time to Fly
Переглядів 24 тис.3 місяці тому
Welcome aboard. Destination is 8ms away.
Heart Beat Animation
Переглядів 4,6 тис.4 місяці тому
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/skia-examples/src/Heartrate Boilerplate: bit.ly/heartrate-boilerplate Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 2:04 Solution 1 10:52 Solution 2
JavaScript Animations in 2024
Переглядів 11 тис.4 місяці тому
The concept was originally introduced by Motion Canvas: motioncanvas.io/ ua-cam.com/video/WTUafAwrunE/v-deo.html Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/skia-examples/src/Generators Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 1:00 Example 1 8:27 Example 2 17:23 Example 3
3D transformations with React Native Skia
Переглядів 7 тис.5 місяців тому
Source code: github.com/Shopify/react-native-skia/pull/2163 Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 2:07 Step 1 9:20 Step 2 12:56 Step 3
Rewind 2023 - Drops of Code
Переглядів 2,7 тис.5 місяців тому
Let me know who you would like to see in 2024. In order of appearance: @Honeypotio @TheCodingTrain @KylieYYing @SoftwareJournal @robmulla @WIRED @romanqc @thedotisblack @TheCoderCoder @LowLevelLearning @Hyperplexed @AndrejKarpathy @CodeWithHarry @kishimisu @jomakaze @SebastianLague @freecodecamp @Fireship @CodeBullet @devaslife @AdrianTwarog @amigoscode @programmersarealsohuman5909 @onesandzero...
Back to the Web
Переглядів 12 тис.8 місяців тому
It's a React Native developer's first love... Technical preview of canvaskit-js is available for all start-react-native.dev/ members
Circular Progress in React Native
Переглядів 9 тис.9 місяців тому
Apple Activity Rings implemented in React Native Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/skia-examples/src/Rings Boilerplate: bit.ly/apple-rings-boilerplate Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 3:12 Background circle 7:02 Circular path 16:55 Sweep Gradient 25:00 Progress head (method 1) 29:42 Pro...
Telegram Dark Mode - “Can it be done in React Native?”
Переглядів 21 тис.9 місяців тому
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season5/src/Telegram Boilerplate: bit.ly/telegram-boilerplate Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 2:43 Setup the gesture 6:24 Take the first snapshot 10:46 Take the second snapshot 12:39 Transition between snapshots 18:16 Concurrent touches 20:44 Styling the statu...
Experimental Blur Gradient in React Native
Переглядів 10 тис.9 місяців тому
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/skia-examples/src/BlurGradient Boilerplate: firebasestorage.googleapis.com/v0/b/start-react-native.appspot.com/o/boilerplates/iphone-wallpaper-boilerplate.zip?alt=media&token=3c3e1a01-2769-49a1-81b7-1fa9eccc55a5 Learn React Native Gestures and Animations at start-react-native.dev/
iPhone wallpapers, but in React Native Skia
Переглядів 7 тис.9 місяців тому
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/skia-examples/src/Wallpaper Boilerplate: firebasestorage.googleapis.com/v0/b/start-react-native.appspot.com/o/boilerplates/iphone-wallpaper-boilerplate.zip?alt=media&token=3c3e1a01-2769-49a1-81b7-1fa9eccc55a5 Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 2:14 Wallpa...
Instagram Stickers - “Can it be done in React Native?”
Переглядів 11 тис.10 місяців тому
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season5/src/Instagram Boilerplate: bit.ly/instagram-sticker-boilerplate Learn React Native Gestures and Animations at start-react-native.dev/ Example of Sticker with Skia: github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Stickers/LocationSticker.tsx Matrix Swap PR in Skia: github.com/Shopify/react-n...
React Native Transitions with Skia
Переглядів 18 тис.Рік тому
@mkbhd announcement: ua-cam.com/video/1eI8HpJtq-s/v-deo.html Transitions: gl-transitions.com/ This code shown in the video relies on an unreleased version of React Native Skia, we will update the link once it's merged: github.com/Shopify/react-native-skia/pull/1542 boilerplate: github.com/Shopify/react-native-skia/tree/transitions-starter/example/src/Examples/Transitions start-react-native.dev/...
My animations are faster than Ben Awad's (and so should yours)
Переглядів 35 тис.Рік тому
shopify.github.io/react-native-skia/ start-react-native.dev/ chapters: 0:00 Intro 1:18 Level 0 3:18 Level 1 5:00 Level 2 5:49 Final Boss
Song of Bloom - “Can it be done in React Native?”
Переглядів 10 тис.Рік тому
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season5/src/SongOfBloom Boilerplate: bit.ly/songofbloom-boilerplate Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 3:22 Mondrian Scratch 11:01 Shredded Art 29:52 Outro 32:16 Teaser
The Joy of Painting with React Native
Переглядів 12 тис.Рік тому
The Joy of Painting with React Native
Riveo Page Curl - “Can it be done in React Native?”
Переглядів 18 тис.Рік тому
Riveo Page Curl - “Can it be done in React Native?”
Skia Shaders and the SDF of a Line
Переглядів 13 тис.Рік тому
Skia Shaders and the SDF of a Line
Rewind 2022 - Coding Adventures
Переглядів 6 тис.Рік тому
Rewind 2022 - Coding Adventures
Gradient along Path with React Native Skia
Переглядів 11 тис.Рік тому
Gradient along Path with React Native Skia
Headspace Player - “Can it be done in React Native?”
Переглядів 21 тис.Рік тому
Headspace Player - “Can it be done in React Native?”
“Can it be done in React Native?” - Season 5 Trailer
Переглядів 10 тис.Рік тому
“Can it be done in React Native?” - Season 5 Trailer
Pedal to the Metal
Переглядів 37 тис.Рік тому
Pedal to the Metal
it's Wordle, but types only
Переглядів 6 тис.Рік тому
it's Wordle, but types only
it's After Effects, but in Remotion
Переглядів 7 тис.Рік тому
it's After Effects, but in Remotion
The React Native Avengers: GestureHandler, Reanimated, and Skia
Переглядів 19 тис.Рік тому
The React Native Avengers: GestureHandler, Reanimated, and Skia
It's Severance, but in React Native
Переглядів 17 тис.2 роки тому
It's Severance, but in React Native
Charts with React Native Skia
Переглядів 50 тис.2 роки тому
Charts with React Native Skia
Introducing Gen-Z Mode
Переглядів 26 тис.2 роки тому
Introducing Gen-Z Mode
Neumorphism in React Native
Переглядів 36 тис.2 роки тому
Neumorphism in React Native

КОМЕНТАРІ

  • @mycode0
    @mycode0 День тому

    Has anyone managed to make the Gestures work. I can only move our my Stickers but can't rotate or resize :/

  • @zzz-1x
    @zzz-1x День тому

    How to animation for it like this video? Thanks you! ua-cam.com/video/t0FD4x0tX4E/v-deo.html

  • @mycloudvip
    @mycloudvip 5 днів тому

    Hi William, is there a way to play an mp4 video (10 sec) in loop as a background? I was able to accomplish it using expo-av but it flickers when it reaches the end of every loop. Any ideas or a better approach with Skia?

    • @wcandillon
      @wcandillon 5 днів тому

      here it is shopify.github.io/react-native-skia/docs/video/

    • @mycloudvip
      @mycloudvip 5 днів тому

      ​@@wcandillon Hi, the useVideo export member is not available on Skia v1.2.3, somehow that is what I have in my project. Is there a trick for force an upgrade? Thanks

  • @mycloudvip
    @mycloudvip 6 днів тому

    Awesome content! Just subscribed to your channel! Merci!

  • @pravinvegare8070
    @pravinvegare8070 10 днів тому

    Hi William, With react-native-lottie library once memory allocated to running Lottie is not removed after its finished. Can this Skottie can remove allocated and is it high execution in IOS ?

    • @wcandillon
      @wcandillon 10 днів тому

      it's possible that some JSI objects would needed to be garbage collected more explicitly. did you try to call gc() from JS? best way is to file a github issue

  • @Thunderstormplus
    @Thunderstormplus 18 днів тому

    It's a good project, but I can't update the last expo sdk 51 properly.

  • @Julianerdoedy
    @Julianerdoedy 18 днів тому

    If you are interested on working with skia in a work context, reach out to me

  • @Julianerdoedy
    @Julianerdoedy 18 днів тому

    Love the paragraph api! Looking forward to play around with the new features!

  • @lukemontana9792
    @lukemontana9792 22 дні тому

    great

  • @lukemontana9792
    @lukemontana9792 22 дні тому

    great

  • @mahmoudezz9193
    @mahmoudezz9193 23 дні тому

    Thank You for the explanation

  • @devsoni351
    @devsoni351 29 днів тому

    hello sir. just come from free code camp video in that video you are using the react-native redash with reanimated v1 and using usePanGestureHandler from redash. can you please make the video to use of redash with v3 reanimated.(heart):)

  • @user-ut9jr5tg1w
    @user-ut9jr5tg1w Місяць тому

    cool..!

  • @JuanGabrielOyolaCardona
    @JuanGabrielOyolaCardona Місяць тому

    Thanks for sharing 😀👍

  • @treyvillafane5349
    @treyvillafane5349 Місяць тому

    For anyone who wants this to animate clockwise: const d = `M ${x2} ${y2} A ${r} ${r} 0 1 1 ${x1} ${y1}`;

  • @faijaanmemon
    @faijaanmemon Місяць тому

    Man you are a blessing In my life and I really mean it .. this is what I wanted to learn and here it is wowwwwww, God bless you !❤️

  • @lsps9150414
    @lsps9150414 Місяць тому

    Does anyone know what app it is in Margelo demo where the messages can be dragged & dropped in chat? 🤯

  • @RobertoTatasciore
    @RobertoTatasciore Місяць тому

    First of all, a massive thank you for all your work. I'm subscribed to your course and since then, I've been able to understand gestures and animations more and more. I've been trying to implement this same logic, adapting the code to the new APIs from Reanimated and RNGH, so using SharedValue and the Gesture APIs, but I haven't been successful. I would be very grateful if you implemented this again with the new APIs since I'm not sure what I'm missing to get it working properly.

    • @wcandillon
      @wcandillon Місяць тому

      Thank you for the kind words, here is an updated tutorial with gesture handler v2: ua-cam.com/video/5yM4NPcTwY4/v-deo.html hope this helps

  • @Lorofol
    @Lorofol Місяць тому

    Can't wait for the actual babish crossover

  • @luizv
    @luizv Місяць тому

    What is the color scheme you use? Also loved how the rgb codes are color highlighted. It's an extension?

  • @rbbrsousa2432
    @rbbrsousa2432 Місяць тому

    How would it look today using reanimated 3?

  • @NikSolanki-wr1cl
    @NikSolanki-wr1cl Місяць тому

    Hey brother what are you using for connect IOS device wireless it is Vicer or scrcpy ? can you tell us ?

  • @ehsankhorasani_
    @ehsankhorasani_ Місяць тому

    browsers interally also use skia as drawing engine! I hope they expose that API so no need to canvaskit

  • @ghfudrs93uuu
    @ghfudrs93uuu 2 місяці тому

    I think this debate was pretty much solved when they decided you need to login to their platform to use expo. I'm not going to use this garbage.

  • @haanghuy
    @haanghuy 2 місяці тому

    Hello, can you make a video about converting base 64 audio data into sound output in react-native? Thank you!

  • @merveillevaneck5906
    @merveillevaneck5906 2 місяці тому

    "how easily" ---- aahhhh yes, very easy mr senior engineer man xP

  • @hungnguyen-dr8mr
    @hungnguyen-dr8mr 2 місяці тому

    Wow I need it! Love 3D object, GLSL and it rotateable!

  • @indasandalscat
    @indasandalscat 2 місяці тому

    Not only great coder but also a baker 😭😭❤️‍🔥

  • @Dimaageev
    @Dimaageev 2 місяці тому

    Wow, that’s something new, very creative, like it 🙌❤️

  • @benschac
    @benschac 2 місяці тому

    note: useAnimation not in redash, check the linked repo. 🔥content ty William!

  • @thisweekinreact
    @thisweekinreact 2 місяці тому

    Yum 🎂 Next cake do the scary numbers

  • @daehyeonmun
    @daehyeonmun 2 місяці тому

    This video inspired me to make a pizza with Skia

    • @wcandillon
      @wcandillon 2 місяці тому

      this is a great idea 💡

  • @mrousavy
    @mrousavy 2 місяці тому

    great recipe!

  • @trifonstatkov477
    @trifonstatkov477 2 місяці тому

    William makes the best content for sure.

  • @degalberto
    @degalberto 2 місяці тому

    .. it is vegan and gluten-free ;-)

  • @YoannBuzenet
    @YoannBuzenet 2 місяці тому

    I want to code AND eat at the same time now 😭

  • @i_youtube_
    @i_youtube_ 2 місяці тому

    Skia is faster than python 😅

  • @tooru
    @tooru 2 місяці тому

    Sorry, I barely understood anything because of the accent.

  • @Filaxsan
    @Filaxsan 2 місяці тому

    Yo! Great stuff guys, and great pres Will! Keep it up 💪

  • @trifonstatkov477
    @trifonstatkov477 2 місяці тому

    Inspiring, but also very humbling video. William knows this stuff so much better than all of us... :D

  • @bleso_a
    @bleso_a 3 місяці тому

    Please how do you make the intros to your videos! They are really amazing!

    • @wcandillon
      @wcandillon 3 місяці тому

      this particular intro is explained here: ua-cam.com/video/eUbj_NxcgKg/v-deo.htmlsi=fL25yObpT4EXF28C&t=717

    • @bleso_a
      @bleso_a 2 місяці тому

      Thank you for sharing! Thank you for all you do! I will bring this into my video editing style. Can you share more about how you use it in your video editing workflow.@@wcandillon

    • @bleso_a
      @bleso_a 2 місяці тому

      I am also going to buy your course on Remotion. If you can make a Skia full course. I will be on the waitlist for this. Amazing work. I am also a Tech UA-camr, so I know the work you put in. Amazing!

  • @bleso_a
    @bleso_a 3 місяці тому

    Please how do you make the intros to your videos! They are really amazing!

  • @user-cx8rl2cd2l
    @user-cx8rl2cd2l 3 місяці тому

    Cool job

  • @Alperic27
    @Alperic27 3 місяці тому

    man … .. all that was missing was tim cook … .. next time, try to have some unique ideas… dunno, maybe starting with just choosing your own words…. 🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️

  • @Birkullanci
    @Birkullanci 3 місяці тому

    This indian guy does not look real 3:22

  • @hungnguyen-dr8mr
    @hungnguyen-dr8mr 3 місяці тому

    Cool! Is there new code when using the new libraries? the 'transform2d' no longer exsist from react-native-redash

    • @wcandillon
      @wcandillon 3 місяці тому

      that's literally the topic of next week's video ☺️

  • @JakubSK
    @JakubSK 3 місяці тому

    Oh no, more doom scrolling. Worst UI decision of our era.

  • @jemimaturnbull6326
    @jemimaturnbull6326 3 місяці тому

    Hi William, big fan of your work! If you're taking requests for new content ideas, I'd love to see your breakdown of the new spotify search pills or filtering in the library tab, it's a really cool animation and I'd love to see how you would do it. Also have you worked at all with the slight haptic feedback that is very popular with new apps, what are your thoughts on that? The Chatgpt app is a good example of this.

  • @cristikrs5686
    @cristikrs5686 3 місяці тому

    THANK YOU SO MUCH FOR THIS

  • @jainamsanghvi131
    @jainamsanghvi131 3 місяці тому

    How can we get the currentIndex of the image so we can store the transition to next or previous image. Currently the transition is happening for more then 1 index of image. Can anyone help me with having transition to next or previous offset only.