Enjoy%20my%20free%20cloneables%20%u270C%uFE0F%20And%20tons%20of%20my%20Webflow%20tutorials%20here%3A%20https%3A//webflow-lernen.de/tutorials
jonasarleth has 452 followers on Webflow.
Audio%20player%20in%20Webflow%20%u2013%20how%20to%20include%20audio%20files%20into%20your%20Webflow%20project
There%20are%20different%20ways%20to%20include%20audio%20files%20into%20your%20Webflow%20project.%20You%20cannot%20host%20or%20upload%20the%20mp3%20file%20into%20your%20Webflow%20account%20but%20many%20domain%20provider%20offer%20external%20hosting%20as%20well.%20It%27s%20even%20possible%20to%20host%20it%20via%20your%20Dropbox%20account.%0A%0ATutorial%3A%20https%3A//youtu.be/NRsnsmmYPYs
Tags:
- audio
- audioplayer
- mp3
- cms
- player
- music
- musicplayer
- upload
- uploads
- host
- hosting
- dropbox
- html
- jquery
- custom
Visit Site
Blur%20scroll%20effect%20for%20long%20screenshots%20in%20your%20portfolio
We%20build%20a%20cool%20parallax%20blur%20scrolling%20animation%20that%20is%20great%20to%20use%20in%20your%20portfolio.%20Especially%20as%20a%20web%20designer%2C%20you%20often%20make%20longer%20screenshots%20of%20your%20client%20projects%2C%20which%20can%20be%20showcased%20very%20well%20with%20this%20scrolling%20effect.%20I%20use%20a%20blurry%20background%2C%20which%20is%20basically%20the%20same%20image%20as%20in%20the%20foreground%2C%20but%20blurred%20by%20its%20filter%20and%20gives%20the%20whole%20design%20a%20great%20mood.%0AThe%20project%20is%20as%20always%20free%20to%20clone%20in%20my%20Webflow%20Showcases%21%0A%0ATutorial%3A%20https%3A//youtu.be/5NNR5DExNGU
Tags:
- scroll
- animation
- scrolling
- scrollanimation
- scrolleffect
- effect
- scrollytelling
- blur
- blurred
- backgroundblur
- website%20blurr
- screenshot
- portfolio
- parallax
- parallaxscroll
- parallaxeffect
- parallaxanimation
Visit Site
Mouse%20Tooltip%20Next%20Project%20Teaser
A%20simple%20way%20to%20create%20a%20cursor%20tooltip%20in%20Webflow%2C%20which%20fades%20in%20when%20hovering%20over%20a%20certain%20element%20and%20follows%20the%20mouse%20pointer.%20This%20could%20be%20used%20for%20example%20for%20teasers%20that%20link%20to%20the%20next%20project%20in%20your%20portfolio.%0A%0ATutorial%3A%20https%3A//youtu.be/YwW_cRpZDr0
Tags:
- tooltips
- tooltip
- tooltip%20interactions
- hovering
- hovereffect
- portfolio
- teaser
- project
- interaction
- cursor
- customcursor
- animation
Visit Site
3D%20Tablet%20Scroll%20Animation%20in%20Webflow%20%7C%20Free%20Template
A%203D%20scroll%20animation%20that%20lets%20you%20slowly%20rotate%20a%20tablet%20towards%20the%20viewer%20while%20scrolling.%20You%20can%20even%20use%20animated%20videos%20instead%20of%20a%20static%20image.%20I%20use%20this%20setup%20in%20one%20of%20my%20case%20studies%20in%20my%20portfolio.%0A%0AWatch%20the%20Tutorial%3A%20%0Ahttps%3A//youtu.be/yX_KhCuMx_Q
Tags:
- 3deffect
- 3dui
- 3dmotion
- 3dscroll
- 3d%20animation
- 3d%20effect
- 3danimation
- scroll
- scrollanimation
- tablet
- ipad
- mockup
- backgroundvideo
- video
- interaction
- effect
- webflow3d
- rotate
- animated
- animatedbackground
- portfolio
Visit Site
Free%20Grid%20Design%20Template%20%28CMS%20ready%29
My%20YouTube%20Webflow%20community%20asked%20for%20a%20nice%20grid%20design%20as%20a%20tutorial%2C%20so%20I%20recreated%20Vitaa%20Architects%27%20Journal%20section%20as%20an%20example%3A%20have%20a%20look%20at%20the%20original%20website%20here%3A%20vitaarchitecture.com/journal%0A%0AThey%20didn%27t%20use%20css%20grid%20for%20their%20layout%20but%20I%20found%20it%20is%20a%20perfect%20use%20case%20for%20it.%20%0A%0AThe%20grid%20contains%20several%20collection%20lists%20which%20are%20always%20limited%20to%20one%20item.%20This%20allowed%20me%20to%20create%20a%20more%20varied%20grid%20design.%20%A0%0A%0AI%20also%20used%20Timothy%20Ricks%27%20Wizardry%20method%20for%20the%20layout.%0A%0AWatch%20the%20tutorial%20here%3A%20https%3A//youtu.be/9plbrIo4lfM
Tags:
- grid
- grid%20design
- grid%20layout
- cssgrid
- custom%20grid
- blog
- blogsite
- blogtemplate
- template
- cloneable
- blog%20template
- masonryblog
- overview
- 3danimation
- animated
- masonry
- cssgridbox
Visit Site
Custom%20Content%20and%20Video%20Popup%20/%20Modal
Once%20the%20popup%20is%20open%2C%20scrolling%20of%20the%20entire%20page%20is%20disabled%20using%20custom%20code%20%28body%20%3D%20overflow%20hidden%29.%20This%20helps%20longer%20content%20in%20the%20popup%20overlay%20to%20scroll%20more%20comfortably%20without%20accidentally%20scrolling%20the%20whole%20page.%20For%20the%20video%20popup%2C%20additional%20custom%20jQuery%20code%20is%20needed%20to%20stop%20the%20video%20from%20running%20in%20the%20background%20when%20the%20close%20button%20is%20clicked.%0A%0ATutorial%3A%20https%3A//youtu.be/JbNtDkrfH0U
Tags:
- modal
- modals
- popup
- overlay
- custom%20modal
- cloneable
- window
- youtube
- video
- content
- signup
Visit Site
Easy%20Magnetic%20Elements%20and%20Buttons%20%7C%20Template
A%20tutorial%20how%20you%20can%20quickly%20give%20any%20element%20in%20Webflow%20a%20magnetic%20effect.%20This%20is%20known%20especially%20from%20buttons%20of%20all%20kinds%20and%20is%20easy%20to%20implement%20with%20just%20one%20interaction%2C%20which%20you%20can%20then%20apply%20everywhere%20via%20a%20CSS%20class.%0A%0ATutorial%3A%20%0Ahttps%3A//youtu.be/1iFp2iOq5pI
Tags:
- magnetic
- magnetbuttons
- magnets
- magnet
- elements
- buttons
- playbutton
- interaction
- buttonhover
- hovereffect
- hovering
- hover
- link
Visit Site
Text%20Grid%20with%20Magnetic%20Images%20on%20Hover
The%20images%20appear%20as%20you%20hover%2C%20they%20stick%20to%20the%20mouse%20and%20overlay%20the%20text.%20This%20effect%20could%20be%20used%20well%20in%20a%20portfolio%20or%20as%20a%20listing%20of%20services.%0A%0AWatch%20the%20tutorial%3A%0Ahttps%3A//youtu.be/98XsJAtAYyM
Tags:
- textgrid
- grid
- gridmenu
- menu
- hovereffect
- portfolio
- hovermenu
- hoveranimation
- hovereffects
- magnetic
- effect
- services
Visit Site
Magnetic%20Video%20Play%20Button%20following%20the%20Cursor
A%20magnetic%20video%20play%20button%20that%20appears%20on%20hover%20on%20a%20background%20video%20and%20follows%20the%20mouse%20cursor.%20When%20clicked%2C%20it%20opens%20a%20lightbox%20with%20the%20video.%0A%0ATutorial%3A%20https%3A//youtu.be/ySUF-D9LxjE
Tags:
- video
- videoplaybutton
- playbutton
- hovering
- lightbox%20button
- lightbox
- magnetic
- magnetbuttons
- buttonhover
- buttonanimation
- backgroundvideo
- interactivecursor
- cursor
Visit Site
Sticky%20Project%20Teaser%20Image%20Scroll%20Animation
A%20split%20screen%20design%2C%20where%20on%20the%20left%20side%20the%20text%20is%20scrolling%20and%20on%20the%20right%20side%20the%20project%20image%20stays%20sticky%20in%20the%20viewport%20and%20is%20changing%20depending%20on%20the%20project%20teaser%20and%20scroll%20position.%0A%0ARemember%20that%20you%20have%20to%20adjust%20the%20interaction%20as%20soon%20as%20more%20teasers%20are%20added%21%0A%0ATutorial%3A%20https%3A//youtu.be/iJzYIk34qPM
Tags:
- sticky
- stickycards
- stickycolumns
- teaser
- scroll
- scrollanimation
- positionsticky
- splitscreen
- tutorial
Visit Site
Portfolio%20Grid%20Teaser%20Animation
A%20scroll-into-view%20animation%20that%20animates%20teaser%20images%20as%20soon%20as%20they%20come%20into%20the%20viewable%20area%20of%20the%20page%20visitor.%20This%20works%20with%20background%20videos%20as%20well%20%28last%20item%29.%0A%0ATutorial%3A%20https%3A//youtu.be/75xVsFPtWz0
Tags:
- scrollintoview
- animation
- scrollanimation
- portfolio
- grid
- portfoliowebsite
- interaction
- animate
- imageanimation
- reveal
- imagereveal
- teaser
- webflow
Visit Site
Control%20Sizing%20of%20CMS%20Items%20with%20a%20Toggle
I%27ll%20show%20you%20a%20trick%20to%20control%20the%20size%20of%20CMS%20elements%20via%20a%20toggle%20to%20give%20your%20clients%20more%20flexibility%20in%20displaying%20CMS%20collections%20in%20Webflow.%0A%0AEach%20CMS%20element%20has%20an%20example%20toggle%20%22medium%22%2C%20%22large%22%20and%20%22align%20Center%22.%20As%20soon%20as%20one%20of%20these%20options%20is%20active%2C%20a%20class%20is%20added%20to%20the%20element%20%22grid-item%22%20via%20custom%20code%2C%20which%20changes%20the%20size%20of%20the%20element%20or%20the%20alignment.%20The%20classes%20and%20sizes%20of%20the%20grid%20items%20can%20be%20changed%20in%20the%20hidden%20section-cms-grid.%20In%20order%20for%20it%20to%20work%2C%20the%20embed%20field%20in%20each%20CMS%A0item%20and%20the%20jQuery%20code%20must%20be%20added.%0A%0ATutorial%3A%20https%3A//youtu.be/DsuCGRSgJIk
Tags:
- cms
- images
- sizes
- control
- toggle
- trick
- tips
- webflow
- cmsgrid
- cmsimages
- cmsgallery
- webflowcms
- collection
- imagegallery
- customcode
Visit Site
Custom%20Slider%20Autoplay%20Gallery%20Animation
The%20slider%20component%20in%20Webflow%20can%20also%20be%20extended%20with%20an%20individual%20animation.%20This%20way%20you%20can%20give%20each%20slideshow%20its%20own%20character.%20%0A%0AThis%20cloneable%20is%20a%20splitscreen%20gallery%20in%20which%20the%20slideshow%20automatically%20rotates%20through%20different%20collages%20and%20animates%20each%20slide%20with%20its%20own%20transition.%0A%0AYou%20could%20use%20a%20grid%20inside%20of%20each%20slide%20as%20well.%0A%0AWatch%20the%20Tutorial%20here%3A%20%0Ahttps%3A//youtu.be/IvxswB5jy-w
Tags:
- slider
- slideshow
- gallery
- autoplay
- clonable
- photographyportfolio
- photography
- photos
- photography%20website
- customanimation
- animation
- slideranimation
- sliderzoomin
- tutorial
- splitscreen
- transition
- grid
Visit Site
Responsive%20full-screen%20Webflow%20navigation%20menu
A%20fancy%20full-screen%20Webflow%20navigation%20menu%2C%20which%20is%20completely%20responsive%20and%20can%20also%20be%20used%20from%20a%20desktop%20breakpoint.%0A%0AThe%20custom%20open%20and%20close%20animation%20with%20an%20animated%20background%20gradient%20gives%20the%20navigation%20menu%20an%20additional%20character%20of%20its%20own.%20%0A%0ACheck%20out%20the%20tutorial%20here%20on%20my%20channel%3A%0Ahttps%3A//youtu.be/XiPq7BcyOPs
Tags:
- menu
- navigation
- nav
- mobile
- responsive
- animatedmenu
- animation
- menutemplate
- navigations
- gradien
- animatedgradient
Visit Site
Automatically%20add%20an%20arrow%20icon%20to%20every%20external%20link%20in%20your%20Webflow%20project
For%20the%20trick%20to%20work%2C%20you%20need%20to%20paste%20the%20custom%20CSS%20code%20from%20the%20embed%20field%20into%20your%20project.%20The%20arrow%20icon%20can%20be%20replaced%20by%20your%20own%20SVG%20image%20in%20the%20CSS%20code.%20After%20that%2C%20you%20may%20need%20to%20adjust%20the%20spacing%20and%20sizes%20in%20the%20CSS%20code.%20If%20you%20use%20em%20for%20the%20sizes%2C%20the%20icon%20will%20automatically%20adjust%20when%20you%20use%20a%20larger%20font%20size.
Tags:
- link
- icon
- trick
- automated
- symbols
- csstrick
- css
- customcode
Visit Site