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

ThreeSixtyEight

Clone Responsive Website Starter

Responsive Webflow Style Guide Clone

Interpreting Form®

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

WebDev For You - Daily Interaction #130

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

WebDev For You - Daily Interaction #129

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

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

WebDev For You - Daily Interaction #131

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

Perfect Fourth (Font-scale) Preset

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

WebDev For You - Daily Interaction #30

También

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

Webflow Tips N°10 : Click & hover animation

Hi, enjoy this clonable project, seeya :) 

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

Webflow Tips / Scale effect

alextourgis-webflowtips-scale-effect

Scale the image while you scrolling in the view

Webflow Tips N°9 :  Scale effect

Webflow Tips N°9 : 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

space

spacekv

Bookmark

Card Hover

040 - 100 days of @webflow interactions

#40 Card Hover

Cleff

Cloud Efficiency Consultants

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

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

Background Scale Effect

Clip Path Background Scale

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

Scale In Text Animation (GSAP)

scale-in

Landing page for my premium Figma Design System that you can buy today, with all proceeds going towards my Wife's cancer treatment.

Features:
- Switch between light and dark mode
- 3D hero image done in Cinema 4D
- Interaction that cycles through words in the hero

Visit the site, toggle dark mode on and off, learn about Scale, buy a licence from Gumroad if you'd like to support my Wife, and feel free to sign up for updates 🙂.

http://www.scaledesignsystem.com

Discover scale websites built by the Webflow community

Discover scale websites built by the Webflow community