A%20challenge%20to%20post%20at%20least%2050%20projects%20to%20learn%20Webflow.%20%0A%0AWant%20a%20lesson%20of%20a%20project%3F%20Send%20a%20message%21%20%0A%0ATwitter%3A%20@webflowtips%20%uD83D%uDE4C
webflowtips has 305 followers on Webflow.
Animated%20Fab%20%231
Fabs%20are%20super%20useful%20to%20highlight%20the%20main%20action%20that%20a%20user%20has%20to%20take.%20It%20has%20been%20popularized%20by%20Google%27s%20Material%20Design.%20They%20can%20be%20used%20for%20actions%20like%3A%20share%2C%20favorite%2C%20add%2C%20send%2C%20etc...%0A%0AThis%20was%20definitely%20a%20challenge%20that%20ended%20with%20a%20good%20result%20although%20it%20can%20be%20polished.%20The%20animation%20is%20made%20using%20only%20Webflow%20%28without%20any%20custom%20code%29.%20%20%20%0A%0ASign%20up%20for%20the%20lesson%3A%20www.webflowtips.com/b/how-to-create-fab-1%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A21%20of%2050
Tags:
- animation
- fab
- button
- buttons
- menu
Visit Site
Confetti%20and%20Medal%20%28without%20using%20images%29
Here%20is%20the%20project%20to%20celebrate%20the%2020th%20tip.%20It%20features%20confetti%20and%20a%20medal%20that%20was%20created%20without%20using%20any%20images%20or%20custom%20code.%20%0A%0ATo%20modify%20the%20confetti%20you%20only%20need%20to%20change%20some%20text%20on%20the%20code%20%28in%20the%20home%20settings%20section%29.%20A%20couple%20things%20you%20can%20do%20are%3A%0A-%20Change%20the%20colors%0A-%20Change%20the%20time%20%0A-%20Add%20a%20button%20to%20activate%20the%20confetti%20%0A%0AThere%20will%20be%20a%20more%20in-depth%20confetti%20project%20soon.%20Stay%20tuned%21%20%20%0A%0ASign%20up%20for%20the%20lesson%3A%20www.webflowtips.com/b/how-to-add-confetti-to-a-project%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A20%20of%2050
Tags:
- medal
- party
- confetti
- event
- tutoriales
- animation
- tutorial
- tips
Visit Site
Custom%20Book%20Covers
Easily%20create%20custom%20book%20covers%20using%20this%20technique%20based%20on%20the%20work%20on%20Codepen%20by%20Lynn%20Fisher.%20%0A%0AJust%20copy%20the%20custom%20code%2C%20change%20the%20photo%20and%20add%20your%20custom%20title.%0A%0ASign%20up%20for%20the%20lesson%3A%20www.webflowtips.com/b/how-to-create-custom-book-covers%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A19%20of%2050
Tags:
- book
- books
- library
- tutorial
- tutorials
- webflow%20tutorial
- tips
Visit Site
Text%20reveal%20different%20directions
Revealing%20texts%20from%20different%20directions%20is%20a%20very%20popular%20animation%20these%20days.%20You%20can%20find%20it%20in%20hundreds%20of%20the%20best%20sites%2C%20like%20the%20one%20that%20inspired%20me%3A%20Vendredi%20Society%20%28https%3A//www.vendredi-society.fr/%29%0A---%0AThe%20best%20thing%20is%2C%20it%20is%20not%20hard%20at%20all%20to%20achieve.%20In%20this%20clonable%20you%20can%20find%20a%20simple%20way%20to%20achieve%20this%20animation%20from%20different%20sides%3A%20top%2C%20right%2C%20bottom%2C%20left.%0A---%0ASign%20up%20for%20the%20lesson%3A%20https%3A//www.webflowtips.com/b/how-to-animate-text-that-reveals-from-different-directions%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A18%20of%2050
Tags:
- typography
- animation
- textanimation
- text
- reveal
- interaction
- hero
- typograhpy
Visit Site
.gif)
Circles%20Appearing
Linear.app%20site%20is%20beautifully%20designed.%20I%20created%20a%20similar%20hero%20header%20inspired%20by%20their%20careers%20page.%20It%20was%20done%20using%20only%20Webflow%20animations.%0A%0ASign%20up%20for%20the%20lesson%3A%20https%3A//www.webflowtips.com/b/how-to-create-appearing-circles%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A17%20of%2050
Tags:
- circles
- animation
- interaction
- tutorial
- tips
- heroanimation
- hero
- header
Visit Site
Animated%20Hamburger%20Menu%20%231
I%20am%20a%20fan%20of%20learning%20from%20small%20interactions.%20I%20challenged%20myself%20to%20re-create%20the%20hamburger%20menu%20icon%20of%20the%20beautiful%20site%20of%20Steve%20Edge%20Design%20%28https%3A//www.steve-edge.com/%29%20using%20only%20Webflow%20animations.%0A%0AThere%20are%20two%20versions%20of%20this%20button%3A%20Small%20and%20Big.%20However%20you%20can%20easily%20modify%20the%20design%20and%20the%20animation.%0A%0ASign%20up%20for%20the%20lesson%3A%20https%3A//www.webflowtips.com/b/how-to-create-menu-button-1%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A16%20of%2050
Tags:
- animation
- animations
- button
- icon
- menu
- hamburger
- tips
- tutorial
Visit Site
Swatchbook%20Contact
I%20challenged%20myself%20to%20re-create%20a%20Swatchbook%20inspired%20by%20Kitty%20Giraudel%20%28https%3A//codepen.io/KittyGiraudel/pen/DbGEYo%29.%20It%20is%20made%20without%20custom%20code.%0A%0ASign%20up%20for%20the%20lesson%3A%20https%3A//www.webflowtips.com/b/how-to-create-a-swatchbook%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A15%20of%2050
Tags:
- tutorial
- swatchbook
- animation
- effect
- icons
- contact
- tips
Visit Site
Text%20Animations%20with%20Anime.js
Text%20animations%20are%20everywhere%20these%20days%20on%20the%20web.%20Here%20are%20four%20letter%20animations%20using%20the%20library%20anime.js%20that%20can%20spice%20up%20your%20designs.%20%0A%0ATo%20use%20it%20just%20follow%20these%20simple%20steps%3A%0A%0A**It%20only%20works%20on%20published%20sites%20not%20on%20the%20Webflow%20builder%20**%0A%0A1.%20Give%20a%20class%20to%20the%20text%20you%20want%20to%20animate.%20For%20example%3A%20%u201Canimation1%u201D%0A2.%20Add%20a%20span%20to%20the%20text%20and%20give%20it%20a%20class%20of%20%u201Cletter%u201D%0A3.%20Copy%20the%20code%20on%20%22Settings%20%3E%20Before%20body%20tag%22%20and%20make%20sure%20you%20change%20the%20class%20to%20the%20one%20you%20used%20on%20step%201.%20%0A%0AThat%27s%20it%21%20If%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0ASign%20up%20for%20the%20lesson%3A%20https%3A//www.webflowtips.com/b/how-to-animate-texts-using-anime-js%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A14%20of%2050
Tags:
- typography
- animation
- text
- animejs
- interactions
- minimal
- tutorial
- tips
Visit Site
Multiple%20Songs%20/%20Audio%20%28Same%20Page%29
Adding%20audio%20files%20on%20Webflow%20can%20be%20tricky.%20Here%20is%20a%20way%20to%20have%20as%20many%20audio%20files%20as%20you%20want%20which%20will%20play/pause%20every%20time%20you%20click%20a%20button.%20Follow%20these%20steps%3A%0A%0A*%20It%20only%20works%20on%20published%20sites%20not%20on%20the%20Webflow%20builder%20**%0A%0A1.%20Add%20an%20embed%20block%20on%20your%20project%20with%20as%20many%20audio%20tags%20as%20you%20want.%20You%20just%20have%20to%20change%20the%20unique%20%22id%22%20of%20each%20one.%20Example%3A%20%3Caudio%20id%3D%22player1%22%20loop%20src%3D%22your-song.mp3%22%3E%3C/audio%3E%3Caudio%20id%3D%22player2%22%20loop%20src%3D%22your-song2.mp3%22%3E%3C/audio%3E%0A%0A2.%20Add%20a%20button%20for%20each%20audio%20tag%20with%20a%20unique%20%22id%22%20%28on%20the%20%22Element%20Settings%22%20section%29.%20Example%3A%20button1%2C%20button2%0A%0A3.%20Copy%20the%20code%20on%20%22Settings%20%3E%20Before%20body%20tag%22%20on%20this%20project%20with%20the%20%22id%22s%20that%20you%20added%20on%20your%20players%20and%20buttons.%0A%0AThat%27s%20it%21%20If%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0ASign%20up%20for%20the%20lesson%3A%20https%3A//www.webflowtips.com/b/how-to-add-multiple-songs-on-the-same-page%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A13%20of%2050%0A--%0AResources%3A%20%0APhotos%3A%20Unsplash%20%0ASongs%3A%20Pixabay
Tags:
- audio
- audioplayer
- song
- music
- musica
- tutorial
- tips
Visit Site
Alphabet%20page%20loader
A%20simple%20page%20loader%20using%20all%20the%20letters%20in%20the%20alphabet.%20Everything%20is%20done%20with%20Webflow%20%28No%20custom%20code%29.%20It%20was%20inspired%20by%20galeriaindex.com%0A%0ASign%20up%20for%20the%20lesson%3A%20https%3A//www.webflowtips.com/b/how-to-create-an-alphabet-page-loader%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A12%20of%2050
Tags:
- animation
- tutorial
- tutorials
- type
- typography
- alphabet
Visit Site
How%20to%20create%20a%20Control%20Center%20menu%20inspired%20by%20Apple%3F
Here%20is%20one%20tip%20a%20little%20bit%20different%20than%20the%20others.%20I%20recreated%20a%20menu%20that%20is%20similar%20to%20Apple%27s%20Control%20Center.%20There%20are%20two%20animations%20that%20I%20still%20think%20need%20some%20polishing.%20%0A%0ASign%20up%20for%20the%20lesson%3A%20https%3A//www.webflowtips.com/b/how-to-create-a-control-center-menu%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A11%20of%2050%0A%0AThis%20WebflowTip%20was%20inspired%20by%20Jordan%20Singer%20tweet%20%28https%3A//twitter.com/jsngr/status/1276700160643551232%29
Tags:
- tutorial
- tutorials
- tips
- apple
- menu
- animation
Visit Site
How%20to%20animate%20a%20number%20counter%3F
You%20can%20easily%20animate%20a%20number%20counter%20like%20the%20Pros%20do%21%20To%20do%20that%20you%20only%20have%20to%3A%0A%0A1%29%20Add%20a%20class%20to%20the%20number%20you%20want%20to%20animate%20%0A2%29%20Copy%20and%20paste%20the%20code%20in%20the%20%22Settings%20%3E%20Before%20body%20Tag%22%20%0A3%29%20In%20the%20code%20change%20the%20name%20of%20the%20class%20to%20the%20one%20you%20used%20%28classes%20start%20with%20a%20%22.%22%29%20.%20%0A4%29%20Modify%20the%20parameters%20that%20work%20for%20you%20%28start%2C%20end%2C%20duration%2C%20delay%2C%20true%2C%20repeat%2C%20decimals%2C%20currency%2C%20separator%29%20%0A%0A*Repeat%20this%20process%20If%20you%20have%20different%20numbers%20with%20different%20parameters%20%28check%20the%20clonable%20for%20an%20example%29%0A**%20Remember%20that%20this%20will%20only%20work%20on%20published%20sites.%20%0A%0ASign%20up%20for%20the%20lesson%3A%20https%3A//www.webflowtips.com/b/how-to-animate-a-number-counter%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A10%20of%2050
Tags:
- counter
- autocounter
- numbers
- animation
- tips
- webflowtips
- tutorial
- numbercounter
- countup
Visit Site
How%20to%20Animate%20a%20Progress%20Bar%3F
You%20can%20also%20improve%20your%20portfolio%20by%20adding%20an%20animated%20progress%20bar%20in%20just%2010%20minutes.%20%20Simply%20modify%20the%20width%20%25%20to%20your%20preferred%20number.%20%0A%0ASign%20up%20for%20the%20lesson%3A%20http%3A//www.webflowtips.com/b/how-to-animate-a-progress-bar%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A9%20of%2050
Tags:
- progressbar
- animation
- tutorial
- webflowtips
- card
- tips
Visit Site
How%20to%20add%20a%20particle%20bounce%20animation%3F
In%20just%20a%20couple%20clicks%20you%20can%20add%20a%20bouncing%20particle%20animation%20to%20any%20of%20your%20projects.%20You%20can%20just%20copy%20and%20paste%20the%20code%20on%20the%20%u201Ccustom%20code%u201D%20section%20and%20modify%20it%20if%20you%20feel%20adventurous.%20%0A%0ASign%20up%20if%20you%20want%20the%20lesson%3A%20www.webflowtips.com/b/how-to-create-a-particle-animation%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%0A%0AP.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A8%20of%2050
Tags:
- particle
- particles
- animation
- tutorial
- canvas
- tips
Visit Site
How%20to%20create%20a%20text%20that%20changes%20color%3F
I%20have%20seen%20this%20effect%20in%20many%20websites%20these%20days.%20Here%20are%20two%20simple%20ways%20to%20create%20a%20text%20that%20changes%20color%20automatically%20and%20only%20take%205%20minutes%20to%20implement.%20%0A%0ASign%20up%20if%20you%20want%20the%20lesson%3A%20https%3A//www.webflowtips.com/b/how-to-create-a-text-that-changes-color%0A%0AIf%20you%20have%20any%20questions%20feel%20free%20to%20comment.%20%0A%0A%20P.S%20%uD83D%uDE42%20%20%uD83D%uDE4C%20%20-%20Like%20or%20follow%20if%20this%20was%20useful%20for%20you.%0A%0A7%20of%2050
Tags:
- beginner
- animation
- tutorials
- tutorial
- tips
Visit Site