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

1309657251

1316201488

1316201489

1592612642

1863160016

1905118106

2144870841

2216482092

2351366352

2355632600

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

2401116685

2486364096

2546957535

2789269995

2857348505

2929119789

3112069432

3258716925

3289310561

3313039722

352651922

3557227276

3590523401

3591394191

3686551772

3913199261

3931106129

3934148661

4041193489

4083567884

4092855684

4103643638

4206156914

451433404

622649767

622649768

657188092

737109165

772001133

882147072

938734410

105340574

1120744071

1131151533

1171384976

1185683512

1197475705

1197746894

1229056119

1234765101

1236803103

1290849437

1292405251

130043074

1322655470

1336067073

1350250754

1380896143

1406455659

1418395020

1433303746

143629253

1455163268

1455742168

1457420719

1458975701

1499868407

1501922903

1557989767

1568482678

1587714147

1665126082

1680586027

1753134293

1775656907

183596474

1857805694

1925696804

1928608458

1944913766

1968719184

2031799369

2085494476

2091902242

21336891

214950889

2161096664

2182233325

2193997669

2195150436

2198334698

2224902271

224017973

23146391

2340184165

2348917033

2354820654

2361218180

2388854597

2433588987

2458909760

2465149363

2487845889

2491501114

2494249199

2502070427

2519229707

2524380347

2529408901

2550320370

2605123638

2636510003

2663519398

2685146257

2702114298

2714120603

2715927287

2718510159

274817750

2753418190

2759911512

2776696732

2781896974

2825044701

2860045578

2867851366

2886076224

2886816758

2907110567

2974679073

2978864049

3017737205

3049370236

3081421921

3091005856

3096464966

319846500

3221145664

3229469216

3245744487

3258263545

3330964648

3375039294

3385366709

3446095163

3472268204

347694146

3569511999

3570326623

3576132033

3596166000

3615398992

3639909728

3642392651

3645086757

3649469781

3658032975

3662817404

3672465503

3675601689

368691143

Joshua Fry

About

Skills

About

About