Simplify Scroll Animations with Native CSS Timeline

Built a fully interactive JavaScript Calculator with custom animations & DOM control Just wrapped up a frontend project where I pushed beyond basic functionality and focused on interaction, performance, and visual feedback. This wasn’t just about “does it calculate?” — it was about how it feels to use. 🧠 What I used under the hood: ⚡ querySelectorAll() to efficiently target and control multiple button elements at once 🎯 Clean DOM manipulation for handling inputs, operators, and live display updates 🎬 CSS @keyframes + animation timing to give button clicks smooth visual feedback ✨ Transition + animation layering to make interactions feel responsive and modern ⚙️ Event-driven logic using addEventListener to handle user input cleanly 🧩 Conditional logic for operator handling and edge cases ⚠️ I also experimented with dynamic expression evaluation using eval() for quick parsing — not production-safe, but useful for understanding how expression engines work under the hood before moving to safer parsing methods. 💡 Key takeaway: A calculator is simple on the surface, but once you start adding animation, state handling, and DOM optimization, it becomes a great exercise in how real frontend systems behave. Next step: replacing eval with a proper expression parser and improving state management. 🔗 Live project: https://lnkd.in/dyxdpW9K⁠� #JavaScript #FrontendDevelopment #WebDevelopment #CSSAnimations #DOMManipulation #HTMLCSSJS #CodingProjects #WebAnimation #LearnToCode

Stop using JavaScript for staggered animations.  New CSS functions handle the logic for you. 1. Two new CSS functions CSS now includes two tools to manage lists of elements: - sibling-index: it tells an element its exact position in a list. - sibling-count: it tells an element the total number of items in that list. 2. Automatic calculations In the past, we used JavaScript to give a number to every element. This process was slow and difficult to maintain.  Now, the browser calculates these values automatically. You do not need to update your code if you add or remove items. 3. A practical example I made a demo with 200 dots in a spiral. Each dot uses its index to calculate its position and its delay. The project uses native math functions like sine and square root. 4. Main benefits - The code is much shorter. - There is no JavaScript for the animation logic. - The style is clean and easy to update. Want the demo? Let's have a look to https://lnkd.in/eWqKDxZQ

Have you ever looked at a website and thought, “How is this even built?” That was me when I saw the Anime.js website. What started as curiosity turned into one of the toughest builds I’ve ever taken on. I didn’t just explore it I rebuilt the entire experience from scratch. Every scroll, every transition, every 3D like motion detail… none of it came easy. It took hours of breaking things down, researching how animations actually behave, and retrying until it felt right. There were points where it felt almost impossible to match the smoothness and precision but that is exactly what made this project worth it. What changed for me after this: • I do not just “use” animations anymore I understand how they work • I gained real control over 3D style motion on the web • Scrollytelling finally clicked for me • My approach to frontend has completely leveled up This was not just a project it was a shift in how I think about building on the web. Curious what is the hardest thing you have ever tried to recreate? #FrontendDevelopment #JavaScript #AnimeJS #WebAnimation #Scrollytelling #3DWeb #CreativeCoding

Maximum effort? More like maximum timepass. I kept seeing this viral Deadpool website concept floating around Pinterest and finally decided to turn the static design into real code. I built this purely for fun over a casual coding session to stretch my UI and animation muscles. Translating the bold typography, the character layering, and the dark theme into the browser was a great mini-challenge. The tech stack: - React - Framer Motion (for the smooth, dynamic animations) Sometimes, as developers, we need to take a step back from serious architecture and just build things because they look cool. Check out the live deployment here (preffered dekstop view for better visual experience) : https://lnkd.in/dWdwYfRU #ReactJS #FramerMotion #FrontendDev #WebDesign #UIUX #JavaScript #WebAnimations #CreativeCoding #FrontendDeveloper #WebDevelopment

