overflow-bg-scroll

Byron Robertson is a communication designer based in Melbourne focusing primarily on digital experiences. He has been working with  the creative industry for the last 5 years – engaging with diverse corporations with a multitude of needs. While he has worked independently he has also collaborated with a number of highly regarded design agencies in Australia.

Bien

10 reusable modern CSS grid layouts inspired by tile patterns, along with 8 tasteful animations. Fully responsive and copy/paste ready for your next project!

CSS Grid Tiles

Design, prototype, and collaborate in 3D for 3D.  Build standalone mobile AR apps or add augmented reality features to existing ones.

Torch - Mobile AR Design and Prototyping

We built this animation for the hero of our page on prototyping, and after a flurry of requests, have decided to make it cloneable for you to pick apart, tinker with, and try to recreate for yourself. Enjoy!

pong-animation

Comparing 6 different approaches to achieving momentum / inertia scrolling. 

Version 1: SmoothScrolling.JS
Version 2: Luxy.JS
Version 3: Rolly.JS
Version 4: Tweenmax.JS (Greensock)
Version 5: Vanilla JS (A)
Version 6: Vanilla JS (B)

*Make sure you preserve the native scrollbar (ie don't use virtual scroll option) when project contains IX2 scroll-based interactions.

*These are proof of concepts that may need further tweaking/optimizing (especially for mobile browsers). In addition, they override native scrolling behavior which can result in unintended consequences - especially on older browsers.

Inertia / Momentum Scrolling

Hey guys,

Here's the first pack of UI elements that I thought I'd share with the community.

Please Note: This project was made 2+ years ago, and doesn't meet our current quality standards. BUT hopefully, it can still help someone <3 
⁃⁃⁃⁃⁃⁃⁃⁃

🥰 Support Us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

⁃⁃⁃⁃⁃⁃⁃

✒️ Licence Notes:

⦿ Images available under CC0 (Unsplash, Pexels, Freepix or Similar)
⦿ Iconography available under CC0 (UpLabs, Flaticon, Noun Project)

Avocado - Webflow UI Kit

Hi, I'm Dan, a UI/UX Designer turned Product Designer based out of Orange County, CA. Available for freelance work.

Dan Machado - Product Designer Based out of Orange County

I decided to recreate a nice looking full-screen navigation. This is not my design. Original source: http://publiclibrary.co.nz.

Full-screen navigation

This was inspired by the following CodePen: https://codepen.io/farmok/full/aYbKOO

Learn about how I used the BEM naming convention to create the page in the following YouTube video: https://www.youtube.com/watch?v=gcKprnFVCUQ

Also, feel free to ask any questions

Background Images with Clipped Text

Just an overview page of the webflow motion ease options :)

motion-ease-overview

Be sure to checkout the Webflow Workshop where I built out the illustration by Ryan Morrison in Webflow.

Watch how to build it: https://www.youtube.com/watch?v=t6lyR3dDyWA

CMS Illustration

section transitions as smooth as butter :)

As seen on the Webflow Workshop on 2/7/2017:
https://youtu.be/tcA1oMy9S7w

In this workshop, we'll be going over how to create a more seem less background transition between each section by using the Webflow scroll interaction.

Here are two examples of this interaction:
https://superduper.wtf
https://helloheco.com

bg-interaction

Heco is the Chicago-based studio of JT Helms and Matt Cowen. We make better user experiences and more interesting brands, and try to find inner peace.

Heco

This is a contact page / business card page template I did. Feel free to clone it and use it any way you'd like!

David Piccinelli

Skills