RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

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

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

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

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)

Text Hover Animations

Description

More by CJ Hersh