Discover the best reveal websites created by professional designers. Get inspired and start planning your perfect reveal web design today!

Design by https://www.callbruno.com/en/

This cloneable is for learning purposes only. I do not own the rights to this design and content.

Bruno

Scroll Transition Into Portfolio

Tutorial: https://www.youtube.com/watch?v=Q17Q5-isg0I

Based on this shot by Cuberto https://dribbble.com/shots/6358927-Mitosis-After-Effects

Note: This experimental goo effect does not yet work on Safari.

Gooey Card Effect

This cloneable uses a paid GSAP plugin called SplitText that can be purchased at https://greensock.com/club/

Text Animations

Text Reveal Animations on Scroll

A simple but effective hover effect to reveal an inline image within some link text. Great for big and bold hero CTAs.

If this has helped you in any way, please consider buying me a coffee! buymeacoffee.com/samhodges88

Thanks!

Hover Text to reveal Inline Image

Hover Link to Reveal Image

Revealing texts from different directions is a very popular animation these days. You can find it in hundreds of the best sites, like the one that inspired me: Vendredi Society (https://www.vendredi-society.fr/)
---
The best thing is, it is not hard at all to achieve. In this clonable you can find a simple way to achieve this animation from different sides: top, right, bottom, left.
---
Sign up for the lesson: https://www.webflowtips.com/b/how-to-animate-text-that-reveals-from-different-directions

If you have any questions feel free to comment.

P.S 🙂  🙌  - Like or follow if this was useful for you.

18 of 50

Text reveal different directions

Text Reveal Different Directions

Rebuild of https://www.awwwards.com/annual-awards-2021 winners menu.

Menu Hover Effect

Simple transition shows a two word headline over a background video element. 

As the user scrolls down the page, the full screen video is revealed and the title fades away. Keep scrolling for a smooth transition right back to white as the video opacity fades out to reveal the next section below.

Video reveal transition

Background Video Reveal

How I built the animated reveal effect for the panels on the http://theexpedition.co homepage using native IX2 interactions.

Panel Reveal

Animated Scrolling Panel Reveal

One of my favorite, trendy interactions is a footer that reveals itself once the user gets to the bottom of the page. I've used this effect a number of times, and thought I'd share it with you (trendy vertical nav included)! Enjoy, and clone away!

For Cloners: Be sure to make the height of the section-footer-spacer to be the same as your footer height is for the reveal to work! Or, if your footers height is content-based, duplicate the footer as you want it, rename it, and give it the following values: z-index: 0, opacity: 0, position: relative. That should solve any issues you might have!

Footer Reveal on Scroll

Trendy Footer Reveal!

To announce the new blending mode and backdrop filter features, Webflow reached out asking me to design and develop three eye-catching builds in two days. I quickly asked two of my friends, Shelby & Corey, for help creating the designs. This is one of the concepts that was chosen.

Project Team
Corey, https://dribbble.com/coreyschneiderdesign
Shelby, https://dribbble.com/shelbybuquet
Timothy, https://dribbble.com/tricks

Artsnob

Hello fellow Webflowers,

We have built a fresh freebie services overview page. All categories with associated references are dynamically loaded with Webflow collection items. - you can simply add new categories or associated references and remain a good user experience by enabling the progress bar indicator. 🤩 

The progress bar we created scrolls to the dynamic collection blocks, this is 'normally' not possible, because collections can't have anchor links. We resolved this with a nice hack by assigning an 'ID' to the collection classes 😄 thru an embed and then converting the progress bar links to anchor links so you can scroll back and forth thru all the collection items. 🤙

If you like this project and find it helpful please like ❤️ it so other Webflowers can see this project and use it on their next website 🙌

Dynamic collection progressbar

Progressbar - anchor links - Dynamic Collection

This is a rebuild of the sticky interaction effect on the new iPhone Xs page. After scrubbing through youtube tutorials, many webflow forum posts and just plain ol' fiddling around with settings, I finally achieved something pretty close.

I look forward to seeing you all clone away and make something more awesome with this.

🐙✌🏼

Sticky Effect

iPhone Xs Sticky Animation Effect

99% Webflow 
1% Custom CSS


.without-fill {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #000;
}

text outline animation

Text Stroke Animation

A scroll-into-view animation that animates teaser images as soon as they come into the viewable area of the page visitor. This works with background videos as well (last item).

Tutorial: https://youtu.be/75xVsFPtWz0

Portfolio Grid with Teaser Animation

Portfolio Grid Teaser Animation

This is just a fun, simple clone I've built to experiment with some interactions.

It features a hero section that reveals changing images & videos (using CSS). I've written some code that will simulate the cycling effect on Tablet/ Mobile. 

My stretch goal is to refine the "menu interaction" (need to spend a bit more time) and implement a dark mode switch. Rebuilt from https://www.cristobalbalenciagamuseoa.com

Hero Changer

Cycle Images on Hover

A simple button that I just came up with that's inspired by https://webflow.com/moshfequr9 's work.
Might do simple things like these in the future!

Let me know what you think.
Feel free to clone this and enjoy! :)

Button. Circle to Fill & Arrow Reveal

Button Hover. Circle Fill & Arrow Reveal

page-load animation with grid, using an overlay on the image to create a unique timed reveal. First broke the stock image into 6 frames.

Boxes on Boxes | Reveal Animation

Boxes Portrait Reveal

We recently launched Jinglebell.io and we're making our announcement page clonable for your next project's big reveal!

We've also got AMAZING free templates and kits coming up, make sure to follow us to get all the freebies!

Discover reveal websites built by the Webflow community

Discover reveal websites built by the Webflow community