Reverse Engineering Websites as a Learning Method
When I land on a website with an interesting functionality or animations or even a layout, my curiosity instantly kicks in—“How did they make this?” This curiosity has me on an ongoing quest to reverse engineer that website.
In this blog, I just wanted to share how I reverse engineering websites has helped me learn more on logic building for any functionality or animation.
Why Reverse Engineering Became My Go-To Learning Method
I’ve always believed in the power of hands-on experiences. Sure, reading tutorials and documentation is helpful, but nothing beats diving into a live project that catches your eye and picking apart its code line by line.
It’s thrilling to find little code snippets or techniques you might never have encountered otherwise. For example, I stumbled upon this website called Accordion Productions that had used text shadow to animate the heading text. If I hadn’t been exploring someone else’s code, I might not have even known that I could use text shadow in that way. We always learn something new from other people’s work.
(Of course, I'm not suggesting you should copy their exact approach and use it on your work, but instead, analyze their technique, understand it, and then adapt it in your own unique way.)
How I Approach Reverse Engineering
Below are a few examples of how I recreated part of websites like Accordion Productions and Substack as a way of learning something new or to simply learn more about it.
Accordion: A Masterclass in GSAP
My boss suggested I could try recreating Accordion Productions’ website since it’s beautifully made and it’s animations are made with GSAP. So, it felt like a perfect opportunity to learn more about GSAP and animation logic.
I started by inspecting their layout, paying attention to any changes while scrolling or interacting with various elements.
Then, I looked into their source code to understand how interactions were influencing the design. This was my first big takeaway—learning their logic building process was as important as understanding the technology itself.
One of the things that really stood out was how they animated the text shadow for headings. This technique is something I had never considered before and was a game-changer in my animation toolkit. Another technique I found fascinating was how they dimmed other elements when hovering over one of the director’s names. They used GSAP to achieve this effect, and I saw potential for improvement. For example, I realized that I could use the :has() pseudo-class in CSS to simplify certain aspects of this interaction.
Substack: Breaking Down the Problem
Substack has one interesting feature which is the Share Quote functionality. It's a simple yet highly effective feature that adds a personal and engaging touch to content sharing.
Basically, users can select any part of a paragraph and share that quote from the blog. But what makes it stand out is how it incorporates the featured image of the blog as a background for the shared quote. Additionally, it automatically includes the website’s subdomain and the author’s name, providing context and attribution. Not only can users share the quote on their social media, but they also have the option to download the image with the quote and featured image for offline use. If they want to share it more widely, Substack generates a share link, making the process of spreading content super easy.
To recreate this, I first analyzed the micro-features:
- User selects a quote from the text.
- A Share Quote button pops up after the selection.
- Generate the downloadable image with the quote and background.
The first two steps were relatively straightforward to implement. The challenge, however, was how to generate an image from a designed DOM element. After bit of a research, I found out about html2canvas, a library that allows you to generate an image from any DOM element. This solved the problem of creating downloadable images directly from the webpage.
Conclusion: Reverse Engineering for Growth
Reverse engineering doesn’t just help me learn new techniques, but it also pushes me to think about how to improve them. With hands-on experience, I’m constantly expanding my knowledge and honing my craft.
I encourage anyone to embrace reverse engineering as a way to learn—whether it’s dissecting animations, functionalities, or even layouts. You might be surprised at how much you’ll learn by simply inspecting how others approached a design challenge.
The more you explore, the more you’ll grow, and the better you’ll become at crafting experiences that leave an impact.
When I land on a website with an interesting functionality or animations or even a layout, my curiosity instantly kicks in—“How did they make this?” This curiosity has me on an ongoing quest to reverse engineer that website.
In this blog, I just wanted to share how I reverse engineering websites has helped me learn more on logic building for any functionality or animation.
Why Reverse Engineering Became My Go-To Learning Method
I’ve always believed in the power of hands-on experiences. Sure, reading tutorials and documentation is helpful, but nothing beats diving into a live project that catches your eye and picking apart its code line by line.
It’s thrilling to find little code snippets or techniques you might never have encountered otherwise. For example, I stumbled upon this website called Accordion Productions that had used text shadow to animate the heading text. If I hadn’t been exploring someone else’s code, I might not have even known that I could use text shadow in that way. We always learn something new from other people’s work.
(Of course, I'm not suggesting you should copy their exact approach and use it on your work, but instead, analyze their technique, understand it, and then adapt it in your own unique way.)
How I Approach Reverse Engineering
Below are a few examples of how I recreated part of websites like Accordion Productions and Substack as a way of learning something new or to simply learn more about it.
Accordion: A Masterclass in GSAP
My boss suggested I could try recreating Accordion Productions’ website since it’s beautifully made and it’s animations are made with GSAP. So, it felt like a perfect opportunity to learn more about GSAP and animation logic.
I started by inspecting their layout, paying attention to any changes while scrolling or interacting with various elements.
Then, I looked into their source code to understand how interactions were influencing the design. This was my first big takeaway—learning their logic building process was as important as understanding the technology itself.
One of the things that really stood out was how they animated the text shadow for headings. This technique is something I had never considered before and was a game-changer in my animation toolkit. Another technique I found fascinating was how they dimmed other elements when hovering over one of the director’s names. They used GSAP to achieve this effect, and I saw potential for improvement. For example, I realized that I could use the :has() pseudo-class in CSS to simplify certain aspects of this interaction.
Substack: Breaking Down the Problem
Substack has one interesting feature which is the Share Quote functionality. It's a simple yet highly effective feature that adds a personal and engaging touch to content sharing.
Basically, users can select any part of a paragraph and share that quote from the blog. But what makes it stand out is how it incorporates the featured image of the blog as a background for the shared quote. Additionally, it automatically includes the website’s subdomain and the author’s name, providing context and attribution. Not only can users share the quote on their social media, but they also have the option to download the image with the quote and featured image for offline use. If they want to share it more widely, Substack generates a share link, making the process of spreading content super easy.
To recreate this, I first analyzed the micro-features:
- User selects a quote from the text.
- A Share Quote button pops up after the selection.
- Generate the downloadable image with the quote and background.
The first two steps were relatively straightforward to implement. The challenge, however, was how to generate an image from a designed DOM element. After bit of a research, I found out about html2canvas, a library that allows you to generate an image from any DOM element. This solved the problem of creating downloadable images directly from the webpage.
Conclusion: Reverse Engineering for Growth
Reverse engineering doesn’t just help me learn new techniques, but it also pushes me to think about how to improve them. With hands-on experience, I’m constantly expanding my knowledge and honing my craft.
I encourage anyone to embrace reverse engineering as a way to learn—whether it’s dissecting animations, functionalities, or even layouts. You might be surprised at how much you’ll learn by simply inspecting how others approached a design challenge.
The more you explore, the more you’ll grow, and the better you’ll become at crafting experiences that leave an impact.
