Design%20focused%20web%20developer.
robingranqvist has 350 followers on Webflow.
Horizontal%20Illustration%20Reveal%20Thingy
Just%20a%20half-finished%20horizontal%20kinda%20hover%20animation%20thingy%20with%20a%20few%20illustrations%20I%20created%20a%20few%20months%20ago.
Tags:
- illustration
- animation
- interactions
Visit Site
Native%20Smooth%20Scroll%20in%20Webflow
hello.%0A%0AI%20think%20I%20found%20a%20way%20to%20create%20the%20smooth%20scrolling%20effect%20natively%20in%20Webflow.%20The%20way%20it%20works%20is%20to%20wrap%20all%20content%20inside%20a%20sticky%20wrapper%20%28content__wrapper%29%2C%20which%20itself%20is%20inside%20a%20wrapper%20%28s__scroll%29%20with%20a%20set%20height.%20The%20outermost%20wrapper%20has%20a%20%22while%20scrolling%20in%20view%22%20interaction%20that%20pushes%20all%20content%20upwards%20while%20scrolling%20down%2C%20together%20with%20a%2090%25%20smoothing.%0A%0ASounds%20confusing%3F%20Well%20it%20kinda%20is.%20I%27m%20not%20100%25%20sure%20why%20this%20works.%0A%0ASome%20notes%3A%0A%0AThe%20outermost%20wrapper%20%28s__scroll%29%20needs%20a%20set%20height.%20You%20have%20to%20manually%20set%20this%20height%20so%20that%20it%20fits%20the%20height%20of%20whatever%20content%20you%27re%20using%20on%20your%20site.%20It%20shouldn%27t%20be%20exactly%20the%20height%20of%20your%20content%2C%20but%20a%20bit%20shorter%20%28This%20site%20is%201200vh%20in%20height%2C%20and%20s__scroll%20is%20900vh%29.%0A%0A-%20You%20want%20to%20make%20sure%20all%20your%20scroll%20interactions%20have%20the%20same%20smoothing%20as%20the%20smooth%20scroll%20interaction%20%28in%20my%20case%2090%29.%20I%20noticed%20some%20weird%20quirks%20with%20them%20otherwise.%0A%0AClone%20it%2C%20check%20it%20out%20and%20use%20it%20for%20whatever.%20%uD83E%uDD19
Tags:
- smoothscroll
- nativewebflow
- scrollinteraction
Visit Site
Hidden%20Sections
This%20is%20a%20fun%20scroll%20interaction%20thingy%20heavily%20inspired%20by%20some%20interactions%20found%20on%20colabgroup.com.%0A%0AIt%27s%20really%20hard%20to%20customize%20the%20content%20of%20the%20slides%2C%20but%20you%20could%20probably%20connect%20them%20to%20the%20CMS%20or%20just%20hide/show%20the%20default%20transform%20values%20for%20each%20slide.%20%uD83E%uDD19
Tags:
- scrollinteraction
- scrollsections
- animation
- scrollanimation
- sectionanimation
Visit Site
anxiety-hero-section
Hard%20couple%20of%20past%20weeks.%20Here%27s%20something%20%uD83C%uDF1F
Tags:
- animation
- interaction
- anxiety
- interactions
- herosection
Visit Site
Imaginary%20Shapes%20-%20100%20days%20of%20illustration
This%20is%20a%20little%20experimentation%20page%20for%20finishing%20my%20100%20day%20illustration%20project%20called%20Imaginary%20Shapes.%0A%0Ahttps%3A//www.instagram.com/imaginaryshapes%0A%0AIt%20features%20some%20AI%20written%20background%20text%2C%20given%20the%20sentence%20%22The%20lighthouses%20has%20eyes%22%20%26%20the%20illustration%20for%20day%20100.%0A%0AClone%20away%20%uD83E%uDD19
Tags:
- animation
- interactions
- illustration
- hoveranimation
Visit Site
Third%20Shape%20-%20SaaS%20Template
This%20is%20a%20simple%20but%20effective%20SaaS%20design%20that%20I%20found%20in%20my%20design%20archives%20a%20while%20back%20and%20decided%20to%20develop%20into%20a%20quick%20Webflow%20template.%0A%0AIt%20features%20quite%20a%20simple%20design%20that%27s%20highly%20customizable%20together%20with%20a%20few%20quite%20subtle%20animations%20to%20give%20it%20a%20bit%20of%20movement.%0A%0AYou%20can%20use%20it%20as%20a%20starting%20point%20for%20any%20kind%20of%20one%20page%20landing%20page%20or%20develop%20further%20into%20something%20way%20cooler.%0A%0AClone%20away%20%uD83E%uDD19%0A%0AAny%20why%20not%20download%20the%20Adobe%20XD%20file%20for%20the%20full%20design%20%26%20illustrations%20as%20well%3F%0A%0Ahttps%3A//drive.google.com/file/d/1MugNNoYBOMoEPgFhK6lIN8gp5GRpNkaD/view%3Fusp%3Dsharing%0A%0AIf%20you%20need%20help%20with%20any%20development%20project%20in%20Webflow%2C%20feel%20free%20to%20send%20me%20a%20message%20together%20with%20a%20preview%20of%20the%20design%20%26%20some%20kind%20of%20budget.%20%uD83E%uDD19%0A%0Arobin.granqvist@hotmail.se
Tags:
- saas
- template
- minimalist
- interactions
- one%20page
- animation
Visit Site
Sleepy%20Interactions
Hello%2C%0A%0AI%27m%20sleepy%2C%20so%20I%20felt%20like%20designing%20some%20kind%20of%20smooth%20interaction%20thingy.%20And%20here%20we%20are.%0A%0AI%27m%20faking%20the%20smooth%20scroll%20effect%20by%20having%20four%20fixed%20sections%20inside%20one%20big%20section%2C%20adding%20a%20%22while%20scrolling%20in%20view%22%20interaction%20to%20the%20big%20section%20and%20turning%20smoothing%20up%20to%2093%20%28around%2090%20is%20the%20sweet%20spot%20for%20any%20kind%20of%20interactions%20in%20my%20opinion%29.%0A%0AFeel%20free%20to%20clone%20and%20use%20for%20whatever%20if%20you%20like%20it.%20Images%20from%20Unsplash%2C%20some%20icons%20from%20Iconmonstr.%0A%0Arobin.granqvist@hotmail.se
Tags:
- interaction
- animation
- sections
- fixedsection
- fixedscroll
Visit Site
this-is-norway
I%20recently%20saw%20the%20%22Unstoppable%22%20site%20on%20Awwwards%20%28http%3A//unstoppable.preciosacomponents.com%29%20and%20of%20course%20I%20wondered%20if%20I%20would%20be%20able%20to%20recreate%20it%20in%20Webflow.%20And%20so%20I%20did%2C%20but%20in%20a%20Norway%20theme%20instead.%20%uD83E%uDD19%0A%0APlease%20let%20the%20background%20video%20load%20for%20a%20bit%2C%20since%20there%27s%20no%20preloader.%0A%0ABackground%20video%20by%20Pexels.
Tags:
- interaction
- scrollinteraction
- norway
Visit Site
Open%20Roles%20List%20Interaction
This%20is%20another%20small%20hover%20interaction%20thingy%20similar%20to%20what%20you%27ll%20find%20on%20sites%20all%20over%20the%20web.%20Feel%20free%20to%20clone%20and%20use%20for%20whatever%20%uD83E%uDD19
Tags:
- hoverinteraction
- interaction
Visit Site
section-scroll-tennis-court
This%20is%20another%20of%20these%20section%20scroll%20projects%20using%20Scrollify.js.%20This%20time%20I%27m%20using%20a%20split%20screen%20design%20layout%20with%20some%20geometrical%20tennis%20court%20illustrations%20that%20I%20made%20the%20other%20day.%20I%20really%20enjoy%20the%20vibe%20of%20those.%0A%0AFeel%20free%20to%20clone%20this%20project%20and%20use%20it%20for%20something%20much%20cooler%20than%20this%20example.%20%uD83E%uDD19
Tags:
- scrollifyjs
- sections
- interactions
- animation
- illustration
- minimalism
Visit Site
Small%20List%20Hover%20Interaction
This%20is%20just%20a%20small%20list%20hover%20interaction%20that%20I%27ve%20seen%20being%20used%20on%20Awwwards%20sites%20etc.%0A%0AFeel%20free%20to%20clone%20and%20use%20for%20whatever%20%uD83E%uDD19%0A%0A%28It%27s%20using%20Google%27s%20Material%20Icons%20through%20the%20CDN%2C%20so%20it%20may%20look%20a%20bit%20funky%20inside%20the%20project%29.
Tags:
- hoverinteraction
- interaction
- hover
Visit Site
Image%20Hover%20%26%20Transition%20Concept
This%20is%20a%20quite%20cool%20concept%20of%20some%20type%20of%20gallery%20/%20portfolio%20/%20whatever%20type%20of%20site.%20Since%20it%27s%20just%20a%20concept%2C%20I%20didn%27t%20take%20the%20time%20to%20make%20it%20responsive%20and%20optimized.%20Feel%20free%20to%20further%20develop%20it%20to%20something%20amazing.%0A%0AIcons%20from%20iconmonstr.com%20%26%20images%20sourced%20from%20our%20favorite%20Unsplash.com.%0A%0AFeel%20free%20to%20clone%20the%20project%20and%20use%20it%20for%20whatever%20you%20want.%20%uD83E%uDD19%0A%0Ahttps%3A//twitter.com/robingranqvist_%0Ahttps%3A//instagram.com/robingranqvist_%0Ahttps%3A//dribbble.com/robingranqvist%0A%0Arobin.granqvist@hotmail.se%20%uD83E%uDD19
Tags:
- interactions
- animations
- concept
- gallery
Visit Site
Arkitekt
This%20is%20a%20really%20generic%20template%20that%20can%20be%20used%20for%20whatever%20you%20feel%20like.%20It%27s%20a%20bit%20sloppy%20developed%20%28mainly%20structure%20%26%20class%20naming%29%20since%20I%20didn%27t%20feel%20like%20putting%20in%20too%20many%20hours%20into%20it.%20I%27ll%20probably%20fix%20the%20problems%20in%20the%20coming%20days.%0A%0AIt%27s%20using%20the%20slick%20slider%20%28https%3A//kenwheeler.github.io/slick%29%2C%20shown%20by%20Timothy%20Ricks%20in%20this%20video%3A%20https%3A//www.youtube.com/watch%3Fv%3DAG_REG9p61E.%20Go%20take%20a%20look%20to%20see%20how%20you%20can%20customize%20it%20etc.%0A%0AFeel%20free%20to%20clone%20the%20project%20and%20use%20it%20for%20whatever%20you%20want.%20%uD83E%uDD19%0A%0Ahttps%3A//twitter.com/robingranqvist_%0Ahttps%3A//instagram.com/robingranqvist_%0Ahttps%3A//dribbble.com/robingranqvist%0A%0Arobin.granqvist@hotmail.se%20%uD83E%uDD19
Tags:
- architecture
- generic
- onepage
- interactions
- slickslider
Visit Site
Hanko%20-%20Parallax%20Illustration
This%20is%20a%20small%20web%20animation%20created%20by%20multiple%20layers%20of%20SVG%27s%2C%20to%20bring%20some%20parallax%20life%20into%20an%20illustration.%0A%0AThe%20illustration%20is%20a%20really%20simple%20illustration%20based%20on%20a%20night%20on%20a%20beach%20in%20the%20beautiful%20little%20city%20%22Hanko%22%20%28Hang%F6%20in%20Swedish%29%20in%20southermost%20Finland.%0A%0Ahttps%3A//twitter.com/robingranqvist_%0Ahttps%3A//instagram.com/robingranqvist_%0Ahttps%3A//dribbble.com/robingranqvist%0A%0Arobin.granqvist@hotmail.se%20%uD83E%uDD19
Tags:
- illustration
- webanimation
- animation
- interaction
- scrollinteraction
- parallax
- parallaxscroll
Visit Site
Section%20Scroll%20Interactions%20using%20Scrollify.js%20%26%20native%20Webflow%20interactions
Here%27s%20a%20small%20project%20that%20potentionally%20could%20be%20used%20for%20some%20cool%20stuff.%20Feel%20free%20to%20clone%20it%20and%20use%20for%20whatever%20you%20want.%0A%0AI%20previously%20used%20Anime.js%20for%20the%20letter%20staggering%2C%20but%20it%20caused%20some%20ugly%20glitches%20which%20were%20extremely%20hard%20to%20get%20rid%20of%2C%20so%20now%20it%27s%20just%20using%20Webflow%27s%20amazing%20native%20interactions%20instead.%20%0A%0AThe%20section%20scrolling%20is%20made%20possible%20by%20Scrollify.js%2C%20which%20you%27ll%20find%20in%20the%20home%20page%27s%20custom%20body%20code.%0A%0Ahttps%3A//twitter.com/robingranqvist_%0Ahttps%3A//instagram.com/robingranqvist_%0Ahttps%3A//dribbble.com/robingranqvist%0A%0Arobin.granqvist@hotmail.se%20%uD83E%uDD19
Tags:
- interactions
- animations
- clonable
Visit Site