CSS scroll-driven animations are here, and they are better than you think. For years, scroll effects meant wiring up JavaScript event listeners or wrestling with IntersectionObserver. Not anymore. Two new CSS properties change everything: animation-timeline -> tells the browser what to track (a scroll container or an element's position in the viewport) animation-range -> controls which part of the scroll journey triggers the animation Your existing keyframes stay exactly the same. You are just swapping the time axis for a scroll axis. Here is a reading progress bar in pure CSS: .progress-bar {   width: 0%;   height: 3px;   animation: grow linear;   animation-timeline: scroll(root); animation-range: 0% 100%; } @keyframes grow {   from { width: 0% }   to  { width: 100% } } And here is a scroll reveal effect that fires as each element enters the viewport: .card {   opacity: 0;   transform: translateY(20px);   animation: fade-up linear both;   animation-timeline: view();   animation-range: entry 0% entry 35%; } @keyframes fade-up {   from { opacity: 0; transform: translateY(20px); }   to  { opacity: 1; transform: translateY(0); } } No JavaScript. No event listeners. No library. Just CSS. One thing worth noting: Chrome and Edge have had full support since version 115, Safari since version 18. Firefox support is still on its way, so wrapping your animations in an @supports block is good practice to make sure all users see your content properly. If you have not explored this yet, it is one of the most satisfying things you can drop into a project right now. The gap between what used to require JavaScript and what CSS handles natively keeps closing fast. I'm curious if you've done something cool with all the cool new stuff with CSS lately. If so, what is it? How has it improved your workflow or code base?

I saw this animation idea on social media while scrolling, and it stuck in my mind. This weekend, I decided to build my own version. It turned into a playful little login UI with geometric characters that follow the cursor, react to hover states, and even look away when the password field is active. Small interaction details like these are fun to build because they can make a simple interface feel much more alive. Built with plain HTML, CSS, and JavaScript. Code: https://lnkd.in/gJKaWnZZ #webdevelopment #frontend #javascript #css #html #uidesign #webanimation #creativecoding #buildinpublic

Came across a really cool scrolling animation on a website recently and got curious about how it works 👀 I tried digging around for existing implementations, checked the dev tools, and found out it was built using Elementor (WordPress) — and of course, it turned out to be a paid feature. Still, I went down the rabbit hole searching for a free or open implementation… but no luck. So I decided to build it myself 💻 Not only did I recreate it, I pushed it a bit further: • Added two modes — smooth scroll & snappy scroll • Included some clean hover effects • Made it more flexible overall No libraries — just pure HTML, CSS, and JavaScript. Check out the animation in the video below 👇 And if you want to try it out in your browser or want the full code, here’s the CodePen link: https://lnkd.in/dN4YJf9c Next step: turning this into a reusable React component so it’s easier to plug into projects. I’ll share updates soon! Might even add it to a future portfolio (once I actually make one 😅) or contribute it to an existing UI library. #webdevelopment #frontend #javascript #css #reactjs #buildinpublic #code

Building a custom header that feels "native" in React Native is notoriously difficult. You either stick with the rigid defaults provided by navigation libraries, or you build a custom component and spend days fighting to get the scroll sync and screen transitions to look fluid. It’s a classic trade-off between stability and customisation that often leads to janky animations. 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗵𝗲𝗮𝗱𝗲𝗿-𝗺𝗼𝘁𝗶𝗼𝗻 just hit 𝘃𝟭.𝟬.𝟬, and it’s a complete shift in how we handle these complex UI patterns. Instead of fighting against the navigation stack, it introduces a way to bridge the gap between your content and the header area with precision. 𝗪𝗵𝗮𝘁’𝘀 𝗻𝗲𝘄 𝗶𝗻 𝘁𝗵𝗶𝘀 𝗿𝗲𝗹𝗲𝗮𝘀𝗲? ➡️ 𝗖𝗼𝗻𝘁𝗲𝘅𝘁-𝗙𝗶𝗿𝘀𝘁 𝗛𝗲𝗮𝗱𝗲𝗿 𝗔𝗣𝗜 — A redesigned architecture that uses React context to manage header state. This makes it much easier to update header elements based on what’s happening deep inside your screen's component tree without messy prop drilling. ➡️ 𝗘𝘅𝗽𝗹𝗶𝗰𝗶𝘁 𝗡𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝗕𝗿𝗶𝗱𝗴𝗶𝗻𝗴 — The library now explicitly bridges with the navigation state, ensuring that as you swipe between screens, the header transitions are perfectly synchronised with the native navigation animation. ➡️ 𝗕𝗲𝘁𝘁𝗲𝗿 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 — Significant internal refactors have reduced the overhead of tracking scroll positions and state changes, delivering much smoother motion even in complex layouts. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? For a long time, achieving that polished "Apple-style" large header that morphs and moves was reserved for apps with massive engineering teams. With the 𝘃𝟭.𝟬 milestone, 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗵𝗲𝗮𝗱𝗲𝗿-𝗺𝗼𝘁𝗶𝗼𝗻 makes these high-end interactions accessible to everyone, providing a stable, performant foundation for design systems that need to stand out. #ReactNative #MobileDev #UIUX #OpenSource #JavaScript #TypeScript #Animations #Navigation #HeaderMotion #SoftwareEngineering #DevTools #MobileAppDev

Building Interactive Parallax Engines with React & Framer Motion 🚀 Just finished integrating a custom Parallax Floating Component that takes user interaction to the next level. The challenge: Create a multi-layered depth effect that remains performant even with high-res imagery. The Stack: 🛠️ React & TypeScript for the component architecture. ⚡ Vite for ultra-fast HMR and building. 🎬 Framer Motion for state-of-the-art animation orchestration. 🎨 Tailwind CSS for the refined luxury styling. The logic uses a custom hook to track mouse position relative to the container’s center, applying individual 'depth' factors to each element. This creates a "magnetic" floating effect that makes the UI feel alive. Always looking for ways to push the boundaries of React animations! 👨💻 #ReactJS #TypeScript #FramerMotion #WebDev #UIEngineering #JavaScript

🚀 Combining Transitions and Animations (Html And Css) Transitions and animations can be used together to create complex and engaging user interfaces in HTML and CSS. Transitions are often used for simple, state-based animations (e.g., hover effects), while animations are better suited for more complex, multi-step sequences. You can apply both to the same element to achieve different effects. For example, you might use an animation to continuously rotate an element and a transition to change its color on hover. Learn more on our app: https://lnkd.in/gefySfsc #HTML #CSS #WebDesign #Frontend #professional #career #development