RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

Portfolio with a fixed slogan that changes content when scrolling through the individual projects. 

This project is inspired by Nelson Abalos Jr's «How to Webflow»: https://youtu.be/Y0W_xYrbzmA. 

The embeded code is compatible with all popular browsers including specific adaptations to Internet Explorer and Edge.

Text reveal masking on scroll

CSS Scroll snapping locks the position of the viewport to specific elements on a scrollable container. It's like putting a magnet on top of the top of a section that forces the page to stop scrolling right there.

The property «scroll-snap-type» gives a pure-CSS way to handle this behavior.

Pure CSS Scroll Snap Action like Scrollify

Breaking Webflow's limitations! An easy and lightweight way to nest multiple collections with unlimited items on any single page with jQuery .load() which pulls the multi-reference info from any individual page into an HTML embed, that works like a nested collection. 

This solution is based on the jQuery .load() function - a simple way to fetch data from a server and place the returned HTML into a matching element. 

For more details have a look at the sample blog pages in this project, read the short documentation (How to?) you'll find in this project and feel free to clone the whole project.

Add on: With the internal functions of Webflow it is not possible to sort native nested collection items. The order is determined exclusively by the order of the tags in the CMS field. This project includes a script that allows you to alphabetically sort both Webflow's native and limited nested collection lists as well as the unlimited nested collection lists generated by jQuery.

Multiple nested Collections with unlimited Items on single pages in Webflow

Macy.js is a lightweight masonry layout library and it works great in webflow. This project uses masonry in connection with a CMS Blog Collection. Feel free to clone if you like it ;-).

Masonry Layout with Macy.js

Description

More by Philipp Roth