Animate a 3D render on scroll (same technique as Apple's AirPods Pro site) - Webflow + After Effects

Поділитися
Вставка
  • Опубліковано 12 вер 2024

КОМЕНТАРІ • 282

  • @akimbodotblack
    @akimbodotblack 4 роки тому +379

    Whatever you guys are paying this man and your tutorial team, it's not enough.

  • @kevinloffler2901
    @kevinloffler2901 4 роки тому +55

    Welcome to the Webflow YT channel. The number one C4d education channel!

  • @joshhighburger4137
    @joshhighburger4137 4 роки тому +45

    I'm not the only one to think this but y'all are absolutely blowing these tutorials out of the water, the new style and process is beyond next level, thank y'all as always for these!

  • @fluffyfetlocks
    @fluffyfetlocks 4 роки тому +137

    We did all this in 6 steps
    "FIVE STEPS!"

  • @agw421
    @agw421 2 роки тому +2

    Your deadpan sense of humor is on point for tutorials. 10/10

  • @alystdesign
    @alystdesign 3 роки тому +4

    what i love about webflow is they do tutorials like this. like, what designers literally do on websites.

  • @daniiyalali
    @daniiyalali 4 роки тому +59

    The subtle humor! OMG! Hilarious!

    • @iwasink
      @iwasink 4 роки тому +2

      Daniyal Ali I Agree! At first I thought mehh... probably gonna be boring. But, boy was I wrong! Just the right amount of humor with tremendous teaching. Please make more vids like this!

  • @fedor3000
    @fedor3000 4 роки тому +7

    Great humor + good acting + gold tutorials? God make more is this please I'D WATCH THE SHIT OUT OF THIS

  • @xXVannXx
    @xXVannXx 4 роки тому +5

    this is probably the best tutorial for anything I have seen in a really long time

  • @mindfulmilligan
    @mindfulmilligan Рік тому +1

    Can’t even put into words how much I love this dude. Best tutorials. I’ve ever watched, especially being a designer and watching 1 million of these for everything and in adobe. Cheers.

  • @aizal1468
    @aizal1468 4 роки тому +7

    This was such a good tutorial this guy is amazing his voice and tone was extremely relaxing to listen to as you'd follow along.

  • @DavidCarmonaUX
    @DavidCarmonaUX 4 роки тому +20

    So glad I did a recent tutorial you guys had on this similar experience. I saw the apple site and was hopeful you guys might cover it....no doubt. Epic.

  • @fluffyfetlocks
    @fluffyfetlocks 4 роки тому +401

    Imagine a world where software could be bought and owned

    • @skrumb
      @skrumb 4 роки тому +108

      Just imagine one time payment for all Adobe software.

    • @MakoMako1234321
      @MakoMako1234321 4 роки тому +14

      At least usually when you are using software with subscription business model you have constant updates, bug fixes etc

    • @fluffyfetlocks
      @fluffyfetlocks 4 роки тому +6

      @@skrumb I still have my CS6 copies

    • @fluffyfetlocks
      @fluffyfetlocks 4 роки тому +15

      @@MakoMako1234321 in some cases this is true. When it comes to Adobe products, I feel the new features and improvements added each year do not equate to what I'm expected to pay. Recent things like davinci resolve operate so much better than premiere Pro and yet resolve is free.

    • @MakoMako1234321
      @MakoMako1234321 4 роки тому +1

      @@fluffyfetlocks I have no opinion on adobe products. I mostly use jetbrains software and office 365, and I am kinda happy with it, especially 1TB cloud that comes with office 365

  • @joshualisciarelli6960
    @joshualisciarelli6960 4 роки тому +2

    Love that Webflow is going through the entire tutorial process to help us.

  • @pulsararanavijaya2598
    @pulsararanavijaya2598 4 роки тому +3

    You guys are the best, your video tutorials are unconventional, informative and precise! It makes learning fun and exciting! Keep it going. You've earned a fan for life.

  • @user-gz1ej4ig1q
    @user-gz1ej4ig1q 4 роки тому +4

    This video is amazing. I feel so educated in just 20 mins. Good job

  • @luman1109
    @luman1109 4 роки тому +19

    I really dig the addition of c4d into these tutorials
    Will there be native support for webgl 3d models in the future?

  • @DerekElliott
    @DerekElliott 4 роки тому +6

    These videos are so slick! If you guys ever want to collab I would be happy to do a Blender 3D tutorial aimed at Webflow users!!!

    • @nikothekid-nv7te
      @nikothekid-nv7te Рік тому

      Where is that tutorial, it's been 3 yearssssssssssssss

  • @akshayrajan8793
    @akshayrajan8793 4 роки тому +12

    God I love this guy. Teaching Webflow, and yet I just got 15 minutes of quality C4D education. This is such an incredible tool for someone like me who as a designer, want to design dynamic responsive sites and am never able to find a coder who can pull it off. Now I can do it by my own god damn self! Still getting the hang of it though.

    • @RahulYadav-nk6wp
      @RahulYadav-nk6wp 4 роки тому +1

      You would still need devs to scale your website to handle million clients on your website, do note that you site would need to scale as well. So yeah devs aren't going anywhere, heck they created this tool for mass market. They've moved to big data anyways and other digital data products.

    • @akshayrajan8793
      @akshayrajan8793 4 роки тому +1

      @@RahulYadav-nk6wp well of course. I'm not planning on launching or hosting any sites I just design them. Worrying about finding a good Dev is mostly a client problem.

    • @bryantchou8148
      @bryantchou8148 4 роки тому +1

      @@RahulYadav-nk6wp hosting with Webflow pretty much means you get the scale of an Alexa top 50 website: twitter.com/bryantchou/status/1187777674711687168?s=20 In a way that no rational developer will be able to replicate reliably and cost effectively as Webflow

  • @galaxyrunaway
    @galaxyrunaway 7 місяців тому

    This is exactly what I was looking for and the tutorial itself is OUTSTANDING. God bless you.

  • @danic1492
    @danic1492 9 місяців тому

    these are truly the best tutorials ever. Webflow University is next level!!

  • @tisthallium
    @tisthallium 3 роки тому +1

    I am only 41 seconds in and wow. I have never been this hooked by a tutorial. I feel like I am watching a TV show haha

  • @pecoliky8793
    @pecoliky8793 4 роки тому +103

    World thinnest phone but thinnest is in bolder font
    How dare you

  • @philippedcote
    @philippedcote 3 роки тому +1

    I’m glad we can finally see the face behind that hilarious voice. Congrats for the excellent tutorial and the humor. Keep it up! (I really laughed at the "Bodymovin" part, haha 😂)

  • @joaonunoduarte4271
    @joaonunoduarte4271 3 роки тому +2

    I freaking love the vibe here, damn

  • @K1tteh
    @K1tteh 4 роки тому +32

    i don't care about airpods or web design but this was still fun to watch

  • @TheMetaidea
    @TheMetaidea 4 роки тому +1

    Lol I love how serious you are/look and end up saying extencing lmao! Thanks for this video. I wish we could actually upload the whole model so people can manipulate them fully 3D as if they were using C4D

  • @saschageisler
    @saschageisler 4 роки тому +4

    It sounds so simple yet there is one problem many people have that is not addressed in this video:
    When you create a JSON from an image sequence and make a Lottie animation in Webflow, it stutters and has a short white burst between every single image the first time it plays. You can prevent this by changing the rendering method from SVG to canvas. But then the size of the lottie animation behaves completely weird.
    There are some tricks to still work with it, but it makes the whole feature half useless.

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

    these guys take youtube seriously, love it

  • @hajiimpressions8113
    @hajiimpressions8113 3 роки тому +1

    Now THIS is fascinating. I have been sifting through so much baby garbage to get to this. Believe me, it was worth the effort. Thank you!

  • @Zi7ar21
    @Zi7ar21 4 роки тому +1

    Nice concept, cool to see people replicate it

  • @adidog101
    @adidog101 4 роки тому +1

    You guys are mind readers! I absolutely love this!!

  • @conradaleshire4428
    @conradaleshire4428 2 роки тому

    Y'alls videos are super funny.. "5 Steps."
    Thanks for sharing

  • @Kabarza
    @Kabarza 4 роки тому +4

    PLEASE do more of these. This is crazy good

  • @artdoneus
    @artdoneus 4 роки тому +1

    I'm going to learn everything about webflow. im sold.

  • @nikitakuzmin1624
    @nikitakuzmin1624 4 роки тому +1

    Love your humor and quality videos

  • @glaDos-
    @glaDos- 3 роки тому

    This guy is the grand master of tutorial videos.

  • @JuanMedina-ux9qz
    @JuanMedina-ux9qz 4 роки тому +1

    That was the very BEST GREAT Tutorial intro ever!!!! You just got me sub!!!! Thanks

  • @justinmac
    @justinmac 4 роки тому

    Great tutorial! I actually used Rotato to make a quick 3D element instead and used the same steps as he used to export the jpeg sequence from Bodymovin. Didn't even know bodymovin supported jpeg sequences like that! So cool!

  • @volkerneuhaus565
    @volkerneuhaus565 2 роки тому +1

    Holy awesomeness! Thank you for sharing - this is so useful.

    • @Webflow
      @Webflow  2 роки тому

      Glad it was helpful!

  • @sawbyagnesang
    @sawbyagnesang 2 роки тому

    I absolutely LOST IT at "Extenshing" 🤣

  • @akshitnassa6833
    @akshitnassa6833 3 роки тому

    This is the tutorial I was looking for since ages! Thanks a lot!!

  • @danielyeh1627
    @danielyeh1627 4 роки тому +1

    *That's exactly what I want thank u so much*

  • @trd2418
    @trd2418 4 роки тому

    This man is a hero.

  • @sammile2681
    @sammile2681 4 роки тому

    WOW that is incredible. Perfect explanatory video. Thanks, now I can do a lot more

  • @alejandromedina1019
    @alejandromedina1019 4 роки тому +1

    This is great, any tip on how to export with alpha channel?

  • @thomasscott4081
    @thomasscott4081 3 роки тому

    this guy is great

  • @xojrhl
    @xojrhl 2 роки тому

    You are hilarious! Great work

  • @olivemaxton984
    @olivemaxton984 Рік тому

    Need to see the BTS of these videos 😂

  • @oiausdlkasuldhflaksjdhoiausydo
    @oiausdlkasuldhflaksjdhoiausydo 4 роки тому +1

    I just came here to listen to his soothing and commanding voice

  • @davi_grah
    @davi_grah Рік тому

    This is next level tutorial, thanks!

  • @Reitbajdesign
    @Reitbajdesign 4 роки тому +2

    So good tutorial! Why do you export in JPG secuenc instead of video format?I have this doubt since a long time.
    Thanks!!!

    • @Webflow
      @Webflow  4 роки тому

      Great question, Javier! The Bodymovin extension doesn't currently support videos; only images.

  • @daannielism
    @daannielism 4 роки тому +8

    "Extensiong" hahahaha he does it again!!

    • @des7638
      @des7638 4 роки тому

      😂😂😂🤣🤣🤣

  • @GuillaumeHadjean
    @GuillaumeHadjean 4 роки тому

    I seriously asked myself how to develop that when I saw that on the Apple website. Thank you webflow.

    • @PHlophe
      @PHlophe 3 роки тому

      how'd that work out.

  • @00Mucki00
    @00Mucki00 4 роки тому

    Finally I found a helpful tutorial and explanation!!

  • @jackdoe1312
    @jackdoe1312 4 роки тому +1

    God! Its amazing! Wow!!

  • @benvsantos
    @benvsantos 2 роки тому

    wow, that's so cool thank you for that

  • @the-brand
    @the-brand 3 роки тому

    🤩🤯🤩 This was AWESOME. Thank you!

  • @konny5173
    @konny5173 3 роки тому +2

    but what if i want the animation to stay centered during the scroll? I want to show a exploded view of the parts of a product.. This was so entertaining btw, so much fun watching!

  • @WPSoul
    @WPSoul Рік тому

    I made this in Lottie, after I played it in the browser, my video card launched into space on collers and now it's reached the nearest star.

  • @abdnahid
    @abdnahid 4 роки тому

    wow. Excellent tutorial. Loved it.

  • @martinXY
    @martinXY 3 роки тому

    21:34 Text speech "Nothing happens"
    21:36 Rotate head CW 15 degrees | eyes front | Text speech "Until we scroll" |

  • @mikepotter
    @mikepotter 4 роки тому +1

    The man behind the voiceover! and he's oh so handsome

  • @daniiyalali
    @daniiyalali 4 роки тому +1

    There has to be a BTS of all of this where everybody is laughing in the background.

  • @ArtyMartyD
    @ArtyMartyD 4 роки тому

    If you guys keep adding features I may have to marry you.

  • @adi-sngh
    @adi-sngh 4 роки тому +2

    0:42 "It takes pictures"🤣🤣🤣

  • @crockpot54
    @crockpot54 4 роки тому

    Incredibly well-quaffed hair. Well done

    • @martinXY
      @martinXY 3 роки тому

      Coiffed. Unless you do something different with hair in your local area that I am unaware of.

  • @tsozik
    @tsozik 4 роки тому

    These tutorials are fire :)

  • @Saspian
    @Saspian 4 роки тому

    this was very helpful

  • @claudiosilva7363
    @claudiosilva7363 4 роки тому +1

    Can you do every tutorial ever done on the web?
    Thanks

  • @yaroslav9492
    @yaroslav9492 4 роки тому

    God! I love you webflow!

  • @danielcarlson9627
    @danielcarlson9627 3 роки тому

    There i was making minecraft blocks in Cinema 4D as a 15 year old so glad i found out i can use that talent for something now lmaoo

  • @ObscureHedgehog
    @ObscureHedgehog 4 роки тому

    What a beast of a tutorial!

  • @elflacosoyyo
    @elflacosoyyo Рік тому

    3...2...1... Genius !

  • @vansserafim
    @vansserafim 4 роки тому

    Need more videos how Apple makes their design

  • @EddieLobanovskiy
    @EddieLobanovskiy 4 роки тому +2

    What needs to happen is some sort of integration with Vectary.

  • @SatnamSingh-mx2uc
    @SatnamSingh-mx2uc 4 роки тому

    Quality of video is 👌👌👏👏

  • @gabrielvoss6251
    @gabrielvoss6251 4 роки тому

    This is AMAZING

  • @taeheekim5850
    @taeheekim5850 4 роки тому

    appreciate for your brief and organized explanation!
    I have one question. Can I apply interaction clone to my tistory skin??

  • @fiordnord
    @fiordnord 4 роки тому +2

    Could you please use Blender instead of Cinema? It's free and just as much capable of doing such animations

    • @Webflow
      @Webflow  4 роки тому +5

      Absolutely! Keep in mind that Cinema 4D Lite (which we use in this video) is already included for free with After Effects.

    • @Zi7ar21
      @Zi7ar21 4 роки тому +1

      Webflow Still not free though
      Blender is the Swiss Army Knife of geek software and can even replace AE

  • @tallneilio
    @tallneilio 4 роки тому +1

    My JSON file is > 10mb. What are the workarounds for uploading this file?

  • @denysp.1667
    @denysp.1667 3 роки тому

    Amazing!!!

  • @iDacian
    @iDacian 4 роки тому

    Wait a 1:00
    Is that MEG WEHRLEN? didn't knew she's your new speech therapist "extenshing"
    Meg is the best at articulate complicated words, and design. 😏

  • @xamznerol
    @xamznerol 4 роки тому

    is this also working for mobile? Love your work!

  • @extornstudio3716
    @extornstudio3716 4 роки тому

    You are awesome!!!!!!!!

  • @Tom-yr5rp
    @Tom-yr5rp 2 роки тому

    Great tutorial, thank you! So this can't be done with PNG, no alpha channel support?

    • @Webflow
      @Webflow  2 роки тому

      You can export alpha channels with Bodymovin. If you need further help, try posting in this thread: discourse.webflow.com/t/keeping-transparency-in-lottie-files/182201

  • @rodrigoleles
    @rodrigoleles 4 роки тому

    It took me more time to install and configure Lottie then to make the whole tutorial

  • @beaumonde6147
    @beaumonde6147 4 роки тому

    Suuuch good tuts y'all. thx from ur friends at Beaumonde

  • @ellojayar
    @ellojayar 3 роки тому

    I thought it is witchcraft when I first saw something like this; now I will implement this on our business page. Thanks for making me laugh several times with your dry humour! ;D

  • @heliusuniverse7460
    @heliusuniverse7460 4 роки тому +2

    why not use three.js, or is that overkill?

    • @chriswithers1353
      @chriswithers1353 4 роки тому

      yeah would be awesome to see some tutorials for that. this technique is great for intense scenes / materials / lighting that would be too heavy to render in real-time, but I would also love to see some examples of how to incorporate simple webgl / threejs scenes into a webflow project. It would be amazing if we could avoid extra libraries like GSAP and just animate those scenes and objects on webflows native interaction timelines!

    • @easyluckable
      @easyluckable 4 роки тому

      You can do it, but because Webflow supports Lottie natively, it’s probably much easier and performs better to use Lottie.

  • @lindon8004
    @lindon8004 4 роки тому

    You are legendary!

  • @sunnydreamscometrue
    @sunnydreamscometrue 3 роки тому

    Hi, great video. Could you do the same using real product pictures/video?

  • @bentheremedia3011
    @bentheremedia3011 4 роки тому +1

    How would you make it stay in the same location like the AirPods animation?

  • @stevewilldoeverything4852
    @stevewilldoeverything4852 Рік тому

    Hey leaving this question here hoping for a reply,
    I have completed all steps but when I go to web flow and try uploading to assets just gets stuck on this like white loop with an arrow.
    Is this only available for people with a higher plan, like im using the free plan will this tutorial work for it?

  • @Vaeshkar
    @Vaeshkar 4 роки тому

    Good response, Webflow. :D

  • @TANUJDARGAN
    @TANUJDARGAN 4 роки тому +2

    my file is to big for webflow even after multiple compression attempts can someone please help

  • @nikhil_mahesan
    @nikhil_mahesan 4 роки тому

    Good information

  • @marcteleki2801
    @marcteleki2801 3 роки тому

    Can you do the same with DaVinci resolve thanks for the great video l

  • @stanislavslavev2265
    @stanislavslavev2265 4 роки тому

    Love it! Is it possible to do that outside webflow? Like integrate it in wordpress somehow?

    • @stanislavslavev2265
      @stanislavslavev2265 4 роки тому

      @@PixelRubble I got it and it's understandable. But as i know everything else in depth also wordpress, I wanted to see what's the workflow with WordPress. Thanks!

  • @user-hi2ue3ed4t
    @user-hi2ue3ed4t 4 роки тому

    A million dollars question! Can this be done in WordPress using Elementor and how? 🤔