Cyd Stumpel
@cydstumpel.nl
Teacher and Award Winning Freelance Creative Developer
Teacher at @fdnd.nl π and the Minor Web Development at Amsterdam University of Applied Sciences
Iβm an Okay Dev π©π½βπ» @okaydev.co
Tech speaker at meetups and conferences
Portfolio: https://cydstumpel.nl
Teacher at @fdnd.nl π and the Minor Web Development at Amsterdam University of Applied Sciences
Iβm an Okay Dev π©π½βπ» @okaydev.co
Tech speaker at meetups and conferences
Portfolio: https://cydstumpel.nl
Pinned
Cyd Stumpel
@cydstumpel.nl
Β· Nov 23
WIP Page transition β¨
Most off the animations are pure CSS, I just needed some JS for the mouse move effect π€·π»ββοΈ
Made with Scroll Driven Animations and View Transitions π
Most off the animations are pure CSS, I just needed some JS for the mouse move effect π€·π»ββοΈ
Made with Scroll Driven Animations and View Transitions π
Almost there!!1! #newyearnewportfolio
January 11, 2026 at 8:41 PM
Almost there!!1! #newyearnewportfolio
Reposted by Cyd Stumpel
The first batch of early bird tickets is out for sale. If you were thinking about attending to an event this year, this is your chance to do it a really low price.
ποΈ JSHeroes tickets are live ποΈ
π jsheroes.io
A limited batch of Early Bird tickets is available for β¬170 - secure the best deal of the season for a 2-day conference with inspiring talks, amazing people, and unforgettable vibes. β¨
See you in May! π
#JSHeroes #TechConference #TechInnovation
π jsheroes.io
A limited batch of Early Bird tickets is available for β¬170 - secure the best deal of the season for a 2-day conference with inspiring talks, amazing people, and unforgettable vibes. β¨
See you in May! π
#JSHeroes #TechConference #TechInnovation
January 8, 2026 at 4:13 PM
The first batch of early bird tickets is out for sale. If you were thinking about attending to an event this year, this is your chance to do it a really low price.
January 7, 2026 at 11:26 PM
I always add spans to my buttons so I can animate the shit out of them βοΈ
January 7, 2026 at 8:08 AM
I always add spans to my buttons so I can animate the shit out of them βοΈ
Hahaha started this in december, just went live today ;)
January 2, 2026 at 7:10 PM
Hahaha started this in december, just went live today ;)
First project of 2026 live today π
www.nar.nl
www.nar.nl
January 2, 2026 at 6:07 PM
First project of 2026 live today π
www.nar.nl
www.nar.nl
I love using new CSS features in my WIP portfolio: so far I've implemented scroll driven animations, anchor positioning, sibling-index/-count, view transitions, at-starting-style, container style queries, interpolate size, allow discrete and more! CSS is awesome β¨
The sticker drag is GSAP though;)
The sticker drag is GSAP though;)
January 1, 2026 at 3:19 PM
I love using new CSS features in my WIP portfolio: so far I've implemented scroll driven animations, anchor positioning, sibling-index/-count, view transitions, at-starting-style, container style queries, interpolate size, allow discrete and more! CSS is awesome β¨
The sticker drag is GSAP though;)
The sticker drag is GSAP though;)
It looks lazy and template-y because everything animates at the same time. I also don't like that they clipped the text like that, that makes it look like the text is on the media items.
I made three options with GSAP that I think are instantly better:
codepen.io/Sidstumple/p...
I made three options with GSAP that I think are instantly better:
codepen.io/Sidstumple/p...
Scroll trigger examples for Bramus
...
codepen.io
December 23, 2025 at 6:04 PM
It looks lazy and template-y because everything animates at the same time. I also don't like that they clipped the text like that, that makes it look like the text is on the media items.
I made three options with GSAP that I think are instantly better:
codepen.io/Sidstumple/p...
I made three options with GSAP that I think are instantly better:
codepen.io/Sidstumple/p...
This animation is so bad, lol
December 22, 2025 at 8:31 PM
This animation is so bad, lol
Ik zag laatst βrugβ in de settings van een cookiemelding π
December 21, 2025 at 9:22 AM
Ik zag laatst βrugβ in de settings van een cookiemelding π
HALLMARK KEEPSAKE DOCTOR WHO CYBERMAN ORNAMENT 2024
www.etienne-toys.com
December 17, 2025 at 5:02 PM
I remembered I have free will and grown up money, look what I bought!!! π€©
December 17, 2025 at 4:46 PM
I remembered I have free will and grown up money, look what I bought!!! π€©
Hahah curious to hear your take on it! Glad this resonated with you :)
December 13, 2025 at 5:48 PM
Hahah curious to hear your take on it! Glad this resonated with you :)
Some tips on how and why we teach our students from @fdnd.nl, to implement progressive enhancement in their work! π
cydstumpel.nl/why-we-teach...
cydstumpel.nl/why-we-teach...
Why we teach our students progressive enhancement | Blog Cyd Stumpel
With new CSS features seemingly coming out every week, Iβve been doing more and more progressive enhancement (PE) in my projects. Itβs also a big part of what we teach our students at the Associate De...
cydstumpel.nl
December 13, 2025 at 4:56 PM
Some tips on how and why we teach our students from @fdnd.nl, to implement progressive enhancement in their work! π
cydstumpel.nl/why-we-teach...
cydstumpel.nl/why-we-teach...
Canβt believe you chose such an unwoke font π
December 13, 2025 at 7:53 AM
Canβt believe you chose such an unwoke font π
Reposted by Cyd Stumpel
Scroll-Triggered Animations β¦ with nothing but CSS β¦ oh yeah π€©
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
December 12, 2025 at 10:04 AM
Scroll-Triggered Animations β¦ with nothing but CSS β¦ oh yeah π€©
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
codepen.io/bramus/pen/Z...
(Coming to Chrome 145. Blogpost in the works.)
Reposted by Cyd Stumpel
`overflow: clip` is my default.
In www.bram.us/2024/02/14/s... I wrote:
βI see no reason to use `overflow: hidden` your site, unless you have a good reason to. Using `overflow: clip` has exactly the same outcome, doesnβt interfere with Scroll-Driven Animations, and has great browser support.β
In www.bram.us/2024/02/14/s... I wrote:
βI see no reason to use `overflow: hidden` your site, unless you have a good reason to. Using `overflow: clip` has exactly the same outcome, doesnβt interfere with Scroll-Driven Animations, and has great browser support.β
Scroll-Driven Animations: You want overflow: clip, not overflow: hidden
If you create a scroll-driven animation and find that scroll(nearest) is not working, check for overflow: hidden elements up the DOM tree and change them to overflow: clip.
www.bram.us
December 12, 2025 at 2:27 PM
`overflow: clip` is my default.
In www.bram.us/2024/02/14/s... I wrote:
βI see no reason to use `overflow: hidden` your site, unless you have a good reason to. Using `overflow: clip` has exactly the same outcome, doesnβt interfere with Scroll-Driven Animations, and has great browser support.β
In www.bram.us/2024/02/14/s... I wrote:
βI see no reason to use `overflow: hidden` your site, unless you have a good reason to. Using `overflow: clip` has exactly the same outcome, doesnβt interfere with Scroll-Driven Animations, and has great browser support.β
I love overflow clip, but I never knew these specifics! Its also very helpful when working with position sticky or scroll driven animations. The hidden value breaks position sticky and scroll driven animations that are set on children but the clip value does not
Mini demo: codepen.io/Sidstumple/p...
Mini demo: codepen.io/Sidstumple/p...
overflow-clip vs hidden
...
codepen.io
December 5, 2025 at 11:48 PM
I love overflow clip, but I never knew these specifics! Its also very helpful when working with position sticky or scroll driven animations. The hidden value breaks position sticky and scroll driven animations that are set on children but the clip value does not
Mini demo: codepen.io/Sidstumple/p...
Mini demo: codepen.io/Sidstumple/p...
This is awesome
Responsive Letter Spacing: "What we wanted was a gradual transition: As the font-size increases, the letter-spacing decreases. And ideally, that would happen everywhere by default. Thankfully, modern #CSS was up to the challenge. And it only took one rule to pull off!" cloudfour.com/thinks/respo...
Responsive Letter Spacing
Minimizing the readability impact of a typographic brand requirement.
cloudfour.com
December 1, 2025 at 11:18 AM
This is awesome
I was very Dutch today
November 30, 2025 at 5:19 PM
I was very Dutch today
Thanks for sharing π«Ά
November 23, 2025 at 6:51 PM
Thanks for sharing π«Ά
WIP Page transition β¨
Most off the animations are pure CSS, I just needed some JS for the mouse move effect π€·π»ββοΈ
Made with Scroll Driven Animations and View Transitions π
Most off the animations are pure CSS, I just needed some JS for the mouse move effect π€·π»ββοΈ
Made with Scroll Driven Animations and View Transitions π
November 23, 2025 at 3:01 PM
WIP Page transition β¨
Most off the animations are pure CSS, I just needed some JS for the mouse move effect π€·π»ββοΈ
Made with Scroll Driven Animations and View Transitions π
Most off the animations are pure CSS, I just needed some JS for the mouse move effect π€·π»ββοΈ
Made with Scroll Driven Animations and View Transitions π
Had a great time at @weyweyweb.bsky.social this week! I even brought my friends to MΓ‘laga and forced them to watch my presentation so I can talk about view transitions while we sip wine from now on π
November 21, 2025 at 7:52 PM
Had a great time at @weyweyweb.bsky.social this week! I even brought my friends to MΓ‘laga and forced them to watch my presentation so I can talk about view transitions while we sip wine from now on π
