Designer%20%26%20dev.
robingranqvist has 564 followers on Webflow.
Multi-Image%20Page%20Transition%20Animation
Now%20what%20about%20this%0A%0AThis%20is%20a%20remake%20of%20this%20Codrop%3A%20https%3A//tympanus.net/Development/RapidLayersAnimation%20but%20remade%20natively%20in%20Webflow.%0A%0AThe%20article%20above%20explains%20the%20logic%20behind%20the%20animation%2C%20but%20basically%20you%20have%20a%20parent%20%28with%20overflow%3A%20hidden%29%20for%20each%20image%20which%20animates%20up%2C%20while%20the%20images%20themselves%20animates%20down%20at%20the%20same%20speed.%0A%0ACould%20need%20some%20tweaks%20regarding%20easing%2C%20more%20images%20etc.%0A%0AI%20think%20it%20looks%20super%20cool%20%uD83E%uDD19
Tags:
- pagetransitions
- transition
- imagetransition
Visit Site
Smooth%20Scroll%20Grid%20Reveal%20Animation
Don%27t%20tell%20me%20this%20doesn%27t%20look%20cooool.%0A%0AI%20saw%20a%20similar%20animation%20on%20some%20Awwwards%20site%20%28can%27t%20remember%20the%20name%29%20and%20though%20it%20looked%20amazing.%0A%0ASmooth%20scroll%20by%20Locomotive.js%2C%20fixed%20section%20pinning%20type%20thingy%20by%20Gsap%20Scrolltrigger.%203D%20renders%20by%20Unsplash.
Tags:
- scrollanimation
- smoothscroll
- locomotive
- gsap
- gsapscrolltrigger
Visit Site
Another%20Trippy%20Smooth%20Scroll%20Background%20and%20Letter%20Animation
Here%27s%20another%20weirdly%20trippy%20scrolling%20animation.%0A%0AI%20finally%20figured%20out%20how%20to%20do%20layered%20section%20scrolling%20using%20Locomotive%20%26%20Gsap.%20It%20also%20plays%20around%20with%20randomized%20scolling%20speed%20dynamically%20added%20to%20each%20letter%20in%20the%20words%20in%20each%20section.%0A%0AI%20kinda%20like%20it.
Tags:
- smoothscroll
- locomotive
- gsap
- letteranimation
- sectionscroll
Visit Site
Smooth%20Scroll%20Background%20%26%20Gsap%20Letter%20Animation
Using%20Locomotive.js%2C%20Gsap%20ScrollTrigger%20%26%20some%20custom%20Javascript.%203D%20renders%20from%20Unsplash.%0A%0AFinally%20figured%20out%20how%20to%20do%20those%20%22fixed%22%20background%20image%20scroll%20thingys%2C%20so%20here%27s%20a%20smooth%20scrolled%20section%20thing%20with%20some%20randomized%20letter%20opacity%20animations.
Tags:
- locomotive
- gsap
- gsapscrolltrigger
- letteranimation
- sectionscroll
- 3dweb
Visit Site
Random%20Letter%20Color%20on%20Hover
This%20is%20a%20fun%20little%20Javascript%20hover%20animation.%20%0A%0AThe%20color%20transition%20for%20the%20letters%20can%20be%20modified%20by%20temporarily%20creating%20a%20class%20called%20%22letter%22%20and%20change%20its%20font%20color%20transition.%0A%0AThe%20code%20can%20be%20found%20in%20the%20page%20settings%20%uD83E%uDD19
Tags:
- hoveranimation
- hovereffect
- jquery
- javascript
- letteranimation
Visit Site
Stir%20Card%20Interaction%20Remake
I%20recently%20saw%20a%20really%20cool%20interaction%20on%20https%3A//www.usestir.com%2C%20so%20I%20decided%20to%20try%20to%20remake%20it.%0A%0AClone%20%26%20have%20fun%20%uD83E%uDD19
Tags:
- interactions
- animation
- hoverinteraction
- mouseinteraction
Visit Site
Interaktion%20-%20Portfolio%20for%20sale
Portfolio%20for%20sale%20--%20This%20is%20a%20minimalist%20and%20sleek%204%20page%20portfolio%20%284%20pages%20including%20project%20template%2C%205%20including%20style/typography%20guide%20page%29%20that%20hasn%27t%20been%20used.%20Fully%20designed%20and%20developer%20by%20me.%0A%0AIt%20features%20smooth%20scrolling%20by%20locomotive.js%20and%20some%20sweet%20interactions%20using%20Gsap%20and%20IX2.%20Might%20have%20some%20minor%20quirks%2C%20but%20is%20sold%20as%20is.%0A%0AI%20haven%27t%20sold%20a%20site%20like%20this%20before%2C%20so%20just%20trying%20to%20see%20if%20anyone%20would%20be%20interested.%20It%27s%20sold%20as%20an%20exclusive%2C%20meaning%20it%20will%20only%20be%20sold%20once%20to%20one%20person%20and%20not%20as%20a%20template.%20If%20you%20like%20it%20and%20if%20you%20would%20like%20to%20buy%20it%2C%20send%20an%20offer%20to%20robin.granqvist@hotmail.se%20and%20we%27ll%20take%20it%20from%20there.%0A%0AWill%20be%20used%20for%20something%20else%20if%20no%20interest%20is%20shown%20%uD83E%uDD19%20
Tags:
- portfolio
- smoothscroll
- locomotive
- minimalist
- clean
- forsale
- interactions
- animation
- gsap
Visit Site
Planera%20-%20SaaS%20One%20Pager
Just%20a%20simple%20one-page%20landing%20page%20for%20a%20made%20up%20project%20management%20SaaS.%20No%20cool%20interactions%2C%20no%20animations%2C%20simply%20just%20a%20page%20with%20some%20illustrations.%0A%0AMade%20for%20some%20upcoming%20educational%20content%2C%20but%20feel%20free%20to%20clone%2C%20use%2C%20whatever.
Tags:
- saas
- landingpage
- minimalist
- minimalistic
Visit Site
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