Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Finally my Flowboard project - inspired by work louder® products - is DONE! I ended up taking this opportunity to finally get my hands dirty and learn ThreeJS + R3F. Found an ideal approach for using it with GSAP and Webflow. Here's the result:

dieg0liv's profile picture

Diego Toda de Oliveira

8,428 subscribers

22,385 görüntüleme • 3 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Diego Toda de Oliveira profil fotoğrafı
Diego Toda de Oliveira3 yıl önce

I'm pretty happy with the end result, and I can finally create this type of experience with confidence, with an ideal approach using @Blender to create materials and animations, and @codesandbox cloud to put everything together and generate a static file for Webflow.

Diego Toda de Oliveira profil fotoğrafı
Diego Toda de Oliveira3 yıl önce

Special thanks to @Andersonmancini for walking me through my first steps into the R3F land and really spending time to help me out, and @fdrc_o for helping me find out an ideal process of using CodeSandbox as a dev environment + generating the final assets. You guys rock!

John D Saunders | Web Design & Systems profil fotoğrafı
John D Saunders | Web Design & Systems3 yıl önce

@work_louder @greensock @webflow We gotta hire you for @pigeonsmission we want the most outrageous website. Let me book you for q4 right quick 😂. This is awesome man!

Diego Toda de Oliveira profil fotoğrafı
Diego Toda de Oliveira3 yıl önce

@work_louder @greensock @webflow @pigeonsmission Hahaha thanks dude! And Q4 availability is still open 😉

👀 profil fotoğrafı
👀3 yıl önce

@work_louder @greensock @webflow yessssssss 💥

Josh Loh profil fotoğrafı
Josh Loh3 yıl önce

@work_louder @greensock @webflow Diego, you’re a magician

Diego Toda de Oliveira profil fotoğrafı
Diego Toda de Oliveira3 yıl önce

@work_louder @greensock @webflow

Matthew P Munger profil fotoğrafı
Matthew P Munger3 yıl önce

@work_louder @greensock @webflow Bravissimo 👏 I want this to be real so bad! 😭

Diego Toda de Oliveira profil fotoğrafı
Diego Toda de Oliveira3 yıl önce

@work_louder @greensock @webflow Well, you certainly might have contacts that can make this happen, no? 🥺

work louder® profil fotoğrafı
work louder®3 yıl önce

@greensock @webflow Ohh so cool! Well done💜

Diego Toda de Oliveira profil fotoğrafı
Diego Toda de Oliveira3 yıl önce

@greensock @webflow Thanks, and also thank you for the inspiration! I definitely have to get a Creator Micro soon!

Benzer Videolar

I finished designing and developing the site for MoMoney last July, but the doors of the museum are finally open and now I get to share it with the world! This one was a lot of fun, and Houss (the client) has been incredible to work with — a genuine please. 🎨 Branding by Studio Chong 🖥️ Built in Webflow 🪄 Brought to life using GSAP
0:51

I finished designing and developing the site for MoMoney last July, but the doors of the museum are finally open and now I get to share it with the world! This one was a lot of fun, and Houss (the client) has been incredible to work with — a genuine please. 🎨 Branding by Studio Chong 🖥️ Built in Webflow 🪄 Brought to life using GSAP

Jordan Gilroy

17,531 görüntüleme • 7 ay önce

Finally done with my Tokyo inspired modular environment! It was a great experience and I'm really happy with this personal project, I also learned a lot of lessons from it. Here's a cinematic preview of the project! You can also check it on my Artstation:
1:51

Finally done with my Tokyo inspired modular environment! It was a great experience and I'm really happy with this personal project, I also learned a lot of lessons from it. Here's a cinematic preview of the project! You can also check it on my Artstation:

Shua

40,948 görüntüleme • 3 yıl önce

New #threejs project live using #r3f, GSAP, and a lot of #glsl shader magic for My Muscle Chef 😍. ⚡️Llive link: I will publish a more detailed tutorial teaching some of the tricks as soon as possible 😬. Hope you like it! #threejsJourney
1:23

New #threejs project live using #r3f, GSAP, and a lot of #glsl shader magic for My Muscle Chef 😍. ⚡️Llive link: I will publish a more detailed tutorial teaching some of the tricks as soon as possible 😬. Hope you like it! #threejsJourney

Anderson Mancini

32,145 görüntüleme • 2 yıl önce

