Creatable provides a complete solution for managing the whole process of tying social media posts from creators to products on a brands sites. 

Made in Webflow in under 2 weeks with the powerful Knockout framework by Edgar Allan!

Creatable.io

My first cloneable in almost a year! Created in response to a Facebook post that seemed like a worthy challenge 💪

It was super tough to achieve, using a combination of dropdowns, position sticky, CSS Grid & some mix-blend-mode magic to power the colorful overlays. Mostly no-code, with just of 2 bits of JS: one to achieve the jump links (Webflow doesn't play nice with links inside dropdowns) and another set to reset scroll position when closing the accordions.

A few tips:
• Doesn't work well in Safari
• Need to add more jump links? You'll need to add more lines of JS in the page settings. 
• Additionally, jump links are linked to position: absolute elements within each dropdown, so you'll need to add new ones with new IDs to make it work

Enjoy, and let me know what you think!

Design: 
dribbble.com/shots/12209806-Blurr-Animation

Facebook post: facebook.com/100005276292047/videos/287781939881694/

🪗 Full-Height Funky Accordions 🪗

A 'simple' LVP image accordion xreated in response to a Facebook group question. Implemented using IX2, writing-mode css properties for the vertical text, and a pinch of magic 🧙‍♂️. Gotta love when an easy cloneable comes together!

Lots of maths involved with this implementation..... maths which would need to be re-evaluated if new accordions were added. Note that the original design (https://yesapart.com/en/) switches to a slider on smaller viewports.

Easy Horizontal Image Accordions 🎼

Magnetic buttons are sorta like regular buttons, if regular buttons were zapped to life with witchcraft by html super-wizards from the future 🧲🧙‍♂️🧲🧙‍♂️

In all seriousness, this type of button is a dead-simple, easy way to add effective hover micro-interactions to any website. I hope you enjoy exploring how these buttons were made. Hopefully it helps spread understanding of the power of reusable interactions; one mouse movement interaction powers 90% of the button movement in this project.

Clone away, and let me know what you think in the comments!

*Inspired by this post from CoDrops:
https://tympanus.net/codrops/2020/08/05/magnetic-buttons/

**Like this project?
http://buymeacoffee.com/joshwork

🧲🧙‍♂️ MAGNETIC buttons, from the future! 🧲🧙‍♂️

#CloneComp 2020: Endgame. Hold on to your butts.

Fun fact; all the ships in this project are not screenshots. I cloned each project with a ship in it and duplicated each element from the original project, and resized them using transformations. It took forever.

¯\_(ツ)_/¯

#CloneComp: Endgame • Day 3 | Josh Jacobs, Joshwork

The year is 2047...... and the future was no-code.

All assets handmade by yours truly 💪

If you wanna keep up the visual style, here's how I made my 8-bit assets:
https://www.howtogeek.com/howto/29692/create-cool-8-bit-style-pixel-art-from-ordinary-images/

Looking forward to round 2!

CloneComp Day 1 | Josh Jacobs

NO Javascript, no interactions, just simple, easy-breezy marquees ready to be cloned! The need to create marquees like this for clients has been tremendous recently, so I figured it might be helpful to share with the community!

Note: there will need to be an EVEN number of elements inside your marquees for them to function properly and not skip around. The CSS for each marquee is included inside its container and is denoted with an emoji 👍

Is this cloneable helpful to your workflow? Buy me a coffee! http://buymeacoffee.com/joshwork

👍👌 Easy CSS-only Marquees! 👍👌Easy CSS-only Marquees! 👍👌Easy CSS-only Marquees! 👍👌

As I approach 500 followers, I thought I'd unleash this beast to the public to pick apart!

She was a doozy, I tell you. The toughest part was figuring out how to manipulate the CSS Clip section to create the filled-in effect on hover.

Also big props to the guys at FINSWEET for their ClassAdder tool, which I'm using here to make the images go on top of one another 💪

So, clone away, and let me know what you think in the comments!



Dribble: 𝔅𝔢𝔰𝔱𝔖𝔢𝔯𝔳𝔢𝔡𝔅𝔬𝔩𝔡 - Nightingale Interactions 02 (https://dribbble.com/shots/8023325-Nightingale-Interactions-02)

FINSWEET Class Adder: https://classadder.webflow.io/

Single-Page CMS Portfolio! Dribbble Series ft. 𝔅𝔢𝔰𝔱𝔖𝔢𝔯𝔳𝔢𝔡𝔅𝔬𝔩𝔡

Just using one custom cursor per page? That's old hat. Using the powerful, simple CSS Clip property, you can use a variety of cursors in a single page, opening up the opportunity for some very unique and different explorations of what a cursor can be!

Wanna have your cursor change text between CMS elements? You can do that! How about cursors with different interactions? You can do that too! 

This project just scratches the surface of me exploring the use of multiple different cursors in-page, and I hope you guys in the community use this solution to make some super cool stuff 😎

Looking forward to hearing your thoughts in the comments!

Switch Custom Cursors In-Page Using CSS Clip ✂️

In response to a Facebook group request, here's a custom range slider I made a while back. Not easy to customize, but it does work.

Weblfow Custom Range Slider

Today, my team is launching our annual holiday Web experience! This year we’re encouraging our colleagues to share messages (and GIFs) with one another to celebrate the successes of the year. This has been a labor of love for myself and my team of worker bees for the last month or so, and it feels so good to finally say that it’s launch time. Big shout out to Webflow and Zapier for helping to make this experience possible!

I hope you take some time to dive in to this creation and explore its various nuances. Additionally, I plan on doing a deep dive in the near future to go into aspects of this project that took alot of doing, from creating inline error messages to manipulating 3d transforms that work and implementing the Giphy API. 

Disclaimer: For the purposes of sharing this project, I've removed all references to my company and disconnected the connections in Zapier which power the connections between the builder and CMS, so your submissions won't go through.

☃Holiday GIFt Maker!

Was a little worried that I wasn't going to be able to achieve this effect; the left rail of photos moving with the slider, the text being yellow over the images... it all seemed impossible.

But, as I am constantly finding out, nothing is impossible in Webflow. Made purely with CSS, Interactions, and alot of messing about. Particularly proud of some of the smaller viewport accommodations.

Clone away, and let me know what you think in the comments, or if you're interested in knowing how I made this project come to life.

Strive, "Plaid Dress": https://dribbble.com/shots/6711696-Plaid-Dress

Dynamic Hero Slider! - Dribbble Series ft. Strive

TLDR; people seem to like this circular text with movement, so I thought I'd try and see if I couldn't hack in WF. I did. This is that.

Powered by circletype.js, it's a little wonky and weird with regards to how it's sized... but it works. Includes interactions for page load, scrolling through sections, and for page transitions.

Clone away, and let me know what you think in the comments!

Trendy AF Circular Text

Well.... I redesigned my portfolio again. Despite landing ~20+ freelance leads a month and garnering praise for its aesthetic, it was time to move on.

I've been an Art Director for about two years now, and I felt like that all black and RGB scheme was way too cool for me. This new set-up does a much better job of representing me, both as a designer and as a person. 

Is it perfect? Is it done?
Nope.
But neither am I 👍

Read more on why I redesigned my site here: https://www.joshwork.com/blog/joshwork-update-2021

I owe much of this site's success to the following folks:

🕺 Bobby Rowe, for showing me how emotional color can be.
🧙‍♂️T.ricks - For the typography animation tuts, and general WF wizardry.
🐯 Finsweet for their amazing Classadder.webflow.io tool, which powers my animation pause button.
🚀 Lottieflow, for the various Lottie animations used throughout the site.
👩‍🎤 &Walsh, for developing the awesome Design Emoji.

Joshwork 3.0 - Personal Portfolio, Josh Jacobs

Saw this cool interaction by UI8 on Dribbble and had to try and recreate it! I liked this concept as a hero space, so I added a modern nav to it that goes vertical on MVP to compliment the space. Let me know what you think in the comments, and clone away!

Design credit: "Call to Action" by Anton Tkachev for UI8 (https://dribbble.com/shots/6479771-Qaitomo-Call-To-Action),

Rad Mouse Movement Hero! - Joshwork Dribbble series ft. UI8

As part of a freelance project I've been working on, one of the requirements was a form field which would "predict" what the user was typing. It took me a while to find this solution, but once I found it and implemented it was super simple, and so I thought I'd share it with the community!

Instructions / how to's are in the section below. Enjoy, and let me know what you think!

Predictive Text Form!

Wanted to play around with the new interaction types in IX2, and as always got a little carried away. All the design credit goes to M S Brar's "Capture Moments" (https://dribbble.com/shots/6291284-Capture-Moments), which I tasked myself with building as reference. Really happy with how it came out.

Peep the microinteractions on the menu button and the funky scroll indicator (which changes to reflect the device type you're on 😍).

Lemme know what you think in the comments!

NEW Slider Interactions! - Dribbble Series Ft. M S Brar

I had a dilemma on a recent project; my "related posts" section was 3000 pixels long because all the sections were stacked horizontally. It was a mess. So I decided I'd try something more horizontal; the problem was, my titles were going all over the place, and sliders weren't giving me the flexibility I was looking for.

Thank the lord for position: sticky! using this horizontally, as opposed to in standard vertical fashion, I was able to solve for my problem, to much fanfare. See it live at the link below, clone away, and let me know what you think about this elegantly simple solution!

https://prelogin.zentail.com/blog/product-discovery-happens-on-search-google-shopping-actions

***To make this work right, you'll need to undo all the CMS bindings. I've updated the Webflow document with a second page that has the same elements, just not connected to anything. Copy that one!

Josh Jacobs

About

Skills

About

About