Joshua Fry

Discover subdomain site for Endlesss, a collaborative music making app — promoting and exploring their web3 music marketplace.

UX, UI, interaction design and custom development.

Discover Endlesss

I created this effect to help someone out on the Webflow Discord, and I thought I'd make it cloneable in case anyone else wants to use it! I also decided to spice it up a little with some lovely animations from Lottieflow :)

The basic effect is achieved just by setting the header as fixed at a lower z-index than the (relative positioned) content below.

Overlapped Header Effect

Just a quick attempt at replicating something seen elsewhere—can definitely be improved upon but hopefully enough to demonstrate the principle. Interested to see anyone's improvements or other ways of achieving this effect!

You need to have a decent amount of content above and below this at the moment for it to be effective. Play with the interaction assigned to 'outer block' to tweak.

Section based progress line

Duke Makes is a Makerspace in the heart of Leeds. They have a tonne of machines for laser cutting, CNC routing, vinyl cutting, 3D printing, plastic recycling and more, and make bespoke products for a range of clients using a combination of all of the above.

Using existing branding as a base I worked on all aspects of design across UX and UI, as well as creating new icons and styles for this site.

Duke Makes

Using a single 51kb Rive file I demonstrate how you can layer up interactive animations on a Webflow site. In this example I built a background with several different interactive properties, that responds to scroll, mouse input and various other elements on the page.

Rive Multi-layered Interactive Background Tutorial

Technical demo demonstrating how to use a native Webflow tabs element to control a Rive file.

The state machine in the Rive file allows the face to shift between different shapes defined by Rive timelines. This is controlled using a 'number' input, which is then attached to the Webflow tabs using IX2.

Clone this and have a play!

Tabs with Rive

Band website for Capital Party function band 🤘

Full design and development with at least 90% Finsweet Client First styles, plus a little improv.

Capital Party

This is a simple Youtube tabs setup, no CMS — there are a fixed number of tabs each with a different video. A small snippet of code in the <body> section of the page settings stops the current video playing when any tab is clicked. Please don't ask me how to further customise the code as I don't know howwwwwwwwww

Thanks to @samliew and @weebhek for this solution.

youtube-video-tabs

Final day of Clone Comp 2021! I've done a story piece and a game so today I went more traditional web design. I cloned Wyatt's great follow up to my day 1 story so that I could take the green on black aesthetic I hinted at a bit further.

I also wanted to play with Lottie files, as I've not done much with them before, and try out the Jetboost live search functionality. As with Day 3 last year, I paid homage to some of the other projects in the competition! I wanted to input them all but as it was manual that would've taken a while!

Had so much fun this year, thanks to everyone involved!

Clone Comp 2021 Day 3 | Tirawire | Fry

Finsweet Island 2.0! Made entirely with Native Webflow (apart from the 'try again' button!)

I wanted to try and implement some of the game like behaviour I've seen in the competition using only plain Webflow. I'm not sure how other people did it exactly but it was fun finding a way!

I also thought it'd be cool to follow up on this project's theme but add a bunch of features to it as a legit 2.0.

Try and survive and find all the coins!

Clone Comp 2021 Day 2 | Finsweet Island 2.0

Here's my Day 1 project! I wanted to leave a little simple idea for people to continue with, you'll see it at the end... hoping people will want the bird brain to hang around ;)

Clone Comp 2021 Day 1 | Stranded

Demonstrating a cool effect where a sliding highlight box moves around a grid of clickable items. I've also included an alternative fallback for mobile, where the highlight moves based on scroll instead. This is pure experimentation, but could be used as a starting point for something interesting.

Sliding Hover Highlight Effect

Webflow implementation of https://codepen.io/tmrDevelops/pen/vOPZBv by https://twitter.com/tmrDevelops - slightly altered but essentially just dropped in an embed, beautiful stuff!

Colourful Bullerful

Portfolio site for Patch Music, showcasing selected work and partners.

We wanted to have a very classic, minimal design appearance for this, drawing inspiration from old school magazine layouts. I also enjoyed creating the logomark for Patch's brand.

The individual case study pages make it easy to see everything at once with a css grid layout that also exposes a menu to navigate between projects.