⚡️Live: A new project for #havaianas is finally live. An interactive landing page using #threejs and GSAP that shows how the most beloved flip flops in Brazil are created. Congrats to all the Neotix Transformação Digital team. Case study is here:
0:30

⚡️Live: A new project for #havaianas is finally live. An interactive landing page using #threejs and GSAP that shows how the most beloved flip flops in Brazil are created. Congrats to all the Neotix Transformação Digital team. Case study is here:

Anderson Mancini

11,525 görüntüleme • 3 yıl önce

Finally I can share this! My first ever commercial work done for upGrad. Every animated frame is done by me except editing sfx and graphics. Thanks to Harsh Matondkar for the opportunity. Extensively used Freepik - Runway and Kling.
0:20

Finally I can share this! My first ever commercial work done for upGrad. Every animated frame is done by me except editing sfx and graphics. Thanks to Harsh Matondkar for the opportunity. Extensively used Freepik - Runway and Kling.

madpencil_

24,017 görüntüleme • 1 yıl önce

I finally built my own self-driving, personal CRM. After many failed attempts and trying a lot different tools/products, I finally ended up with a system/approach I like built on top of Notion. The best part: It auto-updates, so data never goes stale.
5:41

I finally built my own self-driving, personal CRM. After many failed attempts and trying a lot different tools/products, I finally ended up with a system/approach I like built on top of Notion. The best part: It auto-updates, so data never goes stale.

Johannes Schickling

55,908 görüntüleme • 1 ay önce

was down $200k for this session and came back and ended up in profit this was the last hand to finally get out ended this month with an all time record PnL taking a break for a little ~ it got very sweaty
0:37

was down $200k for this session and came back and ended up in profit this was the last hand to finally get out ended this month with an all time record PnL taking a break for a little ~ it got very sweaty

Ameer Hussain

18,528 görüntüleme • 9 ay önce

✨ NEW PROJECT 💤🌙 → A Digital Guide for a better sleeping quality, built from a Creative to another Creative. This project was part of the #WebflowChallenge and Contra. The project was built to explore seamless integration between Three.js (with Shaders), GSAP, and a No-Code setup in Webflow . I hope you enjoy the experience and gain valuable insights into how to improve your sleep. #VWLab #threejs #creativecoding #gsap
0:48

✨ NEW PROJECT 💤🌙 → A Digital Guide for a better sleeping quality, built from a Creative to another Creative. This project was part of the #WebflowChallenge and Contra. The project was built to explore seamless integration between Three.js (with Shaders), GSAP, and a No-Code setup in Webflow . I hope you enjoy the experience and gain valuable insights into how to improve your sleep. #VWLab #threejs #creativecoding #gsap

Victor Work

24,069 görüntüleme • 9 ay önce

Hi everyone! I'm happy to finally share my portfolio!🏝️ This portfolio is an island where you can explore around to get to know me, my skills, and my work. I hope you enjoy exploring around my island! Go Explore: #threejs #threejsjourney #r3
1:14

Hi everyone! I'm happy to finally share my portfolio!🏝️ This portfolio is an island where you can explore around to get to know me, my skills, and my work. I hope you enjoy exploring around my island! Go Explore: #threejs #threejsjourney #r3

wora_work

735,877 görüntüleme • 9 ay önce

I have been waiting my entire career for this moment, and I am honored to share it with my family and with you! It’s finally done!
0:34

I have been waiting my entire career for this moment, and I am honored to share it with my family and with you! It’s finally done!

John Fogerty

1,599,646 görüntüleme • 3 yıl önce

⚡️Live: It's finally live. My most complete configurator using #threejs to date is live and I'm extremely happy with the result. I'm going to share a series of videos talking about some development secrets soon🤫. I hope you like it😀. #threejsJourney
0:52

⚡️Live: It's finally live. My most complete configurator using #threejs to date is live and I'm extremely happy with the result. I'm going to share a series of videos talking about some development secrets soon🤫. I hope you like it😀. #threejsJourney

Anderson Mancini

90,619 görüntüleme • 3 yıl önce

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f
1:02

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f

Anderson Mancini

12,525 görüntüleme • 1 yıl önce

Excited to finally launch the new 'Sonar Music' website— an interactive journey featuring Quick Views, custom Mixtapes, Soundtracks and more. Huge thanks to my partner in crime Ilja van Eck for the amazing dev support. ⤷ #Webflow #GSAP #Javascript
0:45

