Enjoy%20my%20free%20cloneables%20%u270C%uFE0F%20And%20tons%20of%20my%20Webflow%20tutorials%20here%3A%20https%3A//webflow-lernen.de/tutorials
jonasarleth has 629 followers on Webflow.
Apple%20like%20Text%20Gradient%20Scroll%20Effect%20%28iPhone%2014%20Pro%20Page%29
I%20found%20the%20effect%20on%20the%20iPhone%2014%20Pro%20%282022%29%20site%20%28the%20site%20is%20deleted%20by%20Apple%20every%20year%20if%20a%20new%20iPhone%20comes%20out.%29.%20%0A%0AWatch%20the%20Tutorial%20to%20see%20how%20I%20build%20the%20effect%3A%20https%3A//youtu.be/w0tJnjrRTlg
Tags:
- apple
- appledesign
- appleclone
- text
- textanimation
- texteffects
- scrollanimation
- scroll
- scrolling
- gradient
- gradients
- copy
- animation
- animations
- iphone
- iphone14pro
- scrolleffects
- colorful
- animationcolor
- colors
- cloneable
Visit Site
Image%20Grid%20Scroll%20Animation%20from%20Apple.com
I%20found%20the%20effect%20on%20the%20iPhone%20SE%202022%20page%20%28the%20site%20is%20deleted%20by%20Apple%20every%20year%20if%20a%20new%20iPhone%20model%20comes%20out%29.%20Variant%20%231%20is%20using%20scale%20and%20is%20less%20cropping%20of%20the%20images.%20Variant%20%232%20is%20more%20flexible.%20%0A%0AWatch%20the%20Tutorial%20to%20see%20how%20I%20build%20the%20effect%3A%0Ahttps%3A//youtu.be/dskrpNitKfs
Tags:
- apple
- appledesign
- appleclone
- applewebsite
- scrollanimation
- scrolleffects
- scrolleffect
- scrolling
- scroll
- grid
- images
- collage
- imagegrid
- animated
- animation
- animations
- animate
- parallaxscroll
- scrollinteraction
- iphone
- cloneable
- clone
- free%20template
Visit Site
Vertical%20Navbar%20for%20Scrollytelling%20One%20Pager%20with%20Progress%20Bar
Info%3A%20I%20disabled%20the%20browser%27s%20default%20scroll%20bar%20on%20the%20desktop%20breakpoint%20using%20Custom%20CSS.%20%0A%0AYou%27ll%20find%20the%20YouTube%20Tutorial%20here%3A%20https%3A//youtu.be/l8cjr6lP9yk
Tags:
- vertical%20nav
- navigation
- navbar
- navigations
- left%20navigation
- section
- scrolling
- progressbar
- progress
- navprogressbar
- scrollbar
- custom
- customscrollbar
- scrollbars
- scrollytelling
- onepager
- onepage
Visit Site
Various%20tab%20navigation%20and%20tab%20content%20animations
Sliding%20Tab%20Navigation%20With%20Custom%20Content%20Animations%0AWITH%20BACKGROUND%20%26%20UNDERLINE%0AInfo%3A%20If%20you%20need%20to%20add%20more%20tabs%20for%20your%20job%2C%20you%20also%20need%20to%20add%20another%20interaction%20for%20each%20tab%20accordingly%2C%20so%20that%20the%20background%20moves%20there.
Tags:
- tabs
- tabnavigation
- animations
- tab
- tabmenu
- animatedbackground
- animation
- interaction
- webflow
- webflowtabs
- component
- cloneable
- custommenu
- customanimation
- customslider
- slider
- slides
Visit Site
Table%20hover%20effect%20with%20image%20reveal
As%20soon%20as%20the%20cursor%20moves%20over%20a%20row%20in%20the%20table%2C%20the%20background%20appears%2C%20which%20fills%20the%20table%20row%20from%20the%20center.%20At%20the%20same%20time%20an%20image%20is%20revealed%20for%20each%20line%2C%20which%20scrolls%20at%20a%20fixed%20position%20with%20the%20page%20and%20could%20provide%20a%20preview%20of%20the%20content.%20You%20can%20also%20insert%20a%20background%20video%20here.%20Discovered%20on%20this%20website%3A%20https%3A//neodlx.io%0A%0AI%20added%20an%20additional%20line%20of%20custom%20code%20so%20that%20the%20effect%20still%20takes%20place%20even%20if%20you%20hover%20the%20mouse%20over%20the%20image%20and%20there%20is%20a%20table%20row%20below%20it.%20The%20image%20is%20ignored%20by%20the%20mouse%20%28pointer-events%3Anone%29.%0A%0ATutorial%3A%20https%3A//youtu.be/pYPV0g54CU8
Tags:
- hover
- hovereffect
- table
- imagereveal
- reveal
- mouseover
- mousehover
- featuretable
- cursor
- backgroundvideo
- preview
- animation
- animations
- hoveranimation
- interaction
- webflow
- madeinwebflow
Visit Site
3D%20Scroll%20Animation%20in%20Webflow
In%20this%20Webflow%20tutorial%20I%20will%20show%20you%20how%20to%20create%20a%20scroll%20animation%20with%20a%203D%20perspective.%20With%20a%20few%20tricks%20you%20can%20even%20make%202D%20objects%20look%20like%203D%20and%20bring%20a%20wow%20effect%20into%20your%20website.%u200D%20To%20make%20the%20whole%20thing%20scale%20smaller%20easily%2C%20I%20use%20the%20Fluid%20Design%20System%20on%20the%20desktop%20breakpoint%20%28see%20custom-CSS%20embed%20element%29.%0A%0AWatch%20the%20tutorial%20here%3A%20https%3A//youtu.be/NNGW2IlfNxA
Tags:
- scrolling
- 3deffect
- 3dtransforms
- 3ddesign
- 3dmotion
- 3dimage
- 3dscroll
- 3danimations
- scrollanimation
- animation
- perspective
- 3d%20effect
- 3danimation
- 3dtransform
- tutorial
- webflow
- webflow3d
Visit Site
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%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%20use%20a%20fluid%20design%20system.%20It%20scales%20down%20the%20grid%20on%20the%20desktop%20breakpoint%20from%201600px%20downwards.%20The%20custom%20CSS%20for%20this%20is%20written%20in%20the%20global-css%20embed.%0A%0AWatch%20the%20tutorial%20here%3A%20https%3A//youtu.be/9plbrIo4lfM%0A%0A%uD83D%uDDA4
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