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 522 followers on Webflow.
Canvas%20Slider
While%20learning%20about%20canvas%20last%20year%2C%20I%20took%20some%20time%20to%20reverse%20engineer%20%28hack%20together%29%20this%20beautiful%20slider%2C%20originally%20built%20by%20the%20team%20at%20ToyFight.%20The%20real%20beauty%20is%20in%20the%20desktop%20interaction.%20%0A%0ASome%20notes%3A%0A-%20Mobile%20view%20is%20using%20Hammer.JS%20for%20the%20slider%0A-%20Images%20can%20be%20updated%20by%20changing%20the%20attributes%20found%20in%20each%20%3Cli%3E.%20Just%20replace%20the%20current%20image%20URL%20with%20your%20own.%0A-%20The%20%22View%20Details%22%20URL%27s%20can%20be%20updated%20the%20same%20way.%20%0A-%20You%20can%20change%20%22View%20Details%22%20to%20say%20%22View%20Project%22%20by%20changing%20the%20attribute%20%27data-video%27%20to%20false.%20If%20you%20want%20it%20to%20say%20something%20else%2C%20feel%20free%20to%20dive%20into%20the%20code%20-%20it%27s%20a%20fairly%20easy%20change.%20%0A%0ACredit%3A%20The%20ToyFight%20Team%21
Tags:
Visit Site
WebGL%20Image%20Slider
A%20set%20of%20interesting%20looking%20image%20transitions%20including%20distortion%20and%20warp%20effects%20made%20with%20WebGL.%0A%0AI%20modified%20the%20original%20code%20to%20behave%20as%20a%20bi-directional%20looping%20slider.%20Works%20on%20both%20desktop%20and%20mobile%21%20Leave%20a%20comment%20with%20any%20questions.%0A%0A*Demo%205%20supports%20Webflow%27s%20native%20Slider%20component%20%28see%20details%20re%20implementation%20in%20comments%20below%29.%0A%0ARepo%3A%20https%3A//github.com/akella/webGLImageTransitions%0AOriginal%20Author%3A%20Yuriy%20Artyukh
Tags:
Visit Site
Immersive%20Menu
100%25%20Webflow%20IX2%20full-screen%20menu.%20I%27ve%20tried%20to%20keep%20the%20layout%20and%20interactions%20as%20straightforward%20as%20possible%20so%20it%20can%20be%20cloned%20and%20more%20easily%20integrated%20across%20different%20projects.%20%0A%20%20%0A*%20Works%20on%20both%20desktop%20and%20mobile%0A*%20Original%20Inspiration%3A%20www.Varagon.com
Tags:
Visit Site
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