Swup: Dolor sit amet

Components (9)

Accordion

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.

2018-0321-1230

Components

Article index </>

Automatically generated article index with scroll-to and active link highlighting.

Used in https://vettvangur.is/blogg section.

2024-1029-1530

Components

Bubbly fireworks </>

Originally created for https://heilsueflandi.is, also used on https://velvera.is.

2023-0201-1157

Components

Bubbly particle trail </>

Mouse driven particle trail with velocity based emission.

2024-0307-1256

Components

Custom scrollbar </>

A draggable custom scrollbar that works with native scrolling, Lenis, GSAP ScrollSmoother, and likely any other scrolling library out there.

2026-0204-1231

Components

Draggable slider

Needs some work & adjustments, then it'll be available on CodePen - version on https://brand.vettvangur.is works slightly better.

2024-1015-1524

Components

External link icon </>

Animated box with & arrow indicating an external link. Old stuff, needs some refactoring.

2016-0824-1928

Components

Priority navigation

Perfectly fits navigation elements into available space.

Resize the window to see it in action.

Just need to tweak a few things, then it'll be available on CodePen.

2024-0925-1036

Components

SVG text on path animation </>

Seamless text animation, used on https://hareyding.is. Text can travel on any SVG path shape you want.

2025-0327-1042

Components

Concepts & designs (47)

3D logo </>

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.

2025-1128-1015

Concepts & designs

Apparatus 2024 concept

Rough sketch & some testing. Finished work on https://apparatus.is.

2024-0417-0945

Concepts & designs

Atlantsolía intro animation

Animation draft for https://atlantsolia.is 2023 release.

2023-0831-1204

Concepts & designs

Atlantsolía layout

Fluid vw based layout concept for 2023 AO website - finished project on https://atlantsolia.is.

2023-0921-1421

Concepts & designs

Ccrch #26 </>

2026 release of https://ccrch.com.

2026-0126-0221

Concepts & designs

Chocolate curtain </>

Gooey effect using SVG filters & GSAP Morph SVG plugin.

Made for https://noi.is 2026 Easter campaign.

2026-0203-2131

Concepts & designs

Continuing Care Retirement Community Hub

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! ;)

2026-0325-2214

Concepts & designs

Cookie, cookie, cookie...

...cookie, cookie!!! Playing around with https://brm.io/matter-js/ 2D physics engine. Made for https://vettvangur.is 2019 release.

2019-0924-1619

Concepts & designs

Domino's Megavika

Parallax SVG animation for 2019 https://dominos.is ad campaign.

Responsive to mouse movement on desktop & device orientation change on mobile.

2019-0810-0944

Concepts & designs

Domino's Netdagar

Homepage banner for 2023 https://dominos.is ad campaign.

2023-0509-1201

Concepts & designs

Explorio concept

Visual, layout, and animation draft for a travel planning minisite.

2025-0417-1630

Concepts & designs

Fluid Responsive Web Design & Development </>

An animated breakdown of fluid responsive web design, including practical examples and a live resize listener demonstrating the approach in action.

2025-0501-0844

Concepts & designs

Fluid Responsive Web example </>

Rem based layout - example of fluid responsive web design in action.

2025-0501-0844

Concepts & designs

Game Continu.es </>

Logo animation concept for https://gamecontinu.es game dev studio.

2016-0815-2130

Concepts & designs

H verslun

Homepage animation draft.

2026-0323-1437

Concepts & designs

Hómer concept

Layout draft for a real estate minisite. Finished project on https://homerapp.is.

2025-0302-1238

Concepts & designs

HS Orka elements

Page elements for 2023 HS Orka website.

2023-0125-1236

Concepts & designs

Iceland Airwaves 2022

Web banner for Iceland Airwaves 2022 ad campaign. Hover the banner to see the animation.

2022-1030-0950

Concepts & designs

Kalon frontpage

Frontpage mockup for https://kalon.is.

2026-0222-1901

Concepts & designs

Kalon teaser

Pre-release teaser site for https://kalon.is.

2026-0224-1607

Concepts & designs

Kosmos & Kaos logo animation </>

Logo animation for https://kosmosogkaos.is.

2017-0929-0944

Concepts & designs

Kosmos spring

Drag the logo to see the effect.

2026-0119-1723

Concepts & designs

KSÍ banner

Draft for animated banner for KSÍ website. Finished project on https://ksi.is.

