A month ago,
@Webflow
tasked us to reinvent their homepage. Together, we fused design, development, motion & WebGL, all with a sharp focus on performance. Ready for its debut at
@WebflowConf
yesterday! Link below, dive in and enjoy!
#webflow
#webgl
We use Lenis a lot (thank you,
@studiofreight
)
So we decided to make a convenient wrapper for it to use in
#webflow
. We've contained all the controls in the script tag and written a fairly comprehensive set up guide. All clonable, right now!
↳
We recently snuck in an update to our studio site.
This might be the last you see of the orb, so go have a play 👀
Built on
@webflow
with a sprinkle of webgl.
#webflow
#webgl
#gsap
Our latest creation, an interactive blank canvas recreation of David Lee’s studio. We’ve packed it with little treats, let’s see what you can find 🔎
↳
#webgl
#threejs
#webflow
Absolutely juiced to receive Site of the Day & Developer awards on
@awwwards
today ❤️🔥❤️🔥❤️🔥
↳ → → 🏆
If anyone is curious to compare, a real-world picture of the studio in the comments 👇
Hey
@webflow
we love the new variables. But here are some improvements to we think would be useful:
- Custom variables
- Import / Export
- Breakpoints
These additions would alow us to migrate variables fully from external stylesheets. More thinking below...
🎉 Congratulations to the winner of the SOTD off-brand. 2023 ! 🏆 This project by
@itsoffbrand
has been elevating brands in unexpected ways since 2020. Check it out here:
#SOTD
A massive shout out to the excellent team at
@Webflow
that we worked with. Webflow is the bedrock our agency stands on, so it was an immense honour to work with you on this. Too many people to tag but you know who you are ✌️
↳
💚 Showcase - OFF+BRAND
@itsoffbrand
are behind the new Webflow site - their own site is just as spectacular.
💻 Webflow, GSAP, Taxi.js -
@unseenco
, WebGL
🛠 ScrollTrigger Flip DrawSVG MorphSVG
site →
showcase →
2/x Crowd Animation
• Single figure model, multiple animations.
• Encode all positions in a texture (rgb = xyz)
• Render instances of the same model with a random offset per isntance to chose an animation.
• Interpolate back and forth.
#webgl
#threejs
Launching something for me today:
I’m working on a course.
All I know about writing code in
#webflow
. From basic js, through animations to really advanced™ things.
Live with this temporary (tiny) landing today, made w/
#webgl
,
#gsap
and
@webflow
→ 👀
Perfromative interactions, transitions and accessibility features were a key remit for our build of The Online School's website. We've captured a few here:
↳
#webgl
#threejs
#gsap
The reality, a studio is never so clean which is why we added the ability to mess things up and add textures. We've taken a little liberty on scaling but overall it remains fairly true to life.
It's been a long road but
@TOS_Edu
is finally live!
The brief was to create a super performant, high converting brochure site to showcase all the great things that The Online School can offer. Treated with some nice shader work of course 😉
Link & more below 👇
Here's the BTS of the "blob".
For the heat spots we used full screen quad on which the mouse is drawing, where values range from 0 (not drawn), to 1 (drawn). Fades over time.
#webgl
#threejs
@samborekpk
@webflow
@webflowconf
It’s OGL. We had <1 month to speed concept and and build a page that gets 150k views a day, and none of us were too familiar with Spline. It wasn’t ever going to be feasible to try and learn it, let alone use a new tool for quick, UAT’d and performant focused concepting.
Being unable to add calcs / max-min / speed / fallbacks or referencing other var's inside variables is a little frustrating as enevitably you end up with two different :root{} sets on different sheets which can mean issues with specificity and make var's difficult to update in js
NEW WEBSITE LIVE💫
We are thrilled to reveal our new 'Morningstar Ventures' website!
It took us a few months, but it was well worth it. Meet the
#supernova
, and let us know what you think in the comments below 🙏
➡️
@samborekpk
@webflow
@webflowconf
Also, not that it would have made any difference here but just to dispel any misconceptions - we, like everyone else, *did not* have access to any of these features before the conference