Enterprise%20Product%20Designer%20%20%20%7C%20%20%20Creative%20coding%20as%20a%20hobby%3A%20Utilities%20and%20components%20built%20using%20Webflow%2C%20WebGL%2C%20Shaders%20and%20Greensock.
cjhersh has 432 followers on Webflow.
Motion%20Hover%20Effect
Motion%20Hover%20Effects%20with%20Image%20Distortions%20using%20Three.js%21%0A%0AThe%20project%20is%20based%20on%20the%20beautiful%20work%20of%20creative%20developers%20Niccol%F2%20Miranda%20and%20Cl%E9ment%20Roche.%20Their%20respective%20contact%20details%20can%20be%20found%20within%20the%20project%20-%20I%20encourage%20you%20to%20contact%20them%20for%20any%20high-quality%20freelance%20work.%20%0A%0AOriginal%20Repo%3A%20https%3A//github.com/clementroche/motion-hover-effects%0A%0A*%20All%20images%20are%20subject%20to%20Copyright%20%A9%202019%20%u2206%20Studio%u2013JQ%20%u2206%20%28https%3A//dribbble.com/STUDIOJQ%29
Tags:
- webgl
- hover%20effects
- threejs
Visit Site
Sticky%20Image%20Showcase
A%20WebGL%20prototype%20showcasing%20some%20amazing%20artwork%20by%20StudioJQ.%20Just%20press%20and%20drag%20to%20explore.%0A%0AThe%20code%20is%20based%20on%20an%20awesome%20project%20by%20creative%20developer%20Daniel%20Velasquez%20and%20it%20is%20modified%20to%20more%20easily%20integrate%20with%20Webflow.%0A%0AOriginal%20Repo%3A%20https%3A//github.com/Anemolo/StickyImageEffect%0A%0A*%20You%20can%20update%20the%20Text%2C%20Links%2C%20and%20Images%20in%20footer%20%28via%20page%20settings%29.%0A*%20Easily%20modify%20the%20effects%20speed%2C%20frequency%2C%20etc.%20in%20footer%20%28via%20page%20settings%29.%20%0A*%20I%20have%20not%20done%20thorough%20testing%20so%20please%20comment%20with%20any%20feedback%20and/or%20issues.%20%0A*%20All%20images%20are%20subject%20to%20Copyright%20%A9%202019%20%u2206%20Studio%u2013JQ%20%u2206%20%28https%3A//dribbble.com/STUDIOJQ%29%0A%0AUpdate%2010/16/19%3A%201%29%20Clicking%20links%20now%20works%20on%20mobile%20and%20will%20no%20longer%20activate%20the%20sticky%20effect%20across%20all%20devices.
Tags:
Visit Site
Mapbox%20Scrollytelling
An%20example%20of%20how%20you%20can%20integrate%20Mapbox%20into%20your%20Webflow%20project%20to%20create%20an%20immersive%20storytelling%20experience.%20Feel%20free%20to%20clone%20but%20be%20sure%20to%20replace%20the%20API%20key%20with%20your%20own%20%28available%20for%20free%20by%20creating%20a%20Mapbox%20account%29.%0A%0A*Not%20optimized%20for%20mobile%20%28yet%29
Tags:
Visit Site
Smooth%20Scrolling%20Image%20Effects
A%20small%20set%20of%20ideas%20on%20animating%20images%20and%20other%20elements%20while%20smooth%20scrolling%20a%20page%20in%20Webflow.%0A%0ACredits%20%26%20Source%3A%20https%3A//github.com/codrops/SmoothScrollingImageEffects/%0A%0AAlternative%20%27Smooth%20Scroll%27%20implementations%20can%20be%20found%20here%3A%20https%3A//webflow.com/website/gsap-tweenmax-scroll
Tags:
Visit Site
Carbon%20Design%20UI%20Kit
V1%20of%20an%20upcoming%20open-source%20%28cloneable%29%20enterprise-focused%20design%20system%20for%20Webflow.%20If%20anyone%20is%20interested%20in%20collaborating%2C%20please%20contact%20me%20or%20comment%20below%21%20Based%20on%20IBM%27s%20Carbon%20Design%20System.%0A%0A100%25%20Webflow%20except%20for%20the%20following%20item%3A%0A-%20Custom%20jQuery%20for%20number%20input%20styling
Tags:
- system%20design
- ui%20kit
- enterprise
Visit Site
Curtains.js
WebGL%20library%2C%20Curtains.js%2C%20integrated%20with%20Webflow%20and%20ready%20to%20clone%21%0A%0ALibrary%20by%20Martin%20Laxenaire%0ARepo%3A%20https%3A//github.com/martinlaxenaire/curtainsjs
Tags:
Visit Site
WebGL%20Grid%20To%20Fullscreen
WebGL%20Integration%20with%20Webflow%20that%27s%20surprisingly%20easy%20to%20work%20with.%20%0A%0AIf%20you%27d%20like%20me%20to%20make%20a%20tutorial%20with%20cloneable%20demo%2C%20please%20%27Like%27%20or%20%27Comment%27.%20I%27d%20be%20happy%20to%20share%20some%20of%20the%20critical%20details%20that%20go%20into%20creating%20this%20interaction%2C%20inside%20a%20Webflow%20project.%0A%0AOriginal%20code%20by%20Daniel%20Velasquez%20%0ARepo%3A%20https%3A//github.com/Anemolo/GridToFullscreenAnimations
Tags:
Visit Site
Swiper%20Showcase%20Example
Basic%20example%20of%20how%20to%20integrate%20Swiper.js%20with%20Webflow.
Tags:
- swiperslider
- swiper
- slider
- 3dslider
Visit Site
Scroll%20Interactions
Scroll-based%20effects%20implemented%20in%20Webflow.%20%0A%0ACurrent%20Effects%3A%0A1.%20RGB%20Shift%20%0A2.%20Stretch%20Scroll%0A3.%20Mix-Blend%0A4.%20Video%20Scrubbing*%0A5.%20Skew%20Velocity%0A6.%20Looping%20Scroll*%0A7.%20Split%20Scroll*%0A8.%20Split%20Scroll%20Loop*%0A%0A*%20Items%20with%20asterisks%20not%20optimized%20on%20mobile%0A%0AAuthor%20credit%20+%20resources%20%28if%20applicable%29%2C%20are%20in%20the%20custom%20code%20panels.
Tags:
Visit Site
Bouncing%20Scroll
Scroll%20and%20drag%20triggered%20slider%20jam%20packed%20with%20some%20pretty%20cool%20tweens%20/%20animations.%20I%20modified%20the%20original%20version%2C%20by%20Jesper%20Landberg%2C%20for%20use%20in%20Webflow.%20%0A%0AThe%20native%20scrollbar%20is%20left%20intact%20so%20you%20should%20be%20able%20to%20integrate%20additional%20native%20Webflow%20scroll-based%20interactions.%20%0A%0AThis%20prototype%20does%20not%20work%20on%20mobile%20devices%20-%20Consider%20Webflow%27s%20native%20slider%20as%20a%20replacement%20on%20mobile.
Tags:
Visit Site
Webflow%20Sticky%20Sections
Reverse%20engineered%20version%20of%20Webflow%27s%20very%20own%20sticky%20section%20component%20found%20here%3A%20https%3A//webflow.com/solutions/freelancers-agencies.%20%20%0A%0ADetails%3A%0A-%20It%27s%20using%20a%20proxy%20div%20%284x%29%20to%20call%20the%20%27Scroll%20In/Out%20of%20View%27%20interactions%0A-%20There%20is%20custom%20code%20in%20the%20footer%20used%20for%20video%20playback%20controls%20%28starting/stopping%20video%20at%20specific%20time%20based%20on%20scroll%20position%29%0A-%20100%25%20credit%20to%20Webflow%20team%20for%20design%20and%20original%20implementation
Tags:
Visit Site
Transform%20Origin%20Slider
Pretty%20cool%20transform%20effect%20without%20having%20to%20use%20canvas%21%20Just%20click%2C%20drag%20and%20snap.%0A%0ABuilt%20using%20Webflow%20and%20Greensock%27s%20Tweenmax%20+%20Draggable%20and%20Throw%20Props%20plugins.%20I%20cant%20make%20it%20cloneable%20because%20two%20of%20the%20plugins%20require%20a%20Greensock%20membership%20but%20feel%20free%20to%20ask%20any%20questions%20regarding%20implementation.
Tags:
Visit Site
Custom%20Form%20Styling
Features%3A%0A-%20Overrides%20browsers%20default%20%5Bugly%5D%20validation%20bubbles%20%0A-%20Custom%20hint%20text%20to%20guide%20users%20when%20errors%20are%20present%0A-%20Custom%20form%20success%20animation%0A%0ATo%20Do%27s%3A%0A1%29%20Cross-browser%20testing%0A2%29%20Add%20/%20verify%20support%20across%20all%20input%20types%20%28dropdown%2C%20checkbox%2C%20etc.%29%0A3%29%20Add%20/%20verify%20support%20of%20numeric%20validation%20logic%20%28dates%2C%20numbers%29%0A%0ALib%20Dependency%3A%20https%3A//jqueryvalidation.org/
Tags:
Visit Site
100%25%20Webflow%20IX2%20Scroll%20Utility
Making%20this%20utility%20work%20on%20desktop%20and%20mobile%20was%20no%20joke...%0A%0ABasic%20Details%3A%0A-%20Clean%2C%20meaning%20no%20janky%20transitions%20at%20each%2090%20degree%20angle%0A-%20100%25%20Webflow%20%28no%20custom%20code%29%0A-%20Cross-browser%20and%20device%20compatible%0A%0A*Since%20this%20is%20using%20native%20Webflow%20interactions%20%28ie%20no%20clip-path%20/%20masking%29%2C%20it%20cannot%20be%20used%20on%20pages%20with%20background%20images%20%28the%20inner%20circle%20will%20not%20be%20transparent%29%0A%0AAlso%20included%20are%20custom%20JS%20implementations%20using%20SVG%20%28including%20back-to-top%20functionality%2C%20courtesy%20of%20Ivan%20Grozdic%29
Tags:
Visit Site
Diagonal%20Snap%20Scroll
Prototype%20from%20late%202017%20that%20uses%20fullpage.js%20for%20section%20%27snap%27.%0A%0A*There%20are%20a%20few%20bugs%20/%20clean%20up%20items%20I%20never%20had%20a%20chance%20to%20address%20-%20The%20list%20below%20is%20what%20I%20remember%20%28not%20exhaustive%29%3A%0A%0A1%29%20Optimizations%20For%20Mobile%20%28making%20the%20title%20a%20link%2C%20cross-browser%20testing%2C%20etc.%29%20%20%20%0A%20%0A2%29%20Improved%20Performance%20%28Firefox%29
Tags:
Visit Site