RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

The goal was to create an animation that gives a photo the sensation of snapping together and breaking apart on scroll. I split a photo into five vertical frames with the same image overlaid.

The scroll animation turns opacity up/down at just the right time.

Five Frame Drop - Scroll Animation

Inspired by an interaction I saw online and wanted to build in Webflow. Background images are set on unique combo classes, each base class set with a size/filter/bg color animation. Mobile responsive with a click IX while the desktop is hover. Sized by width percentage for desktop and height on mobile.

Built on Finsweet client-first clone.

Expanding Gallery on Hover - Mobile Responsive

Custom accordion tabs with IX animation. Struggled with the image/tab-pane animation so just left it with the fade from the tab settings for now. Neat stuff.

Custom Accordion Tabs w/ Image Reveal

page-load animation with grid, using an overlay on the image to create a unique timed reveal. First broke the stock image into 6 frames.

Boxes Portrait Reveal

Description

More by Jon Larson