Dharmen Shahshhdharmen.hashnode.net·Apr 2, 2021FeaturedAnimation can make wave 👋 much more than emoji!We all use wave 👋 emoji a lot in web apps! Next time when you use it, try to add a simple wave animation to it... @keyframes wave-animation { 0% { transform: rotate(0deg); } 10% { transform: rotate(14deg); } 20% { transform: ro...Discuss·147 likes·2.3K readsEmoji AnimationCSS
Avneesh Agarwalavneesh0612.hashnode.net·Dec 21, 2021Create an animated sidebar with TailwindCSS in React💫Hey everyone, in many apps you need a sidebar/drawer which slides in if you click on a hamburger icon. In this tutorial, we are going to see how to build that 🌟. Demo https://www.loom.com/share/b748e5d32ebd4552aebf78be01d63408 Setup Creating a new r...Discuss·127 likes·37.2K readsReactSoo cool. Keep up the good work Avneesh 4
Avneesh Agarwalavneesh0612.hashnode.net·Aug 22, 2021Create an infinite scrolling animation with CSS 💥You might have seen an infinite autoscrolling animation on a website with some logos. This scrolling animation looks really good. So let's see how we can do that Creating a container with 6 divs inside it <div class="container"> <div class="pink"...Discuss·120 likes·5.6K readsCSS
Mukul Chughmukulchugh.hashnode.net·Apr 25, 2023Crafting Beautiful Animations in React with Framer MotionIntroduction In the world of web development, animations play a vital role in enhancing the user experience. Animations can make a website or application feel more responsive, engaging, and dynamic. One of the most popular frameworks for building web...Discuss·10 likesframer-motion
Clark Grayclarkgray.hashnode.net·Apr 23, 2023Race & Responsibility: The Fox & The HoundI recently had the pleasure of revisiting one of my favourite old-time Disney cartoons. The Fox & The Hound (1981). When I was around the age of 6 or 7, I would watch this film with my parents on cassette tapes. Now, on a bootleg video platform on my...Discussresponsibility
Aditya Donawadeadityadonawade.hashnode.net·Apr 21, 2023Bringing Characters to Life: The Role of Programming in Cartoon AnimationCartoon animation is a field that combines creativity and technology to produce engaging stories that appeal to a wide audience. Gone are the days when animators had to draw thousands of frames by hand to create a few seconds of animation. With the u...Discussanimation
Mohamed Youssoufmoyoussouf.hashnode.net·Apr 14, 2023How To Create Horizontal Infinite Scrolling Text (Without Using JavaScript)Originally published at www.myoussouf.com Back in the day, if we wanted to add a cool scrolling text animation to a website. The best and the easiest option would be to use the marquee tag, but nowadays it is deprecated and not advised to use it. bu...DiscussCSS
Siddharth Singhofficiallysidsingh.hashnode.net·Apr 11, 2023Intersection Observer In ReactWhat does Intersection Observer API do? Intersection Observer enables us to detect the visibility of an element. What it internally does is it lets us pass a function as its parameter. This function in turn is a callback function. This callback funct...DiscussReact
Sai Pranaysaipranay47.hashnode.net·Apr 10, 20235 JavaScript Animation Libraries to Bring Your Web Pages to LifeJavaScript animation libraries are an essential part of modern web development, allowing developers to create visually engaging and interactive web pages. From simple transitions to complex 3D graphics, animation libraries provide a wide range of cap...Discuss·10 likes·27 readsJavaScript
Devyanshdevbytes.hashnode.net·Apr 10, 2023CSS AnimationSometimes we become more fascinates by such websites which are filled with more amusing animations. This animation automatically initializes without any user interrupts. Hence the properties required for animation are as follows: @keyframes: This sp...DiscussHTML5
Rohan singhsinghrohan.hashnode.net·Apr 10, 2023Animation for ham-burger iconUsing CSS CSS Animation is a technique used to create visual effects and motion graphics on a webpage without the use of JavaScript or other programming languages. It is accomplished using CSS keyframes, which define a sequence of CSS styles to be ap...Discussanimation
PrasanthKumar Yernagulaprasanthkumar.hashnode.net·Apr 8, 2023Powerful css animation toolWhile designing websites it takes a lot of time to animate the things, although css gives full freedom to make awesome animations but at the same time it's too time consuming. I always wanted to have a tool by which it simplifies the animations easil...Discuss·2 likesCSS
Ashith ShettyforVelocity IIIT Dharwadvelocity-1679156379018.hashnode.net·Mar 27, 2023GSAP: Animate Like a ProIntro Hello everyone, this is my first ever technical blog and I am excited to share my experience with a robust animation toolset, and by using it you can feel you are an animation superhero. GSAP or GreenSock Animation Platform is a Javascript anim...Discuss·9 likes·205 readsGSAP
