React Summit US

React Summit US 2023

The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.

When it comes to building whimsical interfaces, React is a surprisingly capable ally. In this talk, I'll show you how I use React to orchestrate complex interactions by digging into some examples from my blog.

The Whimsical Potential of JavaScript Frameworks

Josh Comeau

React Day Berlin

React Day Berlin 2022

Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.

Emotional & Functional UI Animations in React

Elizabet Oliveira

React Day Berlin 2024

Today's Talk is about coding images in React with SVGs. SVGs are powerful when combined with JavaScript and can be used to create interactive elements. Understanding SVG syntax and positioning is important, as SVG elements are limited to SVG-specific elements. The circle element in SVG can be styled and used to create shapes. The rectangle element is commonly used for charting and can be customized. The path element offers flexibility and can be built from multiple segments. Transformations and curves can be used to create complex shapes and animations. Bezier curves, both quadratic and cubic, are useful for bending lines and creating smooth transitions. Advanced features like drawing arcs are available in SVG. For more examples and use cases, visit svgtutorial.com.

Did you ever need a hamburger menu icon and you you looked out for one in an icon library? Actually, it's only a few lines of code with <a href="https://svg-tutorial.com/">SVG.</a> And SVGs combined with React open up a whole new world. You can generate diagram, graphics or animation, make an interactive game or app. Let's walk through the basics of the syntax.

How to Code Images in React with SVG

Hunor Márton Borbély

JSNation US

JSNation US 2024

MacroMedia Flash revolutionized web development by allowing easy creation of animations. Web animations evolved from meta tags to keyframe animations and JavaScript animations. View transitions provide a better solution by creating animated transitions between DOM states. Advanced view transitions allow for tracking changes in the DOM and achieving powerful features like animating elements with display:none. The web animations approach uses the flip animation technique to reveal information. Astro is a project that embraces view transitions and offers built-in support. React has good support for view transitions. View transitions are currently supported in most major browsers. CSS animations and shape transitions can be easily integrated to customize animation behavior.

Animations on the web have always seemed like something impossible to do right. With complex JavaScript needed in order to do anything compelling and a lot of math required, animations are often ignored. But, what if there were a better way? What if you could just tell the browser what will animate and let the browser take care of the rest? Enter View Transitions.View Transitions are a new web feature that allows developers to build compelling animation without having to dive into working JavaScript in order to do so. Let's look at adding View Transitions into our app and how to drive compelling animations with ease!

Simplified Animations on the Web

Mike Hartington

React Summit

React Summit 2024

In this Talk, the speaker discusses how to enhance animation in React apps and optimize animation in browsers. They explain the browser's animation pipeline and the importance of avoiding frame drops. The speaker compares CSS and JavaScript animations, highlighting the benefits of using the requestAnimationFrame API. They also discuss combining CSS and JavaScript animations using the Web Animation API. The Talk concludes with tips on avoiding redundant calculations and provides additional resources for further learning.

Animations are the heartbeat of captivating web experiences but wield them carelessly, and the enchantment fades into frustration. Join Nikhil on an exhilarating journey as he reveals the secrets to crafting mesmerizing, high-performance animations in your React apps.In this dynamic talk, Nikhil delves deep into the world of animation, dissecting the common bottlenecks that threaten your app's responsiveness. Learn how to identify, debug, and eliminate these performance roadblocks, ensuring your animations are as snappy as they are spellbinding.

Animating React With Finesse!

Nikhil Sharma

React Advanced

React Advanced 2022

This talk is about animations in React Native, specifically focusing on React Native Reanimated. It covers the use of interpolations and extrapolations in animations, animating items in a carousel or list, sticky elements and interpolation, and fluidity and layout animations. The talk provides valuable tips and tricks for creating performant animations and explores the use of math formulas for natural movements.

Are you afraid of animations? Well, you shouldn't be, React Native Reanimated got you covered. Your mobile application can share a story through animations, can help users through micro-interactions and differentiate your app from the others.

React Native Animations Should Be Fun

Catalin Miron

JS Nation

JSNation 2022

Today's talk is about animations in Javascript, covering frame rates and different methods like CSS transitions and animations. JavaScript provides more control over animations, allowing interpolation and simulation of real-world scenarios. Different approaches to animating a box from zero to 100 pixels are discussed, including for loops, timers, and the web animations API. Request Animation Frame is highlighted as a solution for consistent and smooth animations. The Web Animations API is introduced as a powerful tool alongside CSS animations and transitions, although it has limited browser support.

Creating different animation effects like bouncing, typing with vanilla javascript. Looking at several approaches of creating animations with time based functions and Request Animation frame.

Animations with JS

Aashima Ahuja

JS GameDev Summit

JS GameDev Summit 2022

The Workshop on Generative Art and JavaScript covers various topics, including drawing shapes, using the debugger and CSS styling, and exploring variables and colors. It also delves into creating fire effects, drawing lines and shapes, and working with oscillation and particles. The workshop emphasizes the importance of saving work, experimenting, and building up from the basics. It highlights the uses of generative art in different industries and draws inspiration from textiles and the real world. Overall, it provides a comprehensive overview of generative art techniques and their applications.

Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to make amazing generative art with simple JavaScript code

Frank Force

Vue.js Live Conference

Vue.js London Live 2021

Today's Talk covers animation in Vue JS apps, including CSS animations, JavaScript animations using the GSAP library, and handling multiple elements with transition groups. The Talk also discusses different kinds of movements, state transitions, and animating numbers and SVGs. Overall, it provides a comprehensive overview of animation techniques and tools for enhancing Vue JS apps.

There's a lot to gain from adding animations to your site or app. Beyond their visual appeal, you can guide the user's attention, cover up slow to load components and elements, and reveal sections of a page without the user wondering where it came from. This talk will cover the built-in ways Vue.js helps you animate your site, and how for more complicated animations you can hook into third party libraries. It'll also cover the basics of animation itself – what to animate, what not to animate – and how you can use animations to enhance your website without harming the experience of people with disabilities. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Animation and Vue.js

Callum Macrae

JSNation Live

JSNation Live 2021

Scroll animations can enhance user experience when done properly, but should not distract from important information. CSS, JavaScript, and plugins like Scroll Trigger can be used to achieve scroll animations. GreenSock's ScrollTrigger provides a powerful JavaScript animation library for more complex animations. It is important to consider accessibility and provide reduced motion fallbacks. CodePen and GreenSock's documentation are valuable resources for learning and inspiration in creative coding.

Wait! Not so fast - Stop scrolling and hang out with me for a while! When done right, scroll based animations can add polish to a site, and make online storytelling feel more immersive. GreenSock's ScrollTrigger enables you to achieve buttery smooth scroll based animations with minimal code. Let's dig in to some of it's features together. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Keep Scrolling

Cassie Evans

React Summit Remote Edition

React Summit Remote Edition 2021

Animations can enhance the user experience and provide context in interface design. Using frame and motion in React can create smooth fade-in effects and improve navigation. Optimistic updates and instant comment appearance can eliminate waiting time and improve user experience. Motion can be used in multiple ways to give context and enhance user experience. Accessibility and performance should be considered when implementing animations. Choosing the right library, such as frame of motion or React Spring, can simplify animation implementation. Animations can enhance perceived performance and influence users' perception of speed.

When users directly manipulate onscreen objects instead of using separate controls to manipulate them, they’re more engaged and more readily understand the results of their actions. Subtle animations can give people meaningful feedback to help clarify the result of their actions. But, the devil is in the details. What often seems simple can be complex to get right, especially when you care about accessibility. Sid shares the lessons he has learned building interactive UIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#animations