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

ThreeSixtyEight

Responsive Webflow Style Guide Clone

Jonas Arleth

If you watch the tutorial, you'll notice that the best performance and sharpness of the lettering can only be achieved with an SVG.
That's actually the way Apple uses it as well. The disadvantage is that you have to export an extra SVG image for your own wording.

Animating text elements with scale does not work, because Chrome renders the font blurry 😟

Effect works well on mobiel too!

Apple.com Zoom In Typo Scroll Animation

Bien Studio

WebDev For You

Welcome to Daily Interaction #129.

This demo showcases a 180° project card animation on hover and click.

With this effect stars scale in and out behind the image. Also on mouse move the image moves around the card. When you click on the card the card rotate 180 degrees to reveal the more information.

For the stars I created a 6x8 grid of 50x50 blocks and added two div blocks inside to create the cross. Then in interactions I have them rotate, scale, and loop on hover. On hover out the crosses go back to their original size and stop rotating. For the image moving I added a mouse move over element interaction and just moved the image 20px to each side as the mouse moved around the card. On click I added a rotation to the card, so I made sure to place the card in a 3d-wrapper and added child perspective to it. Then inside of the card wrapper I added a front and back div to represent the front and back of the card.

WebDev For You - Daily Interaction #129

Welcome to Daily Interaction #130.

This demo showcases a blog card animation on hover.

With this effect the image rotates, a color overlay appears, and the date of the blog post appears on hover. The summary panel below also moves up. When hovering over the 'Read More' button the background and text changes color.

I first added all of the elements and then animated via interactions. For the image I placed it inside of an image wrapper and set the overflow of the wrapper to hidden. I then set the width and height of the image to 150% so that when it rotates it is still visible inside of the image wrapper.

Inspired by: https://codepen.io/ChuiSauCE/pen/KGpQbe

Daily interactions will resume on Monday June 3rd.

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #130

Welcome to Daily Interaction #131.

With this effect a border appears around the logo and lines appear from all corners of the logo.

The effect was achieved by setting the border color to transparent on the initial state and on the hover state changing it to black. I then placed lines with a width of 15px and height of 3px and vice versa in the different corners of the logo. Then in interactions I scaled them from 0 to 1 respectively on the x and y axis for the horizontal and vertical lines. To minimize the number of interactions that needed to be applied to the lines I created a class for the corner horizontal lines and the corner vertical lines. I then added combo classes and placed the lines in the different corners around the logo. This allowed me to only use two interactions for the horizontal and vertical lines. I also changed the transform-origin for the different lines so they scaled in from the correction side.

Inspired by: https://codepen.io/Sherpa23/pen/rKvJXg

WebDev For You - Daily Interaction #131

También

Hover animation and click animation, the image will scale in a different way

Webflow Tips N°10 : Click & hover animation

Alex Tourgis

Janguru, who mean Jungle in Japanese, is a recruitment and headhunting company create by Balerein Aranda Arestizabal. I create this website who want to break the corporate image of HR website and be closer to her creative clients.

Janguru

Web Bae

This interaction creates a grid zoom while scrolling effect in Webflow. These grid scroll animations are a great way to feature gallery content like portfolio work or products.

Grid Zoom while Scrolling

Okayokay

Preset to give you a starting point for your next website. Build in the "Perfect fourth" font scale.

Free to use, with love from Okayokay.dk

Perfect Fourth (Font-scale) Preset

Scale the image while you scrolling in the view

Webflow Tips N°9 : Scale effect

Master Flowmaker

Card Hover

040 - 100 days of @webflow interactions

#40 Card Hover

Use child perspective to make elements 3d, now let's build daily interaction #30.

This demo showcases an image zoom effect on hover.

To view more daily interactions and premium content visit: https://www.webdevforyou.com/

WebDev For You - Daily Interaction #30

Webflow University

Learn how to go from blog design to a full product ready blog in an hour.

Watch the whole stream: https://www.youtube.com/watch?v=ljVrFz79fdA

Workflow series: Scale your Webflow blog

Hi, enjoy this clonable project, seeya :) 

https://www.tambien.studio/
https://www.youtube.com/alextourgis

alextourgis-webflowtips-scale-effect

KajalValand

Here is a clean and simple micro site with smooth, simple, achievable animation. 

To showcase images i've used CMS with a drag-able(custom code ) slider and interactions with rotation and scale.

Images are from Unsplash.com.

Please do let me know if you have any other suggestions for a clone-able. 👍🏽

Like and Follow  😊 💛
-----------------------------------------------------------------------

Contact me for collaborations - message me on: 
kajalvaland.com or you can find me on Twitter: https://twitter.com/KajValand

spacekv

Scale in text animation with GSAP. Check out the tutorial on YouTube!

scale-in

Jakob Wrs

Hey, I found this on GitHub and rebuilt it in Webflow 😊
Have fun with it

Source:
https://github.com/codrops/BackgroundScaleHoverEffect/

Discover scale websites built by the Webflow community

Discover scale websites built by the Webflow community