Excited to finally launch the new 'Sonar Music' website— an interactive journey featuring Quick Views, custom Mixtapes, Soundtracks and more. Huge thanks to my partner in crime Ilja van Eck for the amazing dev support. ⤷ #Webflow #GSAP #Javascript

Niccolò Miranda

22,366 görüntüleme • 2 yıl önce

Here is the video of what my husband is taking and when he’s taking it! I finally figured out how to get it on here!
3:07

Here is the video of what my husband is taking and when he’s taking it! I finally figured out how to get it on here!

skymeds store | Online Ivermectin Pharmacy

65,116 görüntüleme • 3 ay önce

🚀Super excited to share my latest 3D project with you 🚀 I’m showcasing my 3D projects, experiments & skills. I hope you’ll enjoy it and that it will bring you inspiration and motivation for your upcoming projects. #threejs #creativecoding #R3F
0:33

🚀Super excited to share my latest 3D project with you 🚀 I’m showcasing my 3D projects, experiments & skills. I hope you’ll enjoy it and that it will bring you inspiration and motivation for your upcoming projects. #threejs #creativecoding #R3F

Sébastien Lempens - PIXILA

11,542 görüntüleme • 1 yıl önce

Here's the bulk of my work as a Rough Animator on Avatar Aang: The Last Airbender! It feels so surreal to finally get to share these Massive thanks to @flyingbarkproduction and Christian & Tessa for the opportunity, and to all my leads/supervisors for their incredible guidance!
1:39

Here's the bulk of my work as a Rough Animator on Avatar Aang: The Last Airbender! It feels so surreal to finally get to share these Massive thanks to @flyingbarkproduction and Christian & Tessa for the opportunity, and to all my leads/supervisors for their incredible guidance!

jul 🐯

32,820 görüntüleme • 1 ay önce

It took me forever to figure this out (thanks to my poor math skills 😅) I had to rewrite most of the #ecctrl code to support custom gravity. The basic movement is finally working, but I still need to run more tests and add other features back in 🫠 #threejs #threejsJourney #r3f
0:31

It took me forever to figure this out (thanks to my poor math skills 😅) I had to rewrite most of the #ecctrl code to support custom gravity. The basic movement is finally working, but I still need to run more tests and add other features back in 🫠 #threejs #threejsJourney #r3f

Andrew Chen

22,340 görüntüleme • 2 yıl önce

My debut album THE PROMISED LAND is finally here. This project is more than music to me… it’s my story, my struggles, my growth, and everything I’ve been becoming. Every track carries a piece of my journey. I’ve been waiting for this moment, and I’m proud to finally share it with you all. Go run it up, stream it, feel it, live with it. Welcome to THE PROMISED LAND 🌍✨
0:35

My debut album THE PROMISED LAND is finally here. This project is more than music to me… it’s my story, my struggles, my growth, and everything I’ve been becoming. Every track carries a piece of my journey. I’ve been waiting for this moment, and I’m proud to finally share it with you all. Go run it up, stream it, feel it, live with it. Welcome to THE PROMISED LAND 🌍✨

Evado Lee

18,025 görüntüleme • 5 ay önce

Recap of the highlights from my Portfolio Site. I spent ~572 hours on this site. Made in Webflow with GSAP Sounds like way too much — but I used this project to learn Webflow, GSAP, animation basics, and to get a feeling for web animations. So it happened quite often that I had to rebuild modules after learning something new. Sometimes there were performance drops, which led me to rebuild even more. I used Swup JS for the first time to create a page transition. That took so much time. With this project, I also built a base boilerplate for future projects, so I can create new sites faster. And there were so many other things I tried for the first time. All in all, I learned a lot just by building. Check it out live! Link in the comments.
1:15

Recap of the highlights from my Portfolio Site. I spent ~572 hours on this site. Made in Webflow with GSAP Sounds like way too much — but I used this project to learn Webflow, GSAP, animation basics, and to get a feeling for web animations. So it happened quite often that I had to rebuild modules after learning something new. Sometimes there were performance drops, which led me to rebuild even more. I used Swup JS for the first time to create a page transition. That took so much time. With this project, I also built a base boilerplate for future projects, so I can create new sites faster. And there were so many other things I tried for the first time. All in all, I learned a lot just by building. Check it out live! Link in the comments.

Eduard Bodak

15,936 görüntüleme • 1 yıl önce