57:I[473921,["/creators-assets/_next/static/immutable/chunks/3c-b-8ufmviux.js","/creators-assets/_next/static/immutable/chunks/2lb80c7sdmm1x.js","/creators-assets/_next/static/immutable/chunks/24qz5wotuh5hj.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/0j6nsovyxcqkz.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/2dvu3r_tb3ihz.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/088oy6f_9ll4s.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0eljubaqaqluk.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/3fcb65_46-jt7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0_ulklfcrp-s3.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"PostDetailCard"] 59:I[885856,["/creators-assets/_next/static/immutable/chunks/3c-b-8ufmviux.js","/creators-assets/_next/static/immutable/chunks/2lb80c7sdmm1x.js","/creators-assets/_next/static/immutable/chunks/24qz5wotuh5hj.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/0j6nsovyxcqkz.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/2dvu3r_tb3ihz.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/088oy6f_9ll4s.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0eljubaqaqluk.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/3fcb65_46-jt7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0_ulklfcrp-s3.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"CommentSection"] 58:T587,

# DiagonalScrollFade Component

Create stunning diagonal fade effects that respond to scroll position. Perfect for hero sections, text reveals, and creating depth in your designs.

## ✨ Features

- Progressive Diagonal Fade - Content fades from top-left to bottom-right as users scroll

- Customizable Fade Range - Control exactly when the fade starts and ends

- Adjustable Angle - Change gradient direction from 0 to 360 degrees

- Works with Any Content - Apply to text, images, components, or entire sections

- Smooth Performance - GPU-accelerated animations for buttery-smooth scrolling

- Reverse Mode - Optionally fade from bottom-right to top-left

## 🎯 Use Cases

- Hero section text reveals

- Image galleries with scroll effects

- Progressive content hiding

- Creating visual hierarchy

- Portfolio showcases

- Storytelling websites

## ⚙️ Properties

- Fade Start - Pixel position where fade begins

- Fade End - Pixel position for complete fade

- Gradient Angle - Direction of fade (default: 45°)

- Fade Intensity - Control opacity strength

- Reverse Direction - Flip the fade direction

54:[["$","$L57",null,{"post":{"id":"0199abf8-24fb-7b04-9602-812268e9dd76","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"33db4e3c-2a8a-4896-ad08-96476ec470e5","name":"Koussay Zayani","slug":"koussay-zayani","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/37297/avatar-xRBmqCSL21r19YDULqRr7EmQulUhhm.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tC1vhgLXV7jTv0YGCaSC","resolved":true,"title":"DiagonalScrollFade","body":"$58","bodyJson":null,"introduction":"diagonal fade effects","slug":"diagonalscrollfade","author":{"framerUserId":"33db4e3c-2a8a-4896-ad08-96476ec470e5","name":"Koussay Zayani","slug":"koussay-zayani","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/37297/avatar-xRBmqCSL21r19YDULqRr7EmQulUhhm.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/tC1vhgLXV7jTv0YGCaSC/diagonalscrollfade-iucAC6BJIt94UM9qaXK8mJbCjSMzIy","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-22T23:14:01.208Z","updatedAt":"2026-07-08T22:04:05.430Z","publishedAt":"2025-10-03T21:26:30.395Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://diagonalscrollfade.framer.website/","price":"1","paymentUrl":"https://www.creem.io/payment/prod_qcrqlLUxyzIgSqxQQ3QIz","workshop":true,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"bBHpbsCi5OcHO7W81uuj","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":25,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-03T21:26:30.395Z","updatedAt":"2025-10-03T21:26:30.395Z","reported":false,"type":"post"}}],["$","$L59",null,{"target":{"kind":"post","postId":"0199abf8-24fb-7b04-9602-812268e9dd76"},"postId":"0199abf8-24fb-7b04-9602-812268e9dd76","postAuthor":"$54:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you