Website performance meter added here for testing purposes.

2025-0227-1630

Concepts & designs

LinkedIn corner widget </>

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.

2016-0403-1611

Concepts & designs

Live icons #1

Icon animations for https://live.is - this was just the initial draft.

Click the icon to see the animation.

2023-0130-1347

Concepts & designs

Live icons #2

Full set of icons made for https://live.is. Click the icon to see the animation.

2023-1206-1209

Concepts & designs

Ljúfa líf lines </>

SVG line animations for https://ljufalif.is.

2024-1015-1004

Concepts & designs

Lyfja animations #1

Showcase of drafts and animation ideas for 2025 https://lyfja.is release.

2025-1208-1504

Concepts & designs

Lyfja animations #2

Animations for 2025 https://lyfja.is release.

2026-0208-2133

Concepts & designs

Netgíró menu

Navigation for 2023 release of https://netgiro.is.

2023-0831-1149

Concepts & designs

Nóa Konfekt

Minisite for 2025 Christmas campaign - https://www.noi.is/konfektid-okkar-i-90-ar

2025-1009-1520

Concepts & designs

Nóa Páska

Minisite for 2026 Easter campaign - https://www.noi.is/forskot-a-paskana

2026-0208-2248

Concepts & designs

Nói Siríus email template </>

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.

2025-1126-1247

Concepts & designs

Radarinn

Page load animation idea for https://radarinn.is.

2025-0423-1627

Concepts & designs

Responsive collapsible grid </>

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).

2016-0625-1033

Concepts & designs

Reykjavik.rocks </>

Complete source code for an old 2015 minisite - https://reykjavik.rocks

Using YouTube api for background video + few css transitions for nice look & feel.

2015-0411-1131

Concepts & designs

Scrambled text animation

Made for https://brand.vettgvangur.is typography section. Click the text to repeat the animation.

2025-1209-1154

Concepts & designs

Skapalón logo 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/

2016-1001-1237

Concepts & designs

Split text reveal </>

Originally created for https://welladvised.is 2023 release.

2024-0307-1146

Concepts & designs

tøp-acrøss #1

First prototype of https://twentyonepilots.is/top-across

Teaser for the app - https://twentyonepilots.is/4-21

2025-1225-2121

Concepts & designs

tøp-acrøss #2

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.

2026-0227-2009

Concepts & designs

tøp-lines

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/

2025-1204-2121

Concepts & designs

Vettvangur 2023

Rough draft for https://vettvangur.is 2023 release.

2023-0504-0920

Concepts & designs

Vettvangur 2024 </>

Hero and reel section design & animation draft for https://vettvangur.is 2024 release.

2024-0515-0911

Concepts & designs

Vettvangur 2024 sticky sections </>

Layout/page idea with sticky sections, parallax images & marquee text effect.

Meant for https://vettvangur.is 2024 release.

2024-0703-1621

Concepts & designs

Vettvangur 2025

Website flow & animation draft for https://vettvangur.is 2025 release.

2024-0926-1003

Concepts & designs

Vettvangur 2025 page transitions

Shapes in/out transition on page load/unload.

2026-0105-1003

Concepts & designs

CSS tricks (10)

Animated radial gradient </>

Made for https://kalon.is.

2026-0222-1901

CSS tricks

Backdrop blur marquee </>

Simple marquee with layered backdrop-filter strips that create a soft depth/spotlight effect over moving text.

2026-0215-2050

CSS tricks

Background clip text #1

Hover the text to see the effect.

2024-1028-1554

CSS tricks

Background clip text #2

Same as #1 + a little bit of GSAP. Click the text to see the effect.

2025-0307-1443

CSS tricks

Coloring images

Recoloring images with CSS filters - same png, different appearance.

Implemented on https://www.noi.is/forskot-a-paskana.

2026-0227-1005

CSS tricks

Conic-gradient pie chart </>

Animated conic-gradient pie chart built with pure CSS. Super simple, minimal markup, zero JavaScript.

2026-0301-1145

CSS tricks

CSS tricks bundle

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.

2025-0611-1330

CSS tricks

Masked text

Playing around with text, image & mix-blend-mode. Hover the text to zoom in the image.

2024-1022-1331

CSS tricks

SVG 9-slice scaling </>

Responsive card design for https://raudikrossinn.is.

