WebDev%20For%20You.%20Visual%20web%20development%20made%20easy.
webdevforyou has 1516 followers on Webflow.
WebDev%20For%20You%20-%20Interaction%20%23151
This%20demo%20showcases%20a%20grain%20background%20effect%20with%20a%20hover%20animation%20over%20the%20image.%20The%20image%20was%20also%20edited%20via%20photomosh.com.%0A%0AThe%20grain%20was%20created%20in%20Photoshop%2C%20and%20the%20hover%20Illustration%20was%20created%20in%20Illustrator.%0A%0AInspired%20by%20this%20new%20Spotify%20website%20here%3A%20https%3A//carnival.withspotify.com/
Tags:
- webflow
- texture
- backgrounds
- hover
- hovereffect
- photoshop
- illustrator
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23150
This%20demo%20showcases%20a%20grid%20of%20images%20that%20move%20left%20to%20right%20on%20scroll.%20Smooth%20scrolling%20has%20also%20been%20added%20via%20the%20luxy.js%20script.%0A%0AInspired%20by%20this%20Codrops%20demo%3A%20https%3A//tympanus.net/Development/TileScroll/
Tags:
- webflow
- scrolling
- scrollanimation
- interaction
- smoothscrolling
- images
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23149
This%20demos%20showcases%20animated%20shapes%20for%20slide%20indicators.%20The%20animations%20were%20created%20in%20After%20Effects%20and%20then%20brought%20into%20Webflow.%20They%20were%20then%20triggered%20to%20play%20when%20a%20slide%20comes%20into%20view.
Tags:
- webflow
- after%20effects
- lottie
- slider
- animation
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23148
A%20simple%20social%20media%20hover%20interaction%20inspired%20by%3A%20https%3A//www.ivantoma.com/%0A%0ASocial%20Media%20Icons%3A%20https%3A//simpleicons.org/%0ABackground%3A%20https%3A//bgjar.com/
Tags:
- webflow
- hovereffect
- hover
- interactions2
- socialmedia
- icons
Visit Site
WebDev%20For%20You%20-%20Interaction%20%23147
This%20demo%20showcases%203D%20text%20on%20mouse%20move%20with%20a%20script%20called%20ztext.js.%20The%20background%20was%20also%20created%20from%20an%20SVG%20background%20generator%20at%20bgjar.com.%0A%0AScript%3A%20https%3A//bennettfeely.com/ztext/%0ASVG%20Background%20Generator%3A%20https%3A//bgjar.com/
Tags:
- webflow
- customcode
- 3dtext
- animation
- mousemovement
Visit Site
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