Clone%20Comp%202020%20Champ%20%uD83D%uDCAA%0AI%20create%20bespoke%20experiences%20%26%20free%20cloneables%20to%20help%20people%20learn%20internet%20stuff.
joshwork has 848 followers on Webflow.
.gif)
Easy%20Horizontal%20Image%20Accordions%20%uD83C%uDFBC
A%20%27simple%27%20LVP%20image%20accordion%20xreated%20in%20response%20to%20a%20Facebook%20group%20question.%20Implemented%20using%20IX2%2C%20writing-mode%20css%20properties%20for%20the%20vertical%20text%2C%20and%20a%20pinch%20of%20magic%20%uD83E%uDDD9%u200D%u2642%uFE0F.%20Gotta%20love%20when%20an%20easy%20cloneable%20comes%20together%21%0A%0ALots%20of%20maths%20involved%20with%20this%20implementation.....%20maths%20which%20would%20need%20to%20be%20re-evaluated%20if%20new%20accordions%20were%20added.%20Note%20that%20the%20original%20design%20%28https%3A//yesapart.com/en/%29%20switches%20to%20a%20slider%20on%20smaller%20viewports.
Tags:
- interactions
- ix2
- cloneable
- clone
- slider
- accordion
- accordions
- joshwork
- webflow
Visit Site
.gif)
%uD83E%uDDF2%uD83E%uDDD9%u200D%u2642%uFE0F%20MAGNETIC%20buttons%2C%20from%20the%20future%21%20%uD83E%uDDF2%uD83E%uDDD9%u200D%u2642%uFE0F
Magnetic%20buttons%20are%20sorta%20like%20regular%20buttons%2C%20if%20regular%20buttons%20were%20zapped%20to%20life%20with%20witchcraft%20by%20html%20super-wizards%20from%20the%20future%20%uD83E%uDDF2%uD83E%uDDD9%u200D%u2642%uFE0F%uD83E%uDDF2%uD83E%uDDD9%u200D%u2642%uFE0F%0A%0AIn%20all%20seriousness%2C%20this%20type%20of%20button%20is%20a%20dead-simple%2C%20easy%20way%20to%20add%20effective%20hover%20micro-interactions%20to%20any%20website.%20I%20hope%20you%20enjoy%20exploring%20how%20these%20buttons%20were%20made.%20Hopefully%20it%20helps%20spread%20understanding%20of%20the%20power%20of%20reusable%20interactions%3B%20one%20mouse%20movement%20interaction%20powers%2090%25%20of%20the%20button%20movement%20in%20this%20project.%0A%0AClone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20in%20the%20comments%21%0A%0A*Inspired%20by%20this%20post%20from%20CoDrops%3A%0Ahttps%3A//tympanus.net/codrops/2020/08/05/magnetic-buttons/%0A%0A**Like%20this%20project%3F%0Ahttp%3A//buymeacoffee.com/joshwork
Tags:
- webflow
- cloneable
- showcase
- interactions
- microinteractions
- buttons
- magnetic
- kinetic
- futuristic
- joshwork
Visit Site
.gif)
%23CloneComp%3A%20Endgame%20%u2022%20Day%203%20%7C%20Josh%20Jacobs%2C%20Joshwork
%23CloneComp%202020%3A%20Endgame.%20Hold%20on%20to%20your%20butts.%0A%0AFun%20fact%3B%20all%20the%20ships%20in%20this%20project%20are%20not%20screenshots.%20I%20cloned%20each%20project%20with%20a%20ship%20in%20it%20and%20duplicated%20each%20element%20from%20the%20original%20project%2C%20and%20resized%20them%20using%20transformations.%20It%20took%20forever.%0A%0A%AF%5C_%28%u30C4%29_/%AF
Tags:
- clonecomp
- clonecomp2020
- joshwork
- space
- gifs
- animation
- interactions
- ix2
- endgame
Visit Site
%23CLONECOMP%20Day%202%20%7C%20Josh%20Jacobs
Some%20monsterous%20no-coder%20is%20going%20around%20making%20everything%208-bit%21%20%0A%0AWhew.%20Day%202%20has%20been%20a%20ROLLERCOASTER.%0A%0AExploring%20Jordan%27s%20file%20and%20her%20setup%20was%20both%20intriguing%20and%20challenging.%20I%20wanted%20to%20keep%20the%20format%20of%20the%20original%20project%20while%20building%20on%20the%20story%20and%20adding%20visual%20flairs%20that%20expand%20the%20existing%20universe%20%28get%20it%2C%20like%20space%3F%3F%3F%29%0A%0AThe%20result%20is%20what%20I%20like%20to%20think%20of%20as%20the%20%22Empire%20Strikes%20Back%22%20of%20cloning.%20Alot%20of%20the%20first%20one%2C%20some%20new%20things%2C%20and%20a%20twist%20ending.%20%0A%0ALooking%20so%20forward%20the%20cloneables%20in%20Day%203.%20If%20they%27re%20any%20bit%20as%20messy%20as%20my%20file....%20it%27s%20gonna%20be%20a%20BLAST.%0A%0AEdit%3A%20Not%20responsive.%20I%20can%20only%20do%20so%20much%20%AF%5C_%28%u30C4%29_/%AF
Tags:
- clonecomp
- clonecomp2020
- cloneable
- day2
- space
- joshwork
Visit Site
CloneComp%20Day%201%20%7C%20Josh%20Jacobs
The%20year%20is%202047......%20and%20the%20future%20was%20no-code.%0A%0AAll%20assets%20handmade%20by%20yours%20truly%20%uD83D%uDCAA%0A%0AIf%20you%20wanna%20keep%20up%20the%20visual%20style%2C%20here%27s%20how%20I%20made%20my%208-bit%20assets%3A%0Ahttps%3A//www.howtogeek.com/howto/29692/create-cool-8-bit-style-pixel-art-from-ordinary-images/%0A%0ALooking%20forward%20to%20round%202%21
Tags:
- clonecomp
- clonecomp2020
- joshwork
- grid%20layout
- cssgrid
- interactions
- ix2
- 8bit
- space
- future
- futuristic
Visit Site
%uD83D%uDC4D%uD83D%uDC4C%20Easy%20CSS-only%20Marquees%21%20%uD83D%uDC4D%uD83D%uDC4CEasy%20CSS-only%20Marquees%21%20%uD83D%uDC4D%uD83D%uDC4CEasy%20CSS-only%20Marquees%21%20%uD83D%uDC4D%uD83D%uDC4C
NO%20Javascript%2C%20no%20interactions%2C%20just%20simple%2C%20easy-breezy%20marquees%20ready%20to%20be%20cloned%21%20The%20need%20to%20create%20marquees%20like%20this%20for%20clients%20has%20been%20tremendous%20recently%2C%20so%20I%20figured%20it%20might%20be%20helpful%20to%20share%20with%20the%20community%21%0A%0ANote%3A%20there%20will%20need%20to%20be%20an%20EVEN%20number%20of%20elements%20inside%20your%20marquees%20for%20them%20to%20function%20properly%20and%20not%20skip%20around.%20The%20CSS%20for%20each%20marquee%20is%20included%20inside%20its%20container%20and%20is%20denoted%20with%20an%20emoji%20%uD83D%uDC4D%0A%0AIs%20this%20cloneable%20helpful%20to%20your%20workflow%3F%20Buy%20me%20a%20coffee%21%20http%3A//buymeacoffee.com/joshwork
Tags:
- clone
- cloneable
- css
- marquee
- joshwork
- css3
- marquees
- webflow
- interactions
Visit Site
.gif)
Single-Page%20CMS%20Portfolio%21%20Dribbble%20Series%20ft.%20%uD835%uDD05%uD835%uDD22%uD835%uDD30%uD835%uDD31%uD835%uDD16%uD835%uDD22%uD835%uDD2F%uD835%uDD33%uD835%uDD22%uD835%uDD21%uD835%uDD05%uD835%uDD2C%uD835%uDD29%uD835%uDD21
As%20I%20approach%20500%20followers%2C%20I%20thought%20I%27d%20unleash%20this%20beast%20to%20the%20public%20to%20pick%20apart%21%0A%0AShe%20was%20a%20doozy%2C%20I%20tell%20you.%20The%20toughest%20part%20was%20figuring%20out%20how%20to%20manipulate%20the%20CSS%20Clip%20section%20to%20create%20the%20filled-in%20effect%20on%20hover.%0A%0AAlso%20big%20props%20to%20the%20guys%20at%20FINSWEET%20for%20their%20ClassAdder%20tool%2C%20which%20I%27m%20using%20here%20to%20make%20the%20images%20go%20on%20top%20of%20one%20another%20%uD83D%uDCAA%0A%0ASo%2C%20clone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20in%20the%20comments%21%0A%0A%0A%0ADribble%3A%20%uD835%uDD05%uD835%uDD22%uD835%uDD30%uD835%uDD31%uD835%uDD16%uD835%uDD22%uD835%uDD2F%uD835%uDD33%uD835%uDD22%uD835%uDD21%uD835%uDD05%uD835%uDD2C%uD835%uDD29%uD835%uDD21%20-%20Nightingale%20Interactions%2002%20%28https%3A//dribbble.com/shots/8023325-Nightingale-Interactions-02%29%0A%0AFINSWEET%20Class%20Adder%3A%20https%3A//classadder.webflow.io/
Tags:
- classadder
- cms
- interactions
- ix2
- dribbble
- joshwork
- portfolio
- hoatzin
- hover
- finsweet
- cloneable
Visit Site
Switch%20Custom%20Cursors%20In-Page%20Using%20CSS%20Clip%20%u2702%uFE0F
Just%20using%20one%20custom%20cursor%20per%20page%3F%20That%27s%20old%20hat.%20Using%20the%20powerful%2C%20simple%20CSS%20Clip%20property%2C%20you%20can%20use%20a%20variety%20of%20cursors%20in%20a%20single%20page%2C%20opening%20up%20the%20opportunity%20for%20some%20very%20unique%20and%20different%20explorations%20of%20what%20a%20cursor%20can%20be%21%0A%0AWanna%20have%20your%20cursor%20change%20text%20between%20CMS%20elements%3F%20You%20can%20do%20that%21%20How%20about%20cursors%20with%20different%20interactions%3F%20You%20can%20do%20that%20too%21%20%0A%0AThis%20project%20just%20scratches%20the%20surface%20of%20me%20exploring%20the%20use%20of%20multiple%20different%20cursors%20in-page%2C%20and%20I%20hope%20you%20guys%20in%20the%20community%20use%20this%20solution%20to%20make%20some%20super%20cool%20stuff%20%uD83D%uDE0E%0A%0ALooking%20forward%20to%20hearing%20your%20thoughts%20in%20the%20comments%21
Tags:
- cursor
- customcursor
- css
- clip
- cssclip
- custom
- desktop
- mixblendmode
- html
- modern
Visit Site
Weblfow%20Custom%20Range%20Slider
In%20response%20to%20a%20Facebook%20group%20request%2C%20here%27s%20a%20custom%20range%20slider%20I%20made%20a%20while%20back.%20Not%20easy%20to%20customize%2C%20but%20it%20does%20work.
Tags:
- range
- slider
- rangeslider
- joshwork
Visit Site
%u2603Holiday%20GIFt%20Maker%21
Today%2C%20my%20team%20is%20launching%20our%20annual%20holiday%20Web%20experience%21%20This%20year%20we%u2019re%20encouraging%20our%20colleagues%20to%20share%20messages%20%28and%20GIFs%29%20with%20one%20another%20to%20celebrate%20the%20successes%20of%20the%20year.%20This%20has%20been%20a%20labor%20of%20love%20for%20myself%20and%20my%20team%20of%20worker%20bees%20for%20the%20last%20month%20or%20so%2C%20and%20it%20feels%20so%20good%20to%20finally%20say%20that%20it%u2019s%20launch%20time.%20Big%20shout%20out%20to%20Webflow%20and%20Zapier%20for%20helping%20to%20make%20this%20experience%20possible%21%0A%0AI%20hope%20you%20take%20some%20time%20to%20dive%20in%20to%20this%20creation%20and%20explore%20its%20various%20nuances.%20Additionally%2C%20I%20plan%20on%20doing%20a%20deep%20dive%20in%20the%20near%20future%20to%20go%20into%20aspects%20of%20this%20project%20that%20took%20alot%20of%20doing%2C%20from%20creating%20inline%20error%20messages%20to%20manipulating%203d%20transforms%20that%20work%20and%20implementing%20the%20Giphy%20API.%20%0A%0ADisclaimer%3A%20For%20the%20purposes%20of%20sharing%20this%20project%2C%20I%27ve%20removed%20all%20references%20to%20my%20company%20and%20disconnected%20the%20connections%20in%20Zapier%20which%20power%20the%20connections%20between%20the%20builder%20and%20CMS%2C%20so%20your%20submissions%20won%27t%20go%20through.
Tags:
- joshwork
- holiday
- 3dtransforms
- error
- builder
- form
- interactions
- slider
- interaction
- ix2
Visit Site
.gif)
Dynamic%20Hero%20Slider%21%20-%20Dribbble%20Series%20ft.%20Strive
Was%20a%20little%20worried%20that%20I%20wasn%27t%20going%20to%20be%20able%20to%20achieve%20this%20effect%3B%20the%20left%20rail%20of%20photos%20moving%20with%20the%20slider%2C%20the%20text%20being%20yellow%20over%20the%20images...%20it%20all%20seemed%20impossible.%0A%0ABut%2C%20as%20I%20am%20constantly%20finding%20out%2C%20nothing%20is%20impossible%20in%20Webflow.%20Made%20purely%20with%20CSS%2C%20Interactions%2C%20and%20alot%20of%20messing%20about.%20Particularly%20proud%20of%20some%20of%20the%20smaller%20viewport%20accommodations.%0A%0AClone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20in%20the%20comments%2C%20or%20if%20you%27re%20interested%20in%20knowing%20how%20I%20made%20this%20project%20come%20to%20life.%0A%0AStrive%2C%20%22Plaid%20Dress%22%3A%20https%3A//dribbble.com/shots/6711696-Plaid-Dress
Tags:
- cloneable
- dribble
- joshwork
- slider
- interactions
- ix2
- colorful
- clone
- slides
- fashion
- interactive
Visit Site
Trendy%20AF%20Circular%20Text
TLDR%3B%20people%20seem%20to%20like%20this%20circular%20text%20with%20movement%2C%20so%20I%20thought%20I%27d%20try%20and%20see%20if%20I%20couldn%27t%20hack%20in%20WF.%20I%20did.%20This%20is%20that.%0A%0APowered%20by%20circletype.js%2C%20it%27s%20a%20little%20wonky%20and%20weird%20with%20regards%20to%20how%20it%27s%20sized...%20but%20it%20works.%20Includes%20interactions%20for%20page%20load%2C%20scrolling%20through%20sections%2C%20and%20for%20page%20transitions.%0A%0AClone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20in%20the%20comments%21
Tags:
- circle
- circles
- circletext
- cloneable
- clone
- webflow
- joshwork
- javascript
- trendy
- animation
- movement
Visit Site
Rad%20Mouse%20Movement%20Hero%21%20-%20Joshwork%20Dribbble%20series%20ft.%20UI8
Saw%20this%20cool%20interaction%20by%20UI8%20on%20Dribbble%20and%20had%20to%20try%20and%20recreate%20it%21%20I%20liked%20this%20concept%20as%20a%20hero%20space%2C%20so%20I%20added%20a%20modern%20nav%20to%20it%20that%20goes%20vertical%20on%20MVP%20to%20compliment%20the%20space.%20Let%20me%20know%20what%20you%20think%20in%20the%20comments%2C%20and%20clone%20away%21%0A%0ADesign%20credit%3A%20%22Call%20to%20Action%22%20by%20Anton%20Tkachev%20for%20UI8%20%28https%3A//dribbble.com/shots/6479771-Qaitomo-Call-To-Action%29%2C
Tags:
- hero
- interactions
- dribbble
- joshwork
- mouseover
- movement
- smooth
- menu
- vertical
- vertical%20nav
Visit Site
Predictive%20Text%20Form%21
As%20part%20of%20a%20freelance%20project%20I%27ve%20been%20working%20on%2C%20one%20of%20the%20requirements%20was%20a%20form%20field%20which%20would%20%22predict%22%20what%20the%20user%20was%20typing.%20It%20took%20me%20a%20while%20to%20find%20this%20solution%2C%20but%20once%20I%20found%20it%20and%20implemented%20it%20was%20super%20simple%2C%20and%20so%20I%20thought%20I%27d%20share%20it%20with%20the%20community%21%0A%0AInstructions%20/%20how%20to%27s%20are%20in%20the%20section%20below.%20Enjoy%2C%20and%20let%20me%20know%20what%20you%20think%21
Tags:
- forms
- formfields
- predictive
- responsive
- uiux
- form
- formblock
- joshwork
Visit Site
NEW%20Slider%20Interactions%21%20-%20Dribbble%20Series%20Ft.%20M%20S%20Brar
Wanted%20to%20play%20around%20with%20the%20new%20interaction%20types%20in%20IX2%2C%20and%20as%20always%20got%20a%20little%20carried%20away.%20All%20the%20design%20credit%20goes%20to%20M%20S%20Brar%27s%20%22Capture%20Moments%22%20%28https%3A//dribbble.com/shots/6291284-Capture-Moments%29%2C%20which%20I%20tasked%20myself%20with%20building%20as%20reference.%20Really%20happy%20with%20how%20it%20came%20out.%0A%0APeep%20the%20microinteractions%20on%20the%20menu%20button%20and%20the%20funky%20scroll%20indicator%20%28which%20changes%20to%20reflect%20the%20device%20type%20you%27re%20on%20%uD83D%uDE0D%29.%0A%0ALemme%20know%20what%20you%20think%20in%20the%20comments%21
Tags:
- webflowslider
- slider
- microinteraction
- microinteractions
- scroll
- scrollindicator
- menu
- menubutton
- search
- joshwork
- dribbble
Visit Site