A few fun things:
- Flex animated navigation bar
- Sticky section headers
- Copy to clipboard option for email address
- Overlapped footer

I really loved working with Patch Music — if you're ever looking for soundtrack or sound design I strongly recommend giving him a shout!

Patch Music — Portfolio

This is an initial test of building a pairs matching memory game in Webflow! All of the main functionality is native, using interactions and conditional visibility. Small piece of custom code for randomising the order each time.

I'll be updating this at some point and refining a bit — it was built for Webflow Maker Day in about 10 hours, and can still be improved a lot but glad to have figured out the principles! I'll make it clonable when it's a bit tidier.

Credit to @sarkis for leaving the breadcrumbs to the techniques that make this possible!

Match Pairs Game - Sia Sia Bowie Bowie Giraffe Giraffe

This is an example of how to randomly order content on each refresh using custom code. I tried this because the standard random order setting in the CMS wasn't giving a new random order every time (this seems to have been improved now but maybe is still not consistent). Just showcasing because I've seen it requested but was an experiment, may update it a bit later but you can clone it to see how it works.

My example was for when I get a chance to work on some music stuff, pick one or two things I'm going to do at random.

You can see in the custom code there is a class name which has to be assigned to the cards. There's also an non-cms version at /nocms

Randomly Order Cards (with CMS)

A (fake) 3D button using only hover state and a trick with borders to make triangles. Improved thanks to a positioning trick from Sako! Staying away from actual 3D was my preference here in the end due to slight anomalies in positioning when updating the button content.

I've tried so many ways of doing this! Happy with this implementation for now but interested if anyone else has another approach!

Check out the other solutions to this:

Actual 3D from Sako: https://webflow.com/website/3D-Button?s=fry3d

Custom CSS from Zach: https://webflow.com/website/3D-Button-with-Custom-CSS-3dbuttonchallenge

3D Button

Client site: A simple one page site for Sunflower Therapy, a Nottingham based Psychotherapy centre.

This site uses a cross fading image interaction, where the image section remains sticky as you scroll and changes based on the section you're looking at. I felt this was effective for this site since the imagery is purely decorative.

Sunflower Therapy

Fry UX

1070795817

1316201488

1316201489

1567550242

1592612642

1726628865

173927913

1863160016

1905118106

2144870841

2213518682

2216482092

2339906037

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

gpt-4o

gpt-4o-mini

2546957535

2631983062

2789269995

2857348505

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

3023147062

3106924665

3112069432

3120801339

3258716925

3289310561

3313039722

3315729993

3410056804

3410497685

3557227276

3590523401

3591394191

3801251705

3913199261

3934148661

4092855684

4103643638

4206156914

451433404

504462606

622649767

622649768

657188092

665836192

737109165

772001133

882147072

938734410

1004117952

1049811722

105340574

1120744071

1131151533

1157563538

1171384976

1197475705

1229056119

1234765101

1236803103

1250328847

1292405251

130043074

1306352991

1312703771

1322655470

1336067073

1350250754

1380813821

1380896143

1386092744

1406455659

1418395020

1433303746

143629253

1437392009

1455163268

1455742168

1457420719

1458975701

1475952185

1499868407

1501922903

1509255256

1545754914

1557989767

1568482678

1571190444

1575119218

1662541974

1665126082

1680201874

1680586027

1694411451

1701648875

173185438

1753134293

1803820771

183596474

1856326096

1857805694

187681422

1925696804

1928608458

1931880952

1944913766

1968719184

2031799369

2084850560

2085494476

2091902242

21336891

214950889

2161096664

216777687

2182233325

2184630439

2187198051

2193997669

2198334698

2224902271

224017973

2276264697

23146391

2332153945

2340184165

2354820654

2361218180

2378130748

2403993584

2458909760

2465149363

2487845889

2491585091

2494249199

2519229707

2526987152

2529408901

2536248640

2550320370

2571858959

2605123638

2608516337

2636510003

2663519398

2685146257

2709133931

2714120603

2715927287

2718510159

274817750

2753418190

2759911512

2776696732

2781896974

2825044701

Joshua Fry

About

Skills

About

About