Super simple, basic & accessible accordion with a little bit of GSAP for smooth transitions.
Just need to tweak a few things, then it'll be available on CodePen.
Automatically generated article index with scroll-to and active link highlighting.
Used in https://vettvangur.is/blogg section.
Originally created for https://heilsueflandi.is, also used on https://velvera.is.
Mouse driven particle trail with velocity based emission.
A draggable custom scrollbar that works with native scrolling, Lenis, GSAP ScrollSmoother, and likely any other scrolling library out there.
Needs some work & adjustments, then it'll be available on CodePen - version on https://brand.vettvangur.is works slightly better.
Animated box with & arrow indicating an external link. Old stuff, needs some refactoring.
Perfectly fits navigation elements into available space.
Resize the window to see it in action.
Seamless text animation, used on https://hareyding.is. Text can travel on any SVG path shape you want.
Animated, pointer-interactive 3D logo built with layered SVGs and GSAP.
Made for https://brand.vettvangur.is. You can drag the logo to rotate it.
Rough sketch & some testing. Finished work on https://apparatus.is.
Animation draft for https://atlantsolia.is 2023 release.
Fluid vw based layout concept for 2023 AO website - finished project on https://atlantsolia.is.
2026 release of https://ccrch.com.
Gooey effect using SVG filters & GSAP Morph SVG plugin.
Made for https://noi.is 2026 Easter campaign.
...cookie, cookie!!! Playing around with https://brm.io/matter-js/ 2D physics engine. Made for https://vettvangur.is 2019 release.
Parallax SVG animation for 2019 https://dominos.is ad campaign.
Responsive to mouse movement on desktop & device orientation change on mobile.
Homepage banner for 2023 https://dominos.is ad campaign.
Visual, layout, and animation draft for a travel planning minisite.
An animated breakdown of fluid responsive web design, including practical examples and a live resize listener demonstrating the approach in action.
Rem based layout - example of fluid responsive web design in action.
Logo animation concept for https://gamecontinu.es game dev studio.
Layout draft for a real estate minisite. Finished project on https://homerapp.is.
Page elements for 2023 HS Orka website.
Web banner for Iceland Airwaves 2022 ad campaign. Hover the banner to see the animation.
Frontpage mockup for https://kalon.is.
Pre-release teaser site for https://kalon.is.
Logo animation for https://kosmosogkaos.is.
Drag the logo to see the effect.
Draft for animated banner for KSÍ website. Finished project on https://ksi.is.
Website performance meter added here for testing purposes.
Small widget made for my dad's website. Hover the corner to reveal LinkedIn profile link.
Originally at https://szkudlarek.co, archived version here - https://web.archive.org/web/20180328060342/szkudlarek.co.
Icon animations for https://live.is - click the icons to see the animations.
This is just the initial set/drafts - there's more and better ones on the website. I'll put them here soon.
SVG line animations for https://ljufalif.is.
Showcase of drafts and animation ideas for 2025 https://lyfja.is release.
Animations for 2025 https://lyfja.is release.
Navigation for 2023 release of https://netgiro.is.
Minisite for 2025 Christmas campaign - https://www.noi.is/konfektid-okkar-i-90-ar
Minisite for 2026 Easter campaign - https://www.noi.is/forskot-a-paskana
Simple template for https://noi.is/konfekt-gjafaleikur campaign.
Apparently there's no need to rely on tables or overly heavy markup to make this look good across email clients. Yay!
Although a bit of inline styling is still needed for consistent rendering.
Page load animation idea for https://radarinn.is.
Squeezing in some extra content between cols & moving the content along with cols responsively while screen is being resized.
Used this code, with some alterations, in 2016 releases of https://szkudlarek.co (portfolio section) and https://arcticcircle.org (speakers section).
Complete source code for an old 2015 minisite - https://reykjavik.rocks
Using YouTube api for background video + few css transitions for nice look & feel.
CSS logo animation for a webdev studio https://skapalon.is.
The company doesn't exist anymore, their archived website is here - https://web.archive.org/web/20161006023905/www.skapalon.is/
Originally created for https://welladvised.is 2023 release.
Prototype of https://twentyonepilots.is/top-lines - a web/app that will take you straight into the most powerful moments of |-/ songs.
Teaser - https://twentyonepilots.is/3-21/
Spinning the table instead of the record - concept for https://twentyonepilots.is/2-21.
Rough draft for https://vettvangur.is 2023 release.
Hero and reel section design & animation draft for https://vettvangur.is 2024 release.
Layout/page idea with sticky sections, parallax images & marquee text effect.
Meant for https://vettvangur.is 2024 release.
Website flow & animation draft for https://vettvangur.is 2025 release.
Shapes in/out transition on page load/unload.
Made for https://kalon.is.
Simple marquee with layered backdrop-filter strips that create a soft depth/spotlight effect over moving text.
Hover the text to see the effect.
Same as #1 + a little bit of GSAP. Click the text to see the effect.
Recoloring images with CSS filters - same png, different appearance.
Implemented on https://www.noi.is/forskot-a-paskana.
Animated conic-gradient pie chart built with pure CSS. Super simple, minimal markup, zero JavaScript.
Bunch of CSS tricks and experiments - simple swiper, masonry, select & input tricks, adaptive tooltip.
Not finished, gotta split it into separate files. Will do that soon.
Playing around with text, image & mix-blend-mode. Hover the text to zoom in the image.
Responsive card design for https://raudikrossinn.is.
Super simple & basic SVG 9-slice scaling using only CSS & SVG as border-image.
Simple text link hover effect - CSS animation & GSAP version.
Even though CSS version is easier to implement & doesn't require any js, GSAP is still better - finishes the animation even if hover is very brief.
Text effect created for https://egilshollin.is - not really finished yet & doesn't work quite as intended.
Playing around with GPT - did pretty good - simple calendar implementation made with pretty much one prompt.
Quite an old thing, 2018, but still fun to look at - might refactor it some day & find some use for it.
Testing GSAP video scroll synchronization with ScrollTrigger + additional content.
Same with slightly different scroll sync approach.
Multiple YT embeds that play on hover - testing performance with embedding multiple YT iframes on a single page, smooth transition & buffering between playing videos.
Note: sometimes on a first play click is required because of YT autoplay/muted policy.
Another oldie - needs some refactoring & tweaking.
Line animates to selected link adjusting to link width & position - 2 modes.
100% responsive & fluid - scales proportionally to window size so no headeaches with tons of breakpoints or text wrapping issues.
Experimenting with fixed position headings & clipping masks.
Background gradient moves as you scroll the page down.
Trying to cheat Lighthouse performance scores. Kinda works, but not really, not a recommended practice for sure.
Website in your website so you can browse while you browse.
Url in a box is an input field - put whatever url you want there.
Gooey shapes with magnetic cursor. Click anywhere to reset.
Doesn't work on iOS (yet).
Shift effect based on cursor position. Old thing, needs some polishing.
Click the text to see the effect.
Just hit Ctrl/Cmd + P to see what it's all about... & flip 'em pages!
Best experienced using PgDn. :)
Pretty cool effect where elements react to cursor proximity.
CSS rocket emitting DOM particles. Animated with GSAP.
Scroll, scroll, scroll...
Scroll the page to see the effect.
Fading & scaling image loop with seamless overlap transition.
Click any point to find shortest route through all points.
Route shown initially is the shortest possible from all given points.
We need to go deeper...
Cursor that morphs based on movement direction and speed.
GSAP ScrollTrigger based smooth scrolling that adapts to device input - GSAP on desktop, native on mobile.
No ScrollSmoother plugin used.
Effect created for https://vettvangur.is 2025 release. Code still needs some work.
Improved version on https://brand.vettvangur.is.
Experimenting with swup in/out transitions - different stuff happening on each page.
Built with GSAP 2.x (pre-GSAP 3 syntax, TweenMax era). Made 3 years before ScrollTrigger was introduced.
Control the video with scroll - when the page is near the top, the video loops over its first two seconds.
Scrolling down scrubs the playhead based on the current scroll position.
Zoom scale controled with data attribute. Panning follows the mouse position on hover.
Revealing items on page load/scroll. Used in https://lsr.is and https://npi.int.
Click fast enough to win. Not finished, work in progress.
This tool measures whether a device can handle the current workload by tracking FPS and jank ratio.
It helps detect performance drops caused by heavy animations during page load or site transitions - especially on GSAP-heavy sites. This makes it easier to decide whether disabling some eye candy is a good idea on older or weaker machines.
The meter can be dragged around the page if it covers important content. Sample window, acceptable FPS, and max jank ratio are adjustable, with tooltips explaining what each metric means.
Three callbacks: on.degrade - when performance drops, on.degradeOverLimit - when it drops below acceptable levels, and on.recover - when performance stabilizes again.
In this demo, the fireworks and particle trail are hidden when performance degrades over the limit of allowed janks.
Idea for sort of a showreel - synchronizing audio with visuals.
Steady beat until ~0:45 followed by pretty cool drop at 0:48.
Work in progress - sync currently ends at 0:53. Music by https://youtube.com/@ZEFRECORDZ.
Seamless bubble in/out transition between pages.
Animated typo experiment inspired by typography from the 2018 release of http://lobstersnowboards.com.
Click the links in the header to see the effect in action.
When you scroll a bit down and click a link, transition is locked to the current window scroll position.
GSAP SplitText effect emulating Scusso typeface.
Cutting & moving letters around each time it renders. Resize the window or click the text to see letter change.
Typeface info here - https://linkedin.com/posts/robert-samsonowitz_new-font-alert-meet-scusso-a-display-typeface-activity-7358488406491836416-AyP7
Inspired by Osmo testimonial/text slider with GSAP SplitText reveal animations.
Original idea here - https://www.osmo.supply/preview?resource=line-reveal-testimonials
Inspired by the game UI design.
Minisite idea for scrollable photo album with dated events & headlines.
Early draft of an e-commerce solution. Not finished - only the first three steps are implemented.
Testing some in/out animation effects.
Made to record a video.
First column - hides too early due to the offset.
Second - standard wrapper approach, works fine, but needs extra markup.
Third - most convenient, no wrapper required, offset handled correctly.
Playing around with the latest iOS glass effect hype.
Drag buttons around to see the distortion effect, there are 4 different filter effects.
Testing DrawSVG stuff.
ScrollTriggers test with different types of scroll - trying to figure out best way to avoid jumpy/glitchy pins on mobile.
A demo project that respects the user's motion preference settings in their operating system.
Initial version. Simple scroll snapping.
Improved, better trackpad & scroll momentum handling.
#2 + appending slides.
Looped short. Testing YouTube API integration.
Video scroll through using custom window scroll listener. Testing YouTube API integration.
Video scroll through using GSAP ScrollTrigger. Testing YouTube API integration.
Old experiment, not finished, needs GSAP Draggable and some finishing touches.
Rough hero animation concept for https://kalon.is.
Rough page intro idea for https://kalon.is.
Gooey buttons idea for https://kalon.is
Infinite scrolling GSAP driven with adjustable speed and direction.
Not working 100% - rtl marquee is not looping properly.
Experimenting with SVG filter effect.
The hovered item expands along with its adjacent siblings.
An old experiment that needs revisiting and improvement.
2026-0310-1921
2023-0130-1347