Sublime

♾️Infinite scroll test 1 #threejs #r3f #gsap #creativecoding https://t.co/CIMMtCEAx3

how do you efficiently render 100,000 items in a list? https://t.co/xY8fkwFL8q

this box teaches you how to tie model animation to scroll. but the issue is damping—you need to make sure that the animation doesn't go haywire if you scroll fast. drei/scrollcontrols maxSpeed takes care of that. deploy: https://t.co/ZIzl89j5UF sandbox: https://t.co/OOBv1xzEi8 https://t.co/DYEdFH82EZ

scroll to type with CSS ✨ p { animation: type steps(124); animation-timeline: --main; background: var(--cursor) calc(var(--pos) * 1ch) 0 / 1ch 1lh no-repeat border-box, var(--txt) 0 0 / calc(var(--pos) * 1ch) 100% no-repeat text; } @​keyframes type {... See more

Pretty fun seeing how you can combine different CSS tricks with scroll 😁 The basic combination of overflow: hidden and steps() animation timing makes this happen ⭐️ https://t.co/DTxlXLvlCb

CSS progressive blur on scroll 📜 + apply contrast for goo scroll https://t.co/l8SO64eCKF

playing with @v0 + @midjourney video + 4o ▪️video playback follows scroll (back & forth) ▪️everything fades in only after videos preload ▪️custom minimalistic scrollbar https://t.co/X1GqUbMRlj

another trick for an "infinite" list - create a cylinder and spin it https://t.co/rc0ObrVaMp

Scroll masking with CSS scroll animation as a progressive enhancement ⭐️ .scroller { animation: mask-up; animation-timeline: scroll(self); animation-range: 0 1rem; mask-composite: exclude; } @​keyframes mask-up { to {... See more