I created my first scroll-driven animation in CSS

I created my first scroll-driven animation using the CSS animation API this week! And it was so easy to create. Bramus’ Unleash the power of Scroll Animations course was incredibly helpful. The lesson on Animate Elements in Different Directions was just what I needed to create a scroll-driven timeline for a project I have been working on. The solution uses progressive enhancement to support browsers that do not yet support view-timeline.

I pulled the content I started here and created a separate post,

I created my first scroll-driven animation in CSS

I created my first scroll-driven animation using the CSS animation API this week! And it was so easy to create. Bramus’ Unleash the power of Scroll Animations course was incredibly helpful. The lesson on Animate Elements in Different Directions was just what I needed to create a scroll-driven timeline for a project I have been working on. The solution uses progressive enhancement to support browsers that do not yet support view-timeline.

I pulled the content I started here and created a separate post, I created my first scroll-driven animation in CSS. I share some code and videos of both solutions.

---

Early in the week, I felt like Scrat as I was optimizing the annual project report for smaller screens. As I have mentioned in the past, I write mobile-first CSS but my process is to start with the desktop and then go back and refactor my code for smaller screen layouts.

As I was working on this phase of the project on Tuesday, I felt like holes kept springing up. I would fix one thing but find another problem. I was feeling a bit overwhelmed. But I did not give up and by Wednesday, I had most things resolved and things were going a lot smoother. I was aiming to have the project at a good place to be reviewed by other teams while I took vacation time during Thanksgiving week. And then I will address that feedback and finish up the project to launch early in December.

At the fair, at the fair, at the fair

I enjoyed seeing my youngest perform in Charlotte’s Web at Chattanooga State Community College over the weekend. This is the third production she has performed in at Chatt State. She was an assistant stage manager for a show earlier in the Fall.

She played one of the narrators for the story. They interact with the play and assume some ensemble roles along the way. One of their memorable lines that they say all together is, “At the fair, at the fair, at the fair.” She did a great job. The role was perfect for her as she is so expressive.

---

Articles I read

• Alchemy (Josh Collinsworth)
• Providers (Jeremy Keith)
• Why Euthanasia Feels Intuitive (Tim Challies)
• Sir Dave Coulier (Joe Crawford)
• The Man Who Plays Pastor (Tim Challies)
• An Update On My Involvement In Standards (Adam Argyle)
• On Being a Playful Father (O. Alan Noble)
• Is A Big Fat Audacious Hairy Revival On Its Way? (Stephen McAlpine)
• It’s Here: Gen-Z Revival Hits Campuses This Fall (Sarah Eekhoff Zylstra on The Gospel Coalition)
• Tahoe’s Terrible Icons: The B-Sides (Jim Nielsen)
• Why Non-Christians Oppose Transgender Ideology (Alan Shlemon)
• Difficult Does Not Mean Cryptic and Mysteries Aren’t Meant To Mystify (Tim Challies)
• Site Updates (Joe Crawford)
• Grace upon Grace: What Happened When John Piper Missed Our Conference (Carl Jan Christian Roth on The Gospel Coalition)

What I watched

Why You Should Move To Hungary (YouTube) – I enjoyed hearing this Dane share why he likes living in Hungary. I have had several life-changing experiences in Hungary and it was fun to hear from someone else who has fallen in love with this country and its people.

• The Voice (NBC)
• Boston Blue (CBS)
• Watson (Paramount Plus)
• Matlock (CBS)
• Strange New Worlds (Paramount Plus)
• Hidden Strike (Netflix)
• The Adam Project (Netflix) – I enjoyed revisiting this movie and sharing it with my wife.
• A Man On The Inside – Season 2 (Netflix) – We watched the first episode on Saturday night.

What I listened to

• Subgrid is kind of complicated (General Musings with Kevin Powell) – Like Kevin, I have used Grid more for smaller page solutions than creating a grid structure for the whole page. I used a lot of different grids for layout in different sections of the page or in the hero. So I have never found it very complicated. But I have also not used subgrid that often. I have used it a couple of times recently but those were pretty simple layouts.
• Steve Ruiz and tldraw (ShopTalk Show Episode 690) – I am interested to check out tldraw after hearing this episode.

Books I am reading

• Sunday Matters (Paul David Tripp) – I read one devotional a week.
• Everyday Gospel (Paul David Tripp) – Reading through the Bible this year with this devotional.
• Telling a Better Story (Joshua Chatraw)
• Not Old, Not Young, Not Done. (Christopher Ash)
• All That Jesus Commanded (John Piper)
• Keep Going (Austin Kleon) – I picked this one back up on Saturday.

Walking

I decided to be more intentional in walking this week and got out at the end of the workday. It was a nice way to transition from work each day and to detach myself. I have been quite focused on the project I have been working on so it was nice to get out and enjoy being outside and being good to my body. I am excited to build on this momentum and hopefully develop it into a habit again.

• Sunday – 2.6 miles in 49 minutes
• Monday – 3.56 miles in 1 hour and 6 minutes
• Tuesday – 2.74 miles in 53 minutes
• Thursday – 2.54 miles in 46 minutes
• Friday – 3.05 miles in 58 minutes

What I played

• MLB The Show 20 (Twins) – I went 4-1 this week and clinched the A.L. Central Division title. I have a shot at the single season record for games won (116). I currently have 107 wins with 19 games left to play.
• NBA 2K25 (Nuggets) – With the new NBA season starting last month, I was motivated to pick up where I left off. I came away with a win and did not feel too rusty after a long stretch of not playing this game.

The post Weeknotes 25:47 appeared first on Jeff Bridgforth.