William Candillon
William Candillon
  • Видео 268
  • Просмотров 5 783 166
Binging with William: Chocolate Cake from Matrix
Previous tutorial inspired from the Matrix: ruclips.net/video/49QR0wUDMG0/видео.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/ ruclips.net/video/WTUafAwrunE/видео.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: ruclips.net/video/1eI8HpJtq-s/видео.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 2 дня назад

    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 2 дня назад

    How to animation for it like this video? Thanks you! ruclips.net/video/t0FD4x0tX4E/видео.html

  • @mycloudvip
    @mycloudvip 6 дней назад

    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 6 дней назад

      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 7 дней назад

    Awesome content! Just subscribed to your channel! Merci!

  • @pravinvegare8070
    @pravinvegare8070 11 дней назад

    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 11 дней назад

      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 19 дней назад

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

  • @Julianerdoedy
    @Julianerdoedy 19 дней назад

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

  • @lukemontana9792
    @lukemontana9792 23 дня назад

    great

  • @lukemontana9792
    @lukemontana9792 23 дня назад

    great

  • @mahmoudezz9193
    @mahmoudezz9193 24 дня назад

    Thank You for the explanation

  • @devsoni351
    @devsoni351 Месяц назад

    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: ruclips.net/video/5yM4NPcTwY4/видео.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 3 месяца назад

    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: ruclips.net/video/eUbj_NxcgKg/видео.htmlsi=fL25yObpT4EXF28C&t=717

    • @bleso_a
      @bleso_a 3 месяца назад

      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 3 месяца назад

      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 RUclipsr, 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.