Super simple & basic SVG 9-slice scaling using only CSS & SVG as border-image.

2025-1230-1922

CSS tricks

Text slide links

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.

2024-1010-1721

CSS tricks

Experiments (32)

Barrel text

Text effect created for https://egilshollin.is - not really finished yet & doesn't work quite as intended.

2025-1120-1123

Experiments

Calendar

Playing around with GPT - did pretty good - simple calendar implementation made with pretty much one prompt.

2025-1027-2140

Experiments

Chevron to box </>

Quite an old thing, 2018, but still fun to look at - might refactor it some day & find some use for it.

2018-0214-2213

Experiments

Chromo Sapiens #1

Testing GSAP video scroll synchronization with ScrollTrigger + additional content.

2025-1213-2130

Experiments

Chromo Sapiens #2

Same with slightly different scroll sync approach.

2025-1215-2140

Experiments

Clancy player

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.

2025-0808-1732

Experiments

Crawling line

Another oldie - needs some refactoring & tweaking.

Line animates to selected link adjusting to link width & position - 2 modes.

2018-0216-1930

Experiments

Deferred hash scroll

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.

2026-0310-1235

Experiments

EM based layout

100% responsive & fluid - scales proportionally to window size so no headeaches with tons of breakpoints or text wrapping issues.

2024-0319-0937

Experiments

Fixed clipped headings

Experimenting with fixed position headings & clipping masks.

2018-0223-1048

Experiments

Gradient background </>

Background gradient moves as you scroll the page down.

2018-0116-2314

Experiments

Lighthouse test </>

Trying to cheat Lighthouse performance scores. Kinda works, but not really, not a recommended practice for sure.

2024-0529-1048

Experiments

Macbook mockup

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.

2025-1203-1705

Experiments

Magnetic goo

Gooey shapes with magnetic cursor. Click anywhere to reset.

Doesn't work on iOS (yet).

2024-0905-1244

Experiments

Perspective shift

Shift effect based on cursor position. Old thing, needs some polishing.

2015-0203-2105

Experiments

Pixel boom

Click the text to see the effect.

2018-0423-1955

Experiments

Print (-ed animation)

Just hit Ctrl/Cmd + P to see what it's all about... & flip 'em pages!

Best experienced using PgDn. :)

2019-1004-1042

Experiments

Proximity hovers

Pretty cool effect where elements react to cursor proximity.

2024-0905-0928

Experiments

Respect user's motion preference

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

2026-0204-1042

Experiments

Rocket fly by

CSS rocket emitting DOM particles. Animated with GSAP.

2018-0122-1127

Experiments

Scroll looper </>

Scroll, scroll, scroll...

2018-0115-1433

Experiments

Scroll velocity driven background

Scroll the page to see the effect.

2018-0831-2215

Experiments

Seamless image loop </>

Fading & scaling image loop with seamless overlap transition.

2026-0224-1607

Experiments

Shortest route between points </>

Click any point to find shortest route through all points.

Route shown initially is the shortest possible from all given points.

2018-1219-2003

Experiments

Siteception </>

We need to go deeper...

2016-0331-2346

Experiments

Skewy cursor

Cursor that morphs based on movement direction and speed.

2024-1030-1723

Experiments

Smooth scroll without ScrollSmoother </>

GSAP ScrollTrigger based smooth scrolling that adapts to device input - GSAP on desktop, native on mobile.

No ScrollSmoother plugin used.

2021-1008-1927

Experiments

SVG mask image animation

Effect created for https://vettvangur.is 2025 release. Code still needs some work.

Improved version on https://brand.vettvangur.is.

2025-0528-1341

Experiments

Swup

Experimenting with swup in/out transitions - different stuff happening on each page.

2023-1204-1448

Experiments

Timeline based scroll animation

Built with GSAP 2.x (pre-GSAP 3 syntax, TweenMax era). Made 3 years before ScrollTrigger was introduced.

2017-1010-0950

Experiments

Video scroll

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.

2019-1213-2305

Experiments

Zoom & pan on hover </>

Zoom scale controled with data attribute. Panning follows the mouse position on hover.

2014-1229-0833

Experiments

Games & tools (3)

Automated items reveal

Revealing items on page load/scroll. Used in https://lsr.is and https://npi.int.

2024-0420-1233

Games & tools

Magic Wand

Click fast enough to win. Not finished, work in progress.

