I rebuilt the interaction header from CreativeSouth.com built by the folks over at Unfold.

Shoutout to Michael Yonke for the original buildout. 

Creative South - Animated Heading

We're building a community powered media company focused on connecting the Webflow community. 

Global Open House: 
Join us for the largest virtual Webflow community organized meetup of the year. 

Community news: 
Updates from the global Webflow community. Updated daily. 

Featured Events: 
Curated by Colleen Brady

The retreat: 
State of Flow is a one-of-a-kind digital creators retreat hosted by the Webflow community. Join us to learn about visual software development and the future of online work.

Organized by the community:

Raymmar Tirado, Colleen Brady, Melissa Mendez, Johnnie Gomez, Jesse Nieman, Marce Russo

Sponsored by: 

Webflow
Ammo Studio
Edgar Allan
Relume Library
Fri3nds
Flow Ninja
Finsweet
Flow Party


State of Flow

Clone the story guide to access the required footer element for your CloneComp 2021 submissions. 

This site will be updated each day of the competition with a new story block. 

To register for CloneComp or learn more about the competition visit - CloneComp.webflow.io

Thanks to our sponsors for making this possible.

Webflow
Finsweet
LottieFiles
Jetboost
Refokus
EdgarAllan
Weglot
PixelGeek
FlowNinja
Nobull Airtable
Connor Finlayson
Audiovelo
Flowmingo
Memberstack
Rocship
I heart nocode
WebfloWizards

CloneComp 2021 Story Guide

Join us for the world’s largest Webflow hackathon, July 20-23! Put your skills to the test, connect with other makers and create something amazing.

 😲  - More than 20K in cash and prizes!!!

CloneComp is a 3-day remote Webflow cloneable site competition where you’ll build story-driven websites using shared assets for a chance to win cash, prizes, and some serious Webflow community cred. 

Last year’s CloneComp already took the claim of the largest Webflow hackathon ever, and brought to life wildly unique digital experiences showcasing the potential of Webflow in ways that blew our minds. This year it’s gonna be even bigger and better — we’re expecting hundreds of participants spending thousands of hours building and engaging over the 4-day span. There’s lots in store, and we’re ready to take the Webflow community by storm. 

Head to https://clonecomp.webflow.io/ to register and find more details about what’s going down.

clonecomp

Explore a simple words-first template (inspired by Google Docs interface) that I am working on as I collect my thoughts around a book I am writing. 

Currently a single page template, but I will eventually wire it up to the CMS to be able to update and publish new content with ease. 

Feel free to clone it and make it your own.

Writers Template

Continuing the exploration of my sidebar tabbed navigation in the hopes of finding a direction for my personal portfolio. 

Not happy with the hero hover interactions, so I will not be using it for a production site, but figured someone might be able to learn something from it.

Raymmar Retro

Welcome to CloneComp 2020. Clone this site to begin the competition. 

You'll have 24 hours to follow the daily prompts and submit your project to be considered for round specific prizes. 

Overall winner will be announced Friday at 4pm during a live Zoom call/Award ceremony. 

Join us on Slack for real time updates - https://join.slack.com/t/clonecomp/shared_invite/zt-dy9j8kev-CThji6XzTVLH_mpe3wS6vw


Explore CloneComp website for more details - CloneComp.webflow.io

cc-master

Congratulations to Joshua Jacobs for winning the first annual CloneComp challenge. 

Joshua - https://webflow.com/joshwork

Explore the site to learn more about the competition. 

Hosted by: Sarasota Webflow Meetup
Produced by: nocode.video
Site built by: Finsweet

Event sponsored by:

Webflow
Makerpad
Memberstack
nocode.video
Flowbase
Finsweet
Jetboost
CodeCrumbs
Flowmingo

Media partners:

VisualDev.FM 
Nocode.Report

CloneComp

Simple website I built for a friend. Who needs a haircut?

Hair By Taylor Ross

I blended my recent seamless page tabs, along with a phone and background animation to build a fun conversational landing page. The conversations are CMS driven, and load randomly, so you can plug in a bunch of them and create a unique experience for your visitors. 

The portfolio section is a cloneable built by Aaron Rudyk which Icustomized to fit the  theme of this project. Find the original here => https://webflow.com/website/a-project-section-that-slaps

For the contact form, you can thank the folks over at Flowbase. I took one of their popular form templates, and again, made minor modifications to fit the theme. Find the original here => https://webflow.com/website/Webflow-Onboarding-Form-Clone

The site also includes an area to add a custom menu with a Lottie animation as a trigger and the navigation goes from left sidebar to bottom footer for simplicity on mobile devices.

text-message-landing

This website will be used to showcase a virtual concert series we are coordinating over the next few weeks. 

As a fair warning, the site is cloneable, but I have not optimized classes, or named every element properly as I am still building this thing on the fly.

Six Feet Apart

Each icon on this fixed nav element links to a new page which loads seamlessly. 

This is valuable for analytics or conversion tracking while keeping the experience seamless.

Responsive menu adapts to bottom of screen on mobile for ease of use as well. 

Enjoy! 

____________

To customize the menu - 

1- Open the symbol and change the icon image and label
2- Change individual page names to match menu labels
3- Change accent color swatches
4- Build out page content

To add a new page - 

1- Copy the "icon wrap" element in the menu to create a new page link
2- Edit the icon image and label
3- Be sure "Menu transition" interaction is active on the icon wrap link
4- Create a new page and add a page load animation
     4.1- When page starts loading should be set to - "Page Loader" interaction
     4.2- When page finishes loading should be set to - "Page Open" interaction

Leave a comment if you have any questions and check custom code section for Javascript snippet.

Seamless Page Tabs

This is an experimental interface I built a while back for a friend who was starting an entertainment label. We ended up going a different direction with the brand and site design, but I always liked the look and feel of this thing so I am making it cloneable for anyone who wants to go in and explore. 

It's also set up for ecommerce, and works dope on all device sizes, so be sure to check it out on mobile. 

P.s. If anyone can help me figure out how to add scratching sounds when someone scrolls up or down, I'd be down for a collaboration!

Tauro Entertainment (c)

I built a modified YouTube clone and use it to sort and organize top no-code videos from around the web. I update it regularly with new videos and am working on automations to optimize my process.

Memberstack is fully integrated but signups are closed as we are working on some secret stuff to enhance back end functionality. Stay tuned for updates on how you can get involved. 

Clone it, watch it all, delete it all, share it all with a friend, or find a cool way to make it your own. All I ask is that you pay it forward as you learn more about the platform and tools around it.  

Enjoy!

Last update = 01/20/2021

NoCode.Video (YouTube Clone)

Been playing with some design elements for a new portfolio site but I am not sure this is the winner. 

Lots of experimental interactive elements here, and I like some of them, but overall I felt the design was a little heavy and does not translate well to mobile. 

It's cloneable, but complicated. And definitely not the cleanest (no)code. Proceed with caution if you plan on using it for anything other than just learning.

Raymmar.com 0.0.1

Working on a travel blog for a friend, but decided to peel it off and make it cloneable before I turn it over for him to load content. Enjoy.

It's Worth Seeing

Floating video on hover component with a text masthead that follows your mouse cursor across the screen. Released as part of #NoCodeNovember

Floating Hero Video

Scroll through the sections to see the cards stick and shrink into place. 

Scrolling into section 2 reveals a video background element. 

Replace the background video, and play around with the background colors, sizing, and content to get some cool effects here. 

Enjoy.

Raymmar Tirado

About

Skills

About

About