30% bundle discount on all courses!

Portfolio Grid: Build a Photo Magnet Menu in Webflow

Level: Intermediate
Animation
ressourcen
Free Cloneable
Live Vorschau
* AFFILIATE LINK
Details
Level
Intermediate
Date
July 12, 2026
Author
Jonas Arleth
Share
Auf X teilen
Share on LinkedIn
Share on Reddit
Share via email
Share on WhatsApp
Blog Post

In this Webflow tutorial, we'll build a photo magnet text menu together. An image is first displayed with a hover effect and then follows the mouse pointer.
This modern approach is also often used as a project overview on a portfolio homepage.‍

In keeping with that, here's my portfolio challenge on Patreon:
‍https://www.patreon.com/posts/50987059‍

Chapter:

00:00 - Intro
01:28 - Design & structure
03:17 - Important image & mask settings
05:47 - Set up Tracking Mouse Movement
07:46 - Create image hover animation
16:45 - Score
17:03 - Another

More content

Blog Archiv

Next-Level 3D Letter Animation in Webflow (NEW GSAP Ease Visualizer)

Learn how to build a 3D stage animation in Webflow with GSAP, bounce easing, Split Text, and modern Apple-like motion design.
Video
​
Kategorie
Animation
Skill
Intermediate
Anschauen
Beitrag anschauen

Webflow CMS: Stagger Items Animation per Grid Row

Animate Webflow CMS Collection List items one-by-one on scroll using Set Class + CSS nth-child delays, with reduced-motion and Designer visibility tips.
Video
​
Kategorie
Animation
Skill
Beginner
Anschauen
Beitrag anschauen

Website preloader with the new Webflow GSAP events feature

How you can create a completely custom loading animation with the new GSAP timeline in Webflow via an event trigger and fire it in custom JS code.
Video
​
Kategorie
Animation
Anschauen
Beitrag anschauen

3D Line Globe Scroll Effect — Made with Webflow + GSAP

Learn how to build a 3D rotating globe scroll animation in Webflow using the GSAP timeline — step‑by‑step interactive Webflow tutorial.
Video
​
Kategorie
Animation
Skill
Intermediate
Anschauen
Beitrag anschauen

Typography masterpiece built in Webflow: With Swiper JS and GSAP | Deep Dive

I'll show you how I built a complex course page for Oliver Gareis using Webflow — including sliders, CMS, animations & sophisticated typography layouts.
Video
​
Kategorie
Animation
Skill
Beginner
Anschauen
Beitrag anschauen

Let’s Recreate This Viral Shopify Navigation Using Webflow’s GSAP Timeline

In this tutorial, learn how to implement centered navigation with a stagger effect in Webflow and GSAP — inspired by the Shopify Winter Edition design.
Video
​
Kategorie
Animation
Skill
Intermediate
Anschauen
Beitrag anschauen
Courses
Platform
Socials
Change language
German
English
Cookie Settings
This website was built entirely with Webflow.
Links marked with * are affiliate links
© 2025 FORMBURG.
Founded BY Jonas Arleth
ImprintPrivacy Policy