2025-0808-1932

Games & tools

Website performance meter </>

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.

2026-0127-1515

Games & tools

Ideas & inspiration (13)

Boombox

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.

2024-1122-2048

Ideas & inspiration

Bubble page transition

Seamless bubble in/out transition between pages.

2024-05-27-0842

Ideas & inspiration

Flowfest lines </>

Inspired by https://flowfest.co.uk layout design elements.

2026-0312-2250

Ideas & inspiration

Horizontal headline split </>

Inspired by intro section on https://tadesign.nl website.

2026-0312-1758

Ideas & inspiration

Lobster typeface </>

Animated typo experiment inspired by typography from the 2018 release of http://lobstersnowboards.com.

2018-0919-2317

Ideas & inspiration

Page zoom transition

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.

2024-0630-1042

Ideas & inspiration

Scusso typeface </>

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

2025/08/08

Ideas & inspiration

Stacking words </>

Inspired by "About us" section on https://sirnik.webflow.io website.

2026-0317-0804

Ideas & inspiration

Testimonial slider </>

Inspired by Osmo testimonial/text slider with GSAP SplitText reveal animations.

Original idea here - https://osmo.supply/preview?resource=line-reveal-testimonials

2026-0307-1237

Ideas & inspiration

The Last of Us buttons </>

Inspired by the game UI design.

2025/06/06

Ideas & inspiration

Timeline diary

Minisite idea for scrollable photo album with dated events & headlines.

2024-0417-2015

Ideas & inspiration

Turntable

Spinning the table instead of the record - concept for https://twentyonepilots.is/2-21.

2026-0115-0136

Ideas & inspiration

Windows configurator

Early draft of an e-commerce solution. Not finished - only the first three steps are implemented.

2019-1010-1147

Ideas & inspiration

Tests (12)

Content masks </>

Testing some in/out animation effects.

2024-0909-1056

Tests

Fluid presentation iframe </>

Made to record a video.

2026-0310-1716

Tests

GSAP ScrollTriggers done right </>

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.

2026-0125-1649

Tests

Liquid glass

Playing around with the latest iOS glass effect hype.

Drag buttons around to see the distortion effect, there are 4 different filter effects.

2025-0808-1319

Tests

Lyfja animations test

Testing DrawSVG stuff.

2025-1203-0850 / 2026-0319-1002

Tests

Pinning test

ScrollTriggers test with different types of scroll - trying to figure out best way to avoid jumpy/glitchy pins on mobile.

2025-0227-1102

Tests

Slide scroller #1

Initial version. Simple scroll snapping.

2025-1217-1402

Tests

Slide scroller #2

Improved, better trackpad & scroll momentum handling.

2025-1217-1413

Tests

Slide scroller #3

#2 + appending slides.

2025-1217-1443

Tests

YouTube test #1

Looped short. Testing YouTube API integration.

2025-0606-1811

Tests

YouTube test #2

Video scroll through using custom window scroll listener. Testing YouTube API integration.

2025-1214-2011

Tests

YouTube test #3

Video scroll through using GSAP ScrollTrigger. Testing YouTube API integration.

2025-1214-2021

Tests

Todos (8)

3D carousel

Old experiment, not finished, needs GSAP Draggable and some finishing touches.

2023-1213-1320

Todos

Kalon #1

Rough hero animation concept for https://kalon.is.

2026-0121-2034

Todos

Kalon #2

Rough page intro idea for https://kalon.is.

2026-0121-2330

Todos

Kalon #3

Gooey buttons idea for https://kalon.is

2026-0203-1319

Todos

Kalon #4

Frontpage mockup for https://kalon.is.

2026-0205-0925

Todos

Marquee

Infinite scrolling GSAP driven with adjustable speed and direction.

Not working 100% - rtl marquee is not looping properly.

2023-0509-1927

Todos

SVG photo filter effects

Experimenting with SVG filter effect.

2019-0923-1822

Todos

Tsunami navigation </>

The hovered item expands along with its adjacent siblings.

An old experiment that needs revisiting and improvement.

2014-1216-2203

Todos

Dolor sit amet

Amet ad incididunt esse qui labore ea cillum aute esse. Qui duis Lorem ipsum enim ex. Aliqua eiusmod labore sint sint Lorem minim culpa occaecat laborum deserunt proident. Nostrud non ea dolor enim reprehenderit.