Custom slider transition to change the size and focus as the slide changes.

Have fun cloning. 😄

====================

💖☕ Support us by buying us a coffee.

If you enjoy our content, please consider supporting us. Your support will help us grow bigger and provide the community with better content.

https://www.buymeacoffee.com/sketchzlab

===================

💌 Follow us on social media.

Facebook @ www.facebook.com/sketchzlab
Instagram @ www.instagram.com/sketchzlab/
Twitter @ www.twitter.com/SketchzLab
Webflow @ www.webflow.com/SketchzLab
LinkedIn @ www.linkedin.com/company/sketchzlab/
YouTube @ www.youtube.com/channel/UCAEXTAQ7IAG71rsJ1ehBnzQ

SketchzLab - Slider Custom Transition - 1 (Slide, Scale and Blur)

Was a little worried that I wasn't going to be able to achieve this effect; the left rail of photos moving with the slider, the text being yellow over the images... it all seemed impossible.

But, as I am constantly finding out, nothing is impossible in Webflow. Made purely with CSS, Interactions, and alot of messing about. Particularly proud of some of the smaller viewport accommodations.

Clone away, and let me know what you think in the comments, or if you're interested in knowing how I made this project come to life.

Strive, "Plaid Dress": https://dribbble.com/shots/6711696-Plaid-Dress

Dynamic Hero Slider! - Dribbble Series ft. Strive

A WebGL prototype showcasing some amazing artwork by StudioJQ. Just press and drag to explore.

The code is based on an awesome project by creative developer Daniel Velasquez and it is modified to more easily integrate with Webflow.

Original Repo: https://github.com/Anemolo/StickyImageEffect

* You can update the Text, Links, and Images in footer (via page settings).
* Easily modify the effects speed, frequency, etc. in footer (via page settings). 
* I have not done thorough testing so please comment with any feedback and/or issues. 
* All images are subject to Copyright © 2019 ∆ Studio–JQ ∆ (https://dribbble.com/STUDIOJQ)

Update 10/16/19: 1) Clicking links now works on mobile and will no longer activate the sticky effect across all devices.

Sticky Image Showcase

This is a MacBook with a scrollable image to showcase whatever you want :)

MacBook with scroll

Docs: https://github.com/codrops/ImageTrailEffects/

5 Image Trail Effects

TLDR; people seem to like this circular text with movement, so I thought I'd try and see if I couldn't hack in WF. I did. This is that.

Powered by circletype.js, it's a little wonky and weird with regards to how it's sized... but it works. Includes interactions for page load, scrolling through sections, and for page transitions.

Clone away, and let me know what you think in the comments!

Trendy AF Circular Text

Saw something like this on the WeTransfer website the other day and wanted to see if I could recreate it in Webflow. 

Hover over the stack to fan the cards and show off the beautiful images. Feel free to clone and modify the project. 

Illustrations by - https://dribbble.com/PatrykW

Card Fan on Hover

Daily Direction Tutorial set. A range of really nice micro interaction for your personal projects.

Tutorials: https://www.youtube.com/watch?v=zRnR7hu2EoU&list=PL4y7e0E80p44ddI_hKSB2bu26rFCdDFfc

Hope you enjoy.

Daily Direction Micro Interactions

Scroll-based effects implemented in Webflow. 

Current Effects:
1. RGB Shift 
2. Stretch Scroll
3. Mix-Blend
4. Video Scrubbing*
5. Skew Velocity
6. Looping Scroll*
7. Split Scroll*
8. Split Scroll Loop*
9. Page Auto-Scrolling
10. Drag Slider To Scroll
11. Blur Text On Scroll

* Items with asterisks not optimized on mobile

Author credit + resources (if applicable), are in the custom code panels.

Updated 01/2020

Scroll Interactions

A twist on a tradition slider, cloneable website with the use of Z-index and mouse over animations.

zara-collection

This template uses CSS Sticky and IX2 to showcase a Horizontal Scroll effect on a wide content section.

Sticky + Horizontal Scroll Demo

Welcome to Dribbble series, where I attempt to bring to life projects created by popular Dribble artists using only the elements supplied by Webflow! Todays project is web design 04 - Photo Studio by Romeo M. • https://dribbble.com/shots/5593011-web-design-04-Photo-Studio

In my freelancing using Webflow, 95% of my work involves creating crazy, weird sliders that accomplish certain goals. This project is peak slider; displaying information, using grid, with customizations applied to the snide nav, arrows, & content.

For this project, I opted to change a few things that didn't make sense. For example, there were 3 different places in the page where social links were listed, which felt like overkill. I also nixed the mouse icon in the prev/next section, as the slider doesn't let you interact like that. Clone away, and let me know what you think in the comments! Be sure to download the Fontawesome font family to make sure the icons work (https://fontawesome.com/cheatsheet)

CSS GRID HERO 2 - Dribbble Series - web design 04 - Photo Studio

Welcome to Dribbble series, a new effort in which I attempt to bring to life interactions created by popular Dribble artists using only the elements supplied by Webflow! Today's project is based on 022 • Search by user Clara Boyle (https://dribbble.com/shots/5355680-022-Search)

Microinteractions are not only trendy, but a vital piece of user experience in 2018. Here's a simple, effective way to minimize and maximize a critical element of your site, the search function. with a simple click, the icon representing the action becomes the button for the action itself. Simple, easy, and intuitive. Clone away!

Trendy Search Interaction - 022 • Search by Clara Boyle - Joshwork Dribbble Series

One of my favorite modern web effects is when a menu hides on scroll down and reveals on scroll up. Most mobile web browsers like Google Chrome do this for their top menus, and for good reason; moving these elements out of the way of the user allows the page content to reign supreme.

I use this effect on my personal site, and now so can you! You can also customize the delay or offset to whenever you'd like the menu to start disappearing or reappearing. Don't forget to like, comment, and clone away!

Fancy Hide/Show Menu on Scroll

Hey everyone! Just playing with some super simple headline highlight effects, and thought I'd share them with you! Enjoy!

Headline Highlight + Display on Load/Scroll/Click

Experimental fan art using divs and svgs with mouse movement and scroll interactions. Great on desktop but too heavy for mobile... Thanks for looking!

Sky Box

This is demo of some "sticky on scroll" elements I created completely within Webflow. I tried my best to explain how I did it, but I'm happy to answer any questions you have about the setup.

NOTE: This setup may not work in older browsers.

Sticky On Scroll

You'll find here all the experiments made to answer public questions on the Webflow forum

Britney J Parks

About

About

About