While learning about canvas last year, I took some time to reverse engineer (hack together) this beautiful slider, originally built by the team at ToyFight. The real beauty is in the desktop interaction. 

Some notes:
- Mobile view is using Hammer.JS for the slider
- Images can be updated by changing the attributes found in each <li>. Just replace the current image URL with your own.
- The "View Details" URL's can be updated the same way. 
- You can change "View Details" to say "View Project" by changing the attribute 'data-video' to false. If you want it to say something else, feel free to dive into the code - it's a fairly easy change. 

Credit: The ToyFight Team!

Canvas Slider

Our first Webflow-made website!

Annapurna is a group of coaches based in Canada. They provide corporate and executive coaching as well as team-building workshops. Focusing on individuals, businesses and leaders alike, they help clients achieve their personal, professional or organizational goals.

Note: The site is hosted outside of Webflow, hence the re-direct to the live link. Only tiny outside edits to the code were made (performance boosting, nothing structural). Everything you will see was built within Webflow ^^

Annapurna Coaching

A set of interesting looking image transitions including distortion and warp effects made with WebGL.

I modified the original code to behave as a bi-directional looping slider. Works on both desktop and mobile! Leave a comment with any questions.

*Demo 5 supports Webflow's native Slider component (see details re implementation in comments below).

Repo: https://github.com/akella/webGLImageTransitions
Original Author: Yuriy Artyukh

WebGL Image Slider

Studiopowell is a design firm specializing in brand identity, web design, and creative direction.

studiopowell

Northand Films is a video production company from Montreal working with clients who like to put themselves out there.

Northand Films

Osiki your lifestyle app for audience choice awards, reality shows which saves time on the voting process making it fast and easy.

osiki-landing

This is the site for an illustration library called Open Doodles. It uses a combination of CSS Grid, Flexbox, two CMS collections, symbols, and hover interactions! Making it clonable in hopes others can use it as a starting point or as a way to learn new tricks.

Feel free to use this site and illustrations however you want. You can copy, edit, remix, or close the site and these images for any personal or commercial use.

If you have suggestions on how to improve the website, I would love to hear them!

Open Doodles Site

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

I'd like to share with you my first study project. This project shows how to use Barba.js base transition and Webflow interactions together. I spent a few weeks searching for the right parts of custom code and understanding the processes in general. I'll be very grateful for your likes of this project.
To see the custom code I used you need to clone the project and look at the custom code tab in the project settings.
I'll add a project with a custom Barba.js transition soon, so subscribe to my Webflow profile to make sure you don't miss anything.

Barba.js doesn't work in webflow project preview mode.
To see the transition open the live site.

Barba JS Base Transition Webflow Reinit

Jomor Design is a magical land where wondrous branding and web design happens. So let’s never stop amusing ourselves.

Jomor Design

FEATURES:

- Step counter
- Custom confirmation animation
- Custom checkboxes

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

🥰 Support Us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

✒️ Licence Notes:

⦿ Images available under CC0 (Unsplash, Pexels, Freepix or Similar)
⦿Typography available under SIL Open Font License 1.1 (Inter)
⦿ Iconography available under CC0 (UpLabs, Flaticon, Noun Project)

Multi Step Form Webflow

Portfolio of User Interface and Interactive Designer Rodolfo Sarno.

Rodolfo Sarno

Adds scroll trigger functionality to Webflow's native slider via a simple script in footer. 

Details:

- Cross-browser compatible
- Binds the script’s wheel event within a specific div (via div ID).
- Includes debounce function to ensure the next/prev slide trigger is fired only once per scroll event.

Change Slide On Scroll Utility

Parallax Menu

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

#MadeInWebflow fun 😊
Inspired by awesome work from @BestServedBold (https://dribbble.com/shots/3963765-3D-Interactions-Series-1-Toggle-Switch)

3D Ball-switch created by using @Webflow Interactions 2.0.

Charbel Hajj

About

About

About