WebDev%20For%20You.%20Visual%20web%20development%20made%20easy.
webdevforyou has 1258 followers on Webflow.
WebDev%20For%20You%20-%20Interaction%20%23146
This%20demo%20showcases%20an%20open%20button%20interaction%20along%20with%20a%20menu%20that%20opens%20with%20a%20video%20in%20the%20background.
Tags:
- webflow
- menu
- menuconcept
- animation
- backgroundvideo
- hover%20effects
- click
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23145
This%20demo%20showcases%20an%2011x11%20grid%20menu%20animation%20on%20click.%20The%20different%20blocks%20in%20the%20grid%20appear%20in%20a%20specific%20pattern%20and%20are%20staggered%20to%20create%20the%20effect.%20The%20staggered%20effect%20plays%20in%20the%20opposite%20direction%20when%20the%20menu%20closes.%20The%20menu%20items%20inside%20of%20the%20grid%20menu%20also%20have%20a%20micro-interaction%20applied.
Tags:
- webflow
- grid
- menuconcept
- menu
- animation
- staggerreveal
- interactions2
- click
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23144
This%20demo%20showcases%20a%20grid%20menu%20animation%20on%20click.%20The%20menu%20wrapper%20consists%20of%202%20grids%20-%20one%203x3%2C%20and%20a%20smaller%204x8%20nested%20grid%20in%20the%20lower%20left.%20The%20panels%20scale%20in%20from%20bottom%20to%20top%20and%20left%20to%20right.%20The%20text%20also%20appears%20in%20a%20staggered%20motion%20from%20bottom%20to%20top.%20On%20close%20the%20text%20fades%20out%20and%20moves%20back%20down%2C%20and%20the%20menu%20panels%20scale%20back%20to%200%20in%20a%20staggered%20motion.
Tags:
- webflow
- grid
- menu
- menuconcept
- animation
- staggerreveal
- click
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23143
This%20demo%20showcases%20a%20circular%20slider%20with%20animated%20panels%20in%20the%20background.%20The%20panels%20were%20created%20in%20After%20Effects%20and%20triggered%20via%20a%20slider%20element%20in%20Webflow.%20The%20main%20slider%20was%20also%20linked%20to%20a%20secondary%20slider%20that%20showcases%20text.%20The%20sliders%20were%20linked%20together%20via%20custom%20code.%0A%0AInspired%20by%20the%20following%20Dribbble%20shot%20from%20Keshav%20Dev%3A%20https%3A//dribbble.com/shots/12128648-Wildlife-Shot-Animation
Tags:
- webflow
- slider
- after%20effects
- lottie
- animation
- custom%20code
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23142
This%20demo%20showcases%20a%20multi-slider%20animation%20with%20micro-interactions%20for%20the%20previous%20and%20next%20buttons.%0A%0AThe%20micro-interaction%20for%20the%20slider%20arrows%20was%20created%20in%20After%20Effects%2C%20and%20custom%20code%20was%20added%20to%20trigger%20multiple%20slides%20at%20once.
Tags:
- webflow
- slider
- custom%20code
- after%20effects
- lottie
- animation
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23141
This%20demo%20showcases%20an%20animated%20SVG/Lottie%20menu%20that%20comes%20in%20from%20the%20right%20to%20the%20left.%20The%20animation%20path%20was%20created%20in%20Adobe%20Illustrator%20and%20then%20animated%20in%20Adobe%20After%20Effects.%20Afterward%20it%20was%20brought%20into%20Webflow%20and%20the%20animation%20was%20triggered%20alongside%20a%20menu%20opening.%20Animations%20were%20also%20added%20to%20the%20open%20and%20close%20buttons%20as%20well%20as%20to%20the%20menu%20items%20in%20the%20menu.
Tags:
- webflow
- illustrator
- after%20effects
- menu
- menuconcept
- svg
- animation
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23140
This%20interaction%20showcases%20a%20unique%20hover%20animation%20when%20hovering%20over%20the%20images.%20This%20interaction%20can%20be%20used%20for%20blog%20cards%2C%20or%20any%20other%20type%20of%20card%20where%20the%20user%20can%20click%20to%20go%20to%20another%20page.
Tags:
- webflow
- hover
- rotate
- animation
- illustrator
- interactions
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23139
This%20is%20a%20menu%20that%20reveals%20from%20the%20upper-left%20and%20the%20upper-right.%20They%20remind%20me%20a%20bit%20of%20like%20curtains%20coming%20in.%20There%20are%20many%20variations%20for%20this%20menu%20that%20I%20can%20think%20of%20as%20far%20as%20design%20and%20adding%20different%20elements.%20One%20example%20could%20be%20to%20add%20different%20textures%20or%20images%20to%20the%20panels%20as%20they%20come%20in%2C%20or%20trying%20different%20color%20variations%20for%20the%20panels.%20I%20kept%20it%20simple%20for%20this%20one%20to%20showcase%20the%20concept.%20%0A%0AThe%20menu%20animating%20in%20was%20built%20with%20Webflow%20Interactions.%20The%20rotating%20text%20inside%20of%20the%20menu%20was%20built%20with%20Illustrator%2C%20After%20Effects%2C%20and%20Lottie.%0A%0ATo%20learn%20how%20to%20build%20this%20menu%20from%20scratch%20check%20out%20the%20subscription%20%3A%29.
Tags:
- webflow
- menuconcept
- menu
- after%20effects
- lottie
- interactions2
- animation
- text
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23138
Let%20user%27s%20know%20where%20they%20are%20on%20a%20page%20with%20this%20unique%20Lottie%20scroll%20indicator%21
Tags:
- webflow
- scroll
- after%20effects
- lottie
- animation
Visit Site
webdev-for-you-interaction-137
Straight%20lines%20out%2C%20wavy%20lines%20in%21%0A%0ALearn%20how%20to%20create%20unique%20underline%20animations%20using%20Illustrator%2C%20After%20Effects%2C%20Lottie%2C%20and%20Webflow%21%0A%0AYou%20might%20need%20a%20pretty%20unique%20design%20to%20make%20this%20wavy%20line%20animation%20work%20for%20your%20site%2C%20but%20using%20the%20tips%20and%20techniques%20covered%20in%20the%20video%20tutorial%20you%27ll%20be%20able%20to%20create%20any%20type%20of%20line%20for%20your%20menu%20underline%20animation.%0A%0AThree%20different%20versions%20included%20in%20the%20demo.
Tags:
- webflow
- menu
- menuconcept
- illustrator
- after%20effects
- lottie
- hover
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23136
He%u2019s%20back%21%0A%0AI%u2019ll%20admit%2C%20an%20interaction%20a%20day%20was%20a%20bit%20ambitious.%20I%20had%20to%20take%20a%20nice%20break%20to%20re-think%20how%20I%20wanted%20to%20share%20new%20content.%20After%20some%20time%20I%20am%20re-introducing%20the%20interactions%2C%20but%20this%20time%20they%20will%20be%20weekly%20instead%20of%20daily.%20I%20might%20throw%20in%20an%20extra%201%20or%202%20in%20a%20week%20if%20I%u2019m%20feeling%20inspired.%0A%0AThe%20other%20thing%20you%20will%20note%20with%20these%20interactions%20is%20that%20the%20video%20tutorials%20are%20no%20longer%20free%20on%20YouTube.%20The%20interactions%20and%20video%20tutorials%20take%20time%20to%20create%20and%20craft%2C%20so%20there%20is%20now%20a%20subscription%20where%20you%20can%20receive%20a%20weekly%20video%20tutorial%20on%20how%20to%20create%20the%20interaction%20of%20the%20week.%20Now%20that%20Webflow%20has%20introduced%20Lottie%20as%20a%20feature%20we%20will%20be%20using%20Adobe%20Illustrator%20and%20After%20Effects%20to%20create%20really%20unique%20and%20sophisticated%20interactions.%0A%0AThanks%20everyone%20for%20all%20the%20kind%20words%20and%20feedback%20on%20the%20interactions.%20I%20do%20have%20a%20lot%20of%20fun%20creating%20them%20and%20am%20happy%20to%20be%20sharing%20them%20again%20%3A%29.%0A%0ABest%2C%0AJohn
Tags:
- webflow
- lightbox%20button
- lightbox
- after%20effects
- lottie
- hover
Visit Site
webdev-for-you-krai-by-studio-vor
Hi%20everyone%21%20I%20built%20this%20website%20from%20a%20design%20concept%20by%20Zak%20Steele-Eklund%20from%20Studio%20V%D8R.%20Here%20is%20their%20dribbble%20page%3A%20https%3A//dribbble.com/studiovor%0A%0AThe%20designs%20by%20Studio%20V%D8R%20have%20a%20lot%20of%20great%20illustrations%20and%20animations%2C%20so%20it%20was%20fun%20building%20this%20in%20Webflow%20to%20showcase%20the%20power%20of%20Webflow%2C%20and%20just%20how%20much%20you%20can%20do%20with%20it%20%3A%29.%0A%0AHere%20is%20a%20video%20tutorial%20of%20how%20I%20built%20the%20website%3A%0Ahttps%3A//www.youtube.com/watch%3Fv%3D-R9UO_eNQDg%0A%0AHappy%20Webflowing%20%3A%29.
Tags:
- webdevforyou
- webflow
- studiovor
- webdesign
- dribbble
- after%20effects
- photoshop
- parallax
- animations
- interactions
- slider
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23135
Welcome%20to%20Daily%20Interaction%20%23135.%0A%0AThis%20demo%20showcases%20a%20project%20card%20animation%20on%20hover.%0A%0AWith%20this%20effect%20the%20title%20and%20caption%20move%20on%20hover.%20A%20%22View%20Project%22%20appears%20and%20moves%20down%20with%20an%20underline%20animation.%20There%20is%20also%20a%20cover%20overlay%20that%20moves%20and%20appears%20from%20the%20upper-left%20on%20hover.%0A%0AThis%20effect%20was%20achieved%20by%20creating%20a%20card%20wrapper%20and%20placing%20the%20color%20overlay%20inside%20of%20it%20with%20a%20position%20of%20absolute%20and%20full.%20Then%20a%20text%20wrapper%20was%20added%20to%20the%20card%20wrapper%20in%20the%20center%20with%20a%20heading%2C%20text%20block%2C%20and%20view%20project%20text%20block.%20The%20%27view%20project%27%20text%20and%20underline%20were%20added%20inside%20of%20another%20wrapper.%20Then%20with%20interactions%20I%20had%20the%20different%20elements%20move%20and%20the%20underline%20scale.%0A%0AInspired%20by%3A%20https%3A//www.everess.fr/%0A%0AThere%20will%20be%20no%20daily%20interactions%20for%20a%20while%20as%20I%20am%20currently%20working%20on%20a%20few%20other%20projects.%20Stay%20tuned%20for%20the%20new%20projects%21%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteraction
- dailyinteractions
- card
- imagehover
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23134
Welcome%20to%20Daily%20Interaction%20%23134.%0A%0AThis%20demo%20showcases%20a%20parallax%20card%20animation%20on%20mouse%20move.%0A%0AWith%20this%20effect%20a%20gradient%20overlay%20moves%20with%20the%20mouse%20on%20hover%2C%20and%20a%20border%20moves%20in%20the%20opposite%20direction.%20The%20text%20also%20moves%20and%20rotates%20left%20and%20right%20with%20the%20mouse.%0A%0AThe%20effect%20was%20achieved%20by%20placing%20the%20gradient%20overlay%20and%20border%20within%20the%20card%20wrapper.%20The%20text%20was%20placed%20in%20the%20bottom%20right%20of%20the%20border%20div%20using%20flexbox.%20Then%20in%20interactions%20I%20added%20a%20%27mouse%20move%20over%20element%27%20interaction%20and%20had%20the%20elements%20move%20and%20rotate%20on%20the%20x%20and%20y%20axis%20when%20the%20user%20moves%20their%20mouse%20over%20the%20card%20wrapper.%0A%0AInspired%20by%3A%20https%3A//tympanus.net/Development/TiltHoverEffects/%0A%0AImages%20from%3A%20Unsplash.com%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteractions
- interactions
- parallax
- mouseover
- mousemovement
- card
- rotate
- imagehover
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23133
Welcome%20to%20Daily%20Interaction%20%23133.%0A%0AThis%20demo%20showcases%20a%20parallax%20card%20animation%20on%20mouse%20move.%0A%0AWith%20this%20effect%20a%20card%20rotates%20on%20mouse%20move%2C%20and%20the%20image%20inside%20the%20card%20rotates%20and%20moves%20as%20well%20to%20create%20the%20effect%20of%20the%20image%20moving%20inside%20of%20the%20card.%20A%20caption%20also%20appears%20when%20hovering%20over%20the%20card.%20The%20card%20is%20in%20a%203d-wrapper%20with%20a%20child%20perspective%20applied%20to%20it%20to%20give%20the%20card%20a%203d%20effect%20as%20it%20moves.%0A%0AInspired%20by%3A%20https%3A//codepen.io/andymerskin/pen/XNMWvQ%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteraction
- dailyinteractions
- parallax
- card
- mouseover
- mousemovement
- imagehover
- hover%20effects
- hover
Visit Site