Motion Hover Effects with Image Distortions using Three.js!

The project is based on the beautiful work of creative developers Niccolò Miranda and Clément Roche. Their respective contact details can be found within the project - I encourage you to contact them for any high-quality freelance work. 

Original Repo: https://github.com/clementroche/motion-hover-effects

* All images are subject to Copyright © 2019 ∆ Studio–JQ ∆ (https://dribbble.com/STUDIOJQ)

Motion Hover Effect

OGL (lite version of webGL)

https://github.com/oframe/ogl

ogl mousemove effect

The objective of this project is to bring to life inspiring IX shots seen in Dribbble.

Please, consider giving this project a "like" ❤️ if you benefit from it.

Credits
UI & IX design: https://dribbble.com/shots/5723383-Nature
Photgraphy: https://unsplash.com/@davidmarcu

Nature Parallax

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

5 Image Trail Effects

Create an astonishing Audio Player in Webflow and make your site playing. Customize it according to your preferences, there's no limit to your design vision. Single track player, multi-tracks, playlist... all you need to play is here.

Audio Player

.mask {
  -webkit-text-fill-color: transparent; 
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px #fff;
}

Great browser support (IE is not supported)

Custom Clipping Mask

Price calculator using custom java script code.
By https://www.webflow-experts.com/

Calculator

Hello there again! Here's a little something I've been working on today. This is my first ecommerce and I really enjoyed it, and how easy it is. Did all this in one day and I will customize it a bit more in the following days. All the product pic are from (the amazing) products in Urban Outfitters. 

Hope you guys like it! Enjoy, and as per usual, feel free to clone it to use it in your projects.

MODULAR — Online Store

Image hover zoom effect only with Webflow IX2. Maybe there is a better way :D
-
Forum post > https://forum.webflow.com/t/how-to-create-hover-over-effect-for-magnifying-images-on-pages/78225/3

Image zoom effect

The project was made to help a forum question > https://forum.webflow.com/t/rotating-text-in-a-sentence/76920

Changing words in a sentence

A collection of animations and interactions made on webflow.

You can also check out Webflow Samples 1: https://webflow.com/website/webflow-samples

Webflow Samples 2

Reverse engineered version of Webflow's very own sticky section component found here: https://webflow.com/solutions/freelancers-agencies.  

Details:
- It's using a proxy div (4x) to call the 'Scroll In/Out of View' interactions
- There is custom code in the footer used for video playback controls (starting/stopping video at specific time based on scroll position)
- 100% credit to Webflow team for design and original implementation

Webflow Sticky Sections

Dropdown

Trying out remaking and animating this shot done by me: https://dribbble.com/shots/5366442-Minimal-Portfolio-Exploration

*Done for learning purposes, clients are not real.
Let me know what you think.

Minimal Mouse Portfolio

Prototype from late 2017 that uses fullpage.js for section 'snap'.

*There are a few bugs / clean up items I never had a chance to address - The list below is what I remember (not exhaustive):

1) Optimizations For Mobile (making the title a link, cross-browser testing, etc.)   
 
2) Improved Performance (Firefox)

Diagonal Snap Scroll

100% Webflow Pre-Load Entrance Animation with one exception. The number counter is using jquery but this can be removed via the custom code panel (footer).

Pre-Loader-Animation

Subtle background noise - There are two pages within this project:

1) Custom CSS version
2) 100% Webflow version

Background Noise Effect (100% Webflow)

1. Text Fill (100% Webflow)
2. Character Tween (Greensock's Tweenmax)
3. Smooth Landing (100% Webflow)
4. GIF Background (Custom CSS)
5. Mosemove Warp (Blotter.JS)

Phil Bastiaans

About

About

About