Been a little while (2 years actually that I updated my existing site). I got pinged by Stripe that my payments couldn't go to my bank because I didn't have a website that explained what we do.

I did this in 8 hours in. There are no case studies yet - working through that.

Takes you through what we have been working on. There are 3 of us at this BrandWeld Studio now. We still charge freelancer competitive pricing and have been really happy with them enough that we put our pricing on our site!

Check it out here: http://www.brandweld.co

Custom timed slider - might make this a cloneable on webflow if I get enough likes.

Cheers!

brandweldco

Hover animation

100% vegan, 100% natural. We produce natural, healthy, practical and sustainable cosmetics. Our products are vegan, cruelty free and free of toxins that pervade conventional cosmetics. We use the principles of skin food and aromatherapy, taking care of your day, body and mind.

BAZQ - Natural Cosmetics

Tutorial to build mouse interaction here. https://youtu.be/maYjDF1_zMQ

After seeing Niccolò Miranda FatFatFat Festival site I was instantly inspired to see if I could recreate some of the interactions. With my own interpretation I have created a unique micro site with all interactions created in Webflow.

Joseph Berry Music

Welcome to Daily Interaction #107!

This demo showcases a menu that comes out of the menu trigger. When the menu trigger is clicked a set of menu items reveal. This was accomplished by placing the menu wrapper inside of another wrapper with an overflow of hidden. The menu wrapper had a position of absolute so as not to move when the overflow wrapper got larger. Then in the interaction I set the width of the overflow wrapper to 0% initially and then when you click the menu trigger the overflow wrapper becomes 100% width revealing the menu wrapper and the menu items inside of it. I also applied a simple hover effect to the menu items when the menu opens, and the menu trigger turns into an x on click and back to a 3 line menu trigger on second click.

Inspired by: https://codepen.io/speresunko/pen/JvbgWW

https://www.webdevforyou.com/

If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev For You - Daily Interaction #107

Welcome to daily interaction #102!

This one was a lot of fun. It is a profile card that has different shapes scaling and moving over the card on hover. I might do more of these with different shapes and animations. The top circle has social media icons to make it a more functional card, and the bottom has the name of the person in the rectangle.

The part that took the longest was actually adding all the shapes into the card. I used specific wrappers and then positioned certain shapes around the wrapper with a position of absolute. For the rectangles at the bottom I skewed them on the x-axis to -20px. One thing to note, is that when you add a 'move' interaction to these shapes the skew property gets removed so you have to add the skew property as an initial state in the interaction as well.

Happy Webflowing!

Inspired by: https://codepen.io/chhiring90/pen/zLJLBG

And if you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev For You - Daily Interaction #102

Had some free time on my last flight and created this moving 3D balls.
The shapes are made with divs and color gradients... no images or custom code.

Follow my profile to get notified about new tutorials of cool Webflow tricks.

Feel free to clone!

3D interactive balls

Reverse engineered version of Webflow's very own sticky section component found here: https://webflow.com/solutions/freelancers-agencies.  

Details:
- It's using a proxy div (4x) to call the 'Scroll In/Out of View' interactions
- There is custom code in the footer used for video playback controls (starting/stopping video at specific time based on scroll position)
- 100% credit to Webflow team for design and original implementation

Webflow Sticky Sections

Single page scroller for Delorean. Some fun while scrolling animation and 3D perspectives.

Delorean

Flowbase is the largest Webflow resource site for Webflow Experts and Beginners. Cloneable Assets, Templates, Guides, Videos & more.

⁃⁃⁃⁃⁃⁃⁃⁃

🥰 Support Us:

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

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

Flowbase | Webflow Assets & Tutorials

Landing page for our Design Sprint service offering.  Uses in scrolling tracks to navigate content in place of default vertical browser scrolling without using hijacking.

Spruce Rapid

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

Used as a Wordpress Theme, this little gem is available to clone to the Webflow community. Start a fun beautiful blog today. - interested in the Wordpress Version download here: 

https://creativemarket.com/SleeknSimple/2301233-Manka-Personal-Writing-WP-Theme

Manka WF Blog Theme for Download

2018 Trends — Broken Grid

Parallax Zoom Effect Experiment

Experimental multi-step form created with the Webflow slider component.

Clone-away!