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.
My first 100% vibe designed & coded website with ChatGPT. Love that 2010s SaaS/WordPress vibe. So bad it's kind of good.
Design - 4 minutes.
Image assets - 23 minutes - apparently it's not that easy for GPT to get the layout right & cut out assets properly or maybe my prompts weren't clear enough.
HTML + CSS - 2 minutes.
HTML/CSS finetuning & making it "99% pixel perfect" - 8 minutes.
Total - 37 minutes - be afrAId! ;)
...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.
Homepage animation draft. Experimenting with AI-generated video from a single image & using scroll position to control video playback.
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.
Testing animated SVG filters with image masking to create some fluffy, fur-like effects reacting to mouse movement & cursor speed.
Hover the text to see it at work.
Animation/interaction idea. Hover the hero to see it work.
Animation drafts.
Drag the logo to see the effect.
Click either line to morph it into a spring.
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 - this was just the initial draft.
Click the icon to see the animation.
Full set of icons made for https://live.is. Click the icon to see the animation.
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.
Homepage animation draft. Hero video generated from a single image using Kling 3.0.
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.
Made for https://brand.vettgvangur.is typography section. Click the text to repeat the animation.
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.
First prototype of https://twentyonepilots.is/top-across
Teaser for the app - https://twentyonepilots.is/4-21
Second prototype of https://twentyonepilots.is/top-across
Improved video handling with less lag & better sync when switching between videos.
Check out the teaser for the app - https://twentyonepilots.is/4-21 - even better sync, fully optimized & almost no lag.
Prototype of https://twentyonepilots.is/top-lines - a web/app that will take you straight into the most powerful moments of |-/ songs.
Teaser for the app - https://twentyonepilots.is/3-21/
Prototype of a teaser page for https://twentyonepilots.is/top-tour web/app.
Two songs playing simultaneously in sync. The top slider controls the balance, while the bottom one controls the playback progress.
2025 "Intentions" use reversed instrumental of 2013 "Truce", creating a thematic "full circle" moment - a loop where "Truce" begins the |-/ lore and "Intentions" brings it to a close.
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.
This snippet takes over the hash from the url - locks the scroll until other stuff has loaded/animated/etc and then scrolls to the selector.
100% responsive & fluid - scales proportionally to window size so no headeaches with tons of breakpoints or text wrapping issues.
Endless loop of cards with image preloading. Scroll down to continuously reveal the next card with smooth, uninterrupted transitions.
Experimenting with fixed position headings & clipping masks.
A small experiment using the mask-image with radial-gradient to create a smooth glow effect.
Move the mouse over the icon to see it in action.
Net & dot patterns using the same glowing effect as the icons. Could work nicely as a subtle background effect.
Move the mouse around to see it in action.
Background gradient moves as you scroll the page down.
Experimenting with AI-generated video from a single image.
Plays on reveal, then responds to pointer position to control playback.
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).
Bringing static office photos to life with Kling 3.0 & GSAP. Three 4-second video clips generated from four photos.
Use the top nav to switch between different versions of this experiment.
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.
Small demo showing how to work with @media (prefers-reduced-motion: no-preference/reduce) query - contains both CSS & GSAP animations and transitions.
Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
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.
Used on https://kalon.is frontpage.
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.
Smooth animation direction change based on page scroll direction.
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.
Mario like game built with vanilla JS and some CSS.
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.
Inspired by https://flowfest.co.uk layout design elements.
Inspired by intro section on https://tadesign.nl website.
Layout/animation & split headline inspired by https://inette.co
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.
Some layout idea - utilizing the radial selector idea. Scroll the page to see it at work.
Inspired by Frédéric Paquet's awwwards post animation - https://linkedin.com/feed/update/urn:li:activity:7440014898224488448
Scroll the page to see it at work.
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 "About us" section on https://sirnik.webflow.io website.
Inspired by Osmo testimonial/text slider with GSAP SplitText reveal animations.
Original idea here - https://osmo.supply/preview?resource=line-reveal-testimonials
Design inspired by https://facebook.com/funlighticeland/ ads.
Inspired by the game UI design.
Minisite idea for scrollable photo album with dated events & headlines.
Spinning the table instead of the record - concept for https://twentyonepilots.is/2-21.
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.
SVG motion blur filter test. Click the box to see the effect.
ScrollTriggers test with different types of scroll - trying to figure out best way to avoid jumpy/glitchy pins on mobile.
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.
Testing mapbox stuff for https://twentyonepilots.is/top-tour web/app.
The hovered item expands along with its adjacent siblings.
An old experiment that needs revisiting and improvement.
2026-0513-2003
2024-0417-2015