Week 421: Scroll driven animations with entry and exit states
Following on from last week's look at colour spaces, another CSS topic I've wanted to dive into is scroll driven animations.
I had already applied them to the app pages for when the device preview appears on scroll, like on the Team Sheets marketing page I have.
An interaction I see often is an element growing on entry and shrinking on exit. It wasn't obvious to me how you achieve this, but I managed to cobble a demo together:
The important bit for me turned out to be the keyframe definitions. I thought there might be a way to specify entry and exit values to the animation-range but I found that the keyframe edits were just fine.
You can see the code in the demo above, but I'll put the code here too. It's makes sure the browser supports the functionality so you should consider fallbacks where it makes sense to have one:
@supports (animation-timeline: scroll()) {
#contentBox {
animation: marginFlexer ease-in-out both;
animation-timeline: scroll();
}
@keyframes marginFlexer {
0% {
margin-inline: 10vw;
}
50%, 80% {
margin-inline: 5vw;
}
100% {
margin-inline: 10vw;
}
}
}Europe Wants to Cut Down on Annoying GDPR Cookie Pop-Ups
Finally.
This always should have been at the browser level. It also needs to be extremely clear exactly what is being given up if you choose to accept cookies from a vendor in plain language. There's just no point otherwise.
Odd that this is coming about not long after complaints about Apple's App Tracking Transparency feature. Isn't this effectively the same thing?
Week 420: Linear gradients in new colour spaces
Not strictly new, but I've not really dived into colour spaces in CSS much at all but have been looking at them recently because I knew they would provide smoother gradients for me.
Can I Use says there's over 90% support for Oklab and Oklch so definitely time to give them a go.
The first thing that stumped me was being able to specify the direction of a gradient and the colour space at the same time. Pretty simple actually because you can just chain them together:
background-image: linear-gradient(to top left in oklch, red, blue);
The above renders a gradient that starts with red in the bottom right and ends towards the top right in blue. The colour space is Oklch which is a lot more pleasing than the regular sRGB one that we're used to.
This post is really a reminder for myself. I've not relied on images for gradients in years but the CSS equivalent hasn't always been the best representation of a gradient but these get us to a really good place.
Week 422: Hero with sticky nav scroll driven animation
I've been thinking about a layout I want to experiment with for a hero landing page where the header / primary message is front and centre and the navigation then sticks to the top once it reaches the top. Easy enough, but I thought it would be nice to have the navigation only be as wide as the content until it becomes sticky.
Following on from last week's post on scroll driven animations, it was pretty simple to work out with no JavaScript required. The graceful fallback is to just show at the same width as the content no matter what.
As you scroll, the nav takes over the top and stretches to full width and remains sticky.
A very basic demo but it works! I ended up setting the line-height to 1 and using the known font sizes to make sure the nav appears at the bottom of the view on initial load.
Adding wings to my car so I pay less tax
Week 419: Failing at Weird Web October 2025
5 weeks ago I wrote about taking part in Weird Web October and got of to a strong start, but I didn't make it past week 16. That's over half way, but I had ideas for some of the other weeks and I don't know if it counts submitting items after the month has finished!
My biggest failing was time, in early October I found I had plenty but that seemed to evaporate.
I approached the project in a way that means I wrote little JavaScript and kept styling to a minimum. Templating should have made that easier but I messed up tags a few times for submissions and I didn't always nail the approach first time.
16 out of 31 isn't bad. I might revisit a few when I have some time and I intend to look out for the same event in 2026.
Week 418: Prototyping options
Do I sketch on paper of begin designing in Sketch?
What if I prototype and mockup at the same time?
Prototype with code?
Ultimately, I fall back to that last option, which isn't always ideal because it can often mean trying to carry on with a concept that is likely to have evolved rather than one that was clearly defined from the start.
I do sketch on paper sometimes, but bullet-pointing ideas fits my mental models better and helps to start mapping out what direction I should go in.
I do have a number of app ideas loosely defined so this post is a reminder to myself not to jump into code, but to prototype in an app like Sketch first. I think that will provide me with better validation for an idea. Once it's committed to code, it's very hard for me to give up on an idea!
Apple Warns App Tracking Transparency Could Be Disabled in Europe
Come on, Germany! You're on the wrong side of this. Apple did abuse it's position with App Tracking Transparency, in the eyes of advertising companies (Meta and Google included) but took this action in an effort to protect their customers.
The fight to have in this space is asking exactly why Apple would need to implement such a feature at all if our privacy wasn't constantly being invaded. Advertising is more lucrative now because you can target with unnerving accuracy. Just because it's possible doesn't mean it's ethical.
The problem with Exposure.
I was working on a photography app where it would help you pick the right settings to get the right exposure for your lighting conditions. I ended up with an intuitive app but getting results that made sense for the current conditions was much harder than I anticipated.
This video highlights how much variance there is when playing with exposure, aperture and shutter speeds. It's given me lots of information to think about and I'll be revisiting the app to see if it's worth pursuing or not. Even if it's not, I've taken a lot away already for when I'm next using my DSLR.
Sora Proves the AI Bubble Is Going to Burst So Hard
The Base M5 MacBook Pro vs. the M4 MacBook Air
John Gruber:
They just think they need a “pro” laptop, and underestimate just how incredibly capable MacBook Airs are.
Totally agree with this. In the Apple Silicon era, the MacBook Air's have never been more capable. For my work laptop, I now use a M4 MacBook Air with 24GB of RAM. It surpasses my previous 13" Intel MacBook Pro in every way and even my old personal 15" MacBook Pro was never this capable. I went for the M4 Pro MacBook Pro as my personal laptop because I know I'll be pushing it for development but for the majority of buyers, the MacBook Air is the device they should be considering.
Week 417: Lighting & wiring
We're looking at lights and sockets that need fitting and I'm in a position where I can improve the WiFi connection in various bits of our property and even into the garden.
I'm implementing two different sockets with WiFi extenders built in to see how they perform. I think they'll actually do the job and improve our coverage.
The backup plan (I'm waiting for Black Friday) is to go for something hard wired.
We're limited to the internet speeds we can get into our property so I'm in two minds about investing in a router right now. I think I'll take the plunge when we have significantly better speeds available to us.
I do remember having issues with my non-Pro MacBook and WiFi extenders in the past, but that was back in the early 2010s. We still a Belkin extender in the summer when we're in the garden more but I think a more permanent solution is worth the small investment now. If it's not working out I may not be able to wait for Black Friday, but if it does, maybe I won't need to do anything more!
While we are a Philips Hue household, I am opting not to go the smart lights route. I've already had to replace a colour bulb but couldn't stomach the cost of a single bulb so opted to by a fixed white one instead. It's fine but it's lost it's magic. I don't need more devices to manage so opting to go for physical switches.
The New MacBook Pro Is €35 Less Expensive in E.U. Countries, Ships Without a Charger
This is probably the most sensible take on the current discourse around Apple's decision to take chargers out of the box in the EU (and the UK).
Sounds like the EU's mandate is for customers to be able to opt out of including a charger, but Apple have taken a consistent stance with their products where you have to opt in.
I still have MagSafe 1 and MagSafe 2 chargers at home so when I upgraded to the M4 Pro MacBook Pro I don't know if I'd have stumped up for their power brick. I ended up with a
Week 416: BBC and The Open University on AI
I have previously commented on my AI scepticism and while I'm not against using it, I do have plenty of reservations on how it is being applied.
I came across a short video series by the BBC and The Open University on the topic AI. I've embedded them below for you to watch and I think they give a balanced status update.
How AI can help YOU - at home and at work!
Let's talk about AI art
Week 415: Time Machine solution
I currently have a
That's something I can easily address by connecting it more often, but it's a suitable solution. Apart from the fact I was previously using a Seagate branded NAS as a Time Machine drive but that was always unreliable and then finally game up about a year ago.
I've always dreamt of having a RAID 1 NAS drive to back up to. One that could do Time Machine backups and offer some redundant storage for whatever I need.
I haven't found that solution, or at leat I haven't committed to one yet.
For now my solution works as a backup and in truth I don't remember needing to retrieve a backup but the safety net is nice to have.
Week 414: Weird Web October
I always have the intention of joining in with a month-long exercise, usually in the art space, but never quite make it happen but I stumbled across Weird Web October this week and decided to give it a go.
I've completed the first 3 challenges over on weird.cchana.dev/2025 and will be working not he 4th and 5th submissions this weekend!
What Dwayne ‘the Rock' Johnson Knows About Pain
Week 413: New Tech Gripes
Don’t get me wrong, I do want the iPhone 17 Pro in Cosmic Orange. I don’t actually think it’s a great looking device, but their approach to dissipating heat and the fact that they have made an orange iPhone, I do want it. I just don’t need it.
Almost all of the new tech I’ve bought in the past decade has just felt incremental. I’m usually upgrading a device I already own due to its age and the changes never feel revolutionary. Partly that’s because Apple does a fantastic job of keeping devices relevant with OS upgrades and then when you do upgrade you suddenly get access to a subset of features that weren’t there before.
View more posts in the archive or discover more notable items.