jonasarleth has 219 followers on Webflow.
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
Various%20Webflow%20templates%20%28free%29
For%20all%20pages/templates%20you%20can%20also%20find%20step%20by%20step%20video%20tutorials%20on%20my%20YouTube%20Channel%3A%20https%3A//jonasarleth.com/youtube
Tags:
Visit Site
My%20Webflow%20Online%20Course%20Landingpage
I%20just%20wanted%20to%20share%20the%20landing%20page%20for%20my%20German%20Webflow%20Online%20Course%20with%20you.%20%0A%0AThe%20page%20is%20in%20german%20but%20there%20are%20some%20small%20details%20hidden%20here%20and%20there%20which%20I%20really%20enjoyed%20implementing%20%28take%20a%20look%20at%20the%20cursor%20light%20spot%20at%20the%20price%20table%20%uD83D%uDE2C%29%0A%0ATo%20realize%20my%20own%20projects%20every%20now%20and%20then%20does%20feel%20good.%0A%0ASee%20the%20live%20preview%20here%3A%20www.webflow-lernen.de
Tags:
- webflow
- onlinecourse
- landingpage
- landing%20page
- website
- interaction
- animation
- pricing%20table
- pricing
- backgroundvideo
- typography
Visit Site
Webflow%20Online-Kurs%20Lernmodul%20Inhalte%20%28deutsch%29
This%20page%20is%20created%20mainly%20for%20members%20of%20my%20German%20Webflow%20Online%20Course.%20Here%20you%20can%20find%20subpages%20and%20elements%20that%20we%20created%20together%20in%20the%20learning%20modules.%20Most%20of%20it%20doesn%27t%20make%20much%20sense%20if%20you%20haven%27t%20taken%20the%20course.%20%0A%0AYou%20can%20learn%20more%20about%20the%20online%20course%20here%3A%0Awww.webflow-lernen.de
Tags:
- onlinecourse
- webflow
- learning
- website
- learn
- school
Visit Site
Website%20Mobile%20Navigation%20%28user%20friendly%29
Watch%20the%20YouTube%20tutorial%20here%20%28german%29%3A%20%0Ahttps%3A//youtu.be/VaVwYP5-nnk
Tags:
- navigation
- mobile
- mobilenav
- nav
- responsive
- menu
- menutrigger
- navigations
- mobile%20nav
- mobile%20menu
- mobileready
- menuconcept
- navmenu
- fullnav
- toggle
- mobilemenuanimation
Visit Site
Navigation%20Mega%20Dropdown%20%28+%20custom%20animation%29
I%20created%20a%20YouTube%20tutorial%20here%20%28german%29%3A%20%0Ahttps%3A//youtu.be/C1k6bm8ybBY
Tags:
- navigation
- nav
- dropdown
- meganav
- megamenu
- meganavigation
- complex%20navigation
- responsive
- animation
- css%20animation
- header
- menu
- menuconcept
- menutemplate
- navmenu
- submenu
Visit Site
Apple%20Card%20Scroll%20Animation
I%20created%20a%20YouTube%20tutorial%20here%20%28german%29%3A%20https%3A//youtu.be/QU6Ux3yZW4U
Tags:
- apple
- scroll
- animate
- animation
- scrolleffect
- scrollanimation
- scrollable
- scrollytelling
- interaction
- revealonscroll
- interactive
- webanimation
Visit Site