Podcasts about css animations

Val Head is a Principal Designer at Adobe, author, and web animation expert. She is the author of Designing Interface Animation on Rosenfeld Media and teaches CSS Animation on LinkedIn Learning.    Ramblings of a Designer podcast is a monthly design news and discussion podcast hosted by Laszlo Lazuer and Terri Rodriguez-Hong (@flaxenink, insta: flaxenink.design) (insta: @happiscribble.   LinkedIn Page: https://www.linkedin.com/company/ramblings-of-a-designer/ Facebook:https://www.facebook.com/Ramblings-of-a-Designer-Podcast-2347296798835079/ Send us feedback! ramblingsofadesignerpod@gmail.com Support us on Patreon! patreon.com/ramblingsofadesigner   We would love to hear from you!

في الحلقة دي بتكلم عن خاصية جديدة في الـ CSS حتغير من طريقة تعامنا مع الـ Animations المربوطة بالـ scrolling والتي كانت من ابرز التحديثات للويب الي تم الإعلان عنها في Google I/O 2024. في الحلقة امثلة عملية لحاجات بنعملها كتير بالجافاسكربت والي حتتغير تماماً مع الـ scroll timeline الجديدة وليه انا كشخص مش ضليع بالـ CSS متحمس ليها! لينكات مفيدة: Latest in Web UI - Google I/O Story Telling Animations Demo Fixed Header Demo Scroll to Bottom/Top Demo scroll-timeline - MDN Scroll-driven animations case study Scroll-driven animations Demos

CSS animations are somewhat of an advanced CSS topic that many people skip out on when they're developing their site's MVP, or first few versions. Further into its life though, CSS animations (and transitions for that matter) add a level of polish to a website that can subtly bring about a premium feel for its UI/UX. It's quite easy, however, to go overboard with animations and transitions to the point where they feel out of place, sometimes looking like they're just being done for the sake of another animation instead of complimenting the content on the page. This week, Matt and Mike discussed CSS animations and CSS transitions, discussing the good, bad, and the ugly when it comes to using them on your next project. Show Notes: www.htmlallthethings.com/podcasts/css-animations-can-make-or-break-a-site  

In this episode, Amy and James talk about adding CSS and JavaScript animations to your project: things to consider, the best properties, methods, and libraries to use.SponsorsVercelVercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.For more information, visit Vercel.comZEAL is hiring!ZEAL is a computer software agency that delivers “the world's most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.For more information visit softwareresidency.com/careersDatoCMSDatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with realtime updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."For more information, visit datocms.comShow Notes0:00 Introduction2:48 Parenting Tip4:04 Rant: Learning Multiple Languages6:37 Our Fantastic Sponsors6:51 What We've Been Up To9:59 Why use animations?Jason LengstorfJosh ComeauCSS for JS12:27 Adding Context for Users14:34 Games and AnimationVal Head16:28 Speed of Animation17:33 Sponsor: Vercel18:40 Transitions vs Animations23:06 Animations in CSSCubic Bezier Curve28:02 Transition Property32:16 Sponsor: DatoCMS33:10 Green SockYouTube Video on Tweening SVGs with GreenSock35:45 Framer MotionMatt PerryWill Johnson (Egghead Course on Framer Motion)Pete Cape Cod - Hashnode Article on Framer MotionMotion.dev39:10 React Spring39:52 RemotionJohnny Burger on Twitter41:15 Sponsor: ZEAL42:08 Built into SvelteKitSwortleWand Selector45:09 Grab Bag Question45:21 Grab Bag Question #1: What would you prefer? CSS Animations? Vanilla CSS? JS? Or an animation library like GSAP or Framer Motion?46:59 Grab Bag Questions 2: What are the cheapest and most expensive (performance) types of animation?48:24 Picks and Plugs48:37 Amys Pick: Camo Studio50:07 Amy's Plug: SelfTeachMe on YouTube52:25 James's Pick: Logitech Lights53:59 James's Plug: James Q Quick on YouTube

With Flash set to discontinue from January 12th and the HTML blink tag obsolete, how will we animate our websites from now on? With this issue in mind, we decided to dedicate today's show to the wonderful topic of animation! We discuss how best to tame this powerful and often misused beast as well as get into the tools at our disposal for doing so in CSS, JavaScript, and by using prebuilt libraries too. Animation definitely has a place in UI, but can easily look tacky and overdone, so we start our chat off exploring some best practices for keeping things tasteful and useful. From there, we get into a few of the technicalities of building animations in CSS, highlighting the power of keyframes as well as some of the kinks in this new feature that still need to be worked out. Toward the end of our chat, we speak about the great functionality provided by animation frameworks like React's Spring library, animate.style, and the Web Animations API. So even though Flash is a thing of the past, there is no need to cry, because there are plenty of tools in CSS and JavaScript that will keep us building beautiful animations on our websites well into the foreseeable future. Tune in to learn more!

En este episodio hablamos de transiciones y animaciones en CSS y JS, sus diferencias y los mejores casos donde usarse.

One of the more frustrating aspects of front-end development stems from the fact that even the smallest of alterations has the potential to derail your entire week. In this episode, we'll discuss how to track browser-specific CSS performance issues.

Join us for this episode where Pascal and Fabio interview one of Facebook’s new joiners: Rachel is a developer advocate on the React Core team in London. React is one of the biggest open source UI frameworks in the world, a reputation kept sustainable especially thanks to the amazing work the React Core team puts into the educational material available to the community. Rachel shares her journey from cartoonist to developer advocacy roles to the present day, where she curates and maintains documentation material built for people rather than just coders. How to find the missing or next chapter of your docs? How to measure success? This and much more in episode 16. Please do send us feedback! You can reach us via email mobilepodcasts@fb.com, Twitter (@insidefbmobile) or Instagram (insidefbmobile).   Topics Dev Tools Challenger: http://devtoolschallenger.com/ React: https://reactjs.org React Native: https://facebook.github.io/react-native/ Docusaurus: https://docusaurus.io ComponentKit: https://componentkit.org Flipper: https://fbflipper.com Web Animations API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API MDN: https://developer.mozilla.org/en-US/ Rachel’s Web Animation Docs: http://rachelnabors.com/waapi Rachel’s book on UI Animation: https://abookapart.com/products/animation-at-work Rachel’s courses on CSS Animation and Cartooning: https://courses.rachelnabors.com/ Inclusive speech linter: https://alexjs.com/   Timestamps Intro 00:06 News: React Native Docs Revamp 01:21 News: Hermes 02:27 Intro Rachel (http://devtoolschallenger 3:43 MDN 07:14 100x Programmers 13:22 Measuring Impact 23:20 Third-Party Docs 32:31 Incremental API Design 35:38 Style Guides 39:35 Managing organic growth 43:32 Goodbye 47:37 Outro 48:10 Bloopers 51:19  

Panel Joe Eames Jesse Sanders Jared Stein Mike Dane Dani Sloan Brooke Avery Kent C. Dodds Episode Summary In this first episode of the Dev Ed podcast, the panelists start with giving brief introductions about themselves and their work, most of them being educators and trainers in software development. They then discuss some of the best ways for people to get into programming, focusing on the importance of motivation and passion, while narrating their own experiences. They talk about choosing the right learning resources and paths based on individual needs, effective tools and techniques for current programmers to stay up to date with ongoing developments and retaining learnt concepts. They also discuss benefits of publishing work online thus making it available for the public, significance of teaching and how to get into it, and mention tips and hacks on effective time management so as to continue learning in spite of a busy schedule. They wrap up the episode by each stating what they wish to learn the most, and one thing they would like to share with friends. Links ng-conf Mike Dane - YouTube Kent C. Dodds – YouTube Deciding What Not to Learn - Blog Picks Kent C. Dodds: GraphQL Novel in progress - Shurlan Brooke Avery: Rails Lost Stars Jesse Sanders: NestJS Having a good morning routine with mediation, reading and journaling Joe Eames: NestJS Screen Rant Pitch Meetings Mike Dane: CSS Animations The Coding Train Jared Stein: What makes efficient and productive learning happen Dani Sloan: Meditation Moodrise

Panel Joe Eames Jesse Sanders Jared Stein Mike Dane Dani Sloan Brooke Avery Kent C. Dodds Episode Summary In this first episode of the Dev Ed podcast, the panelists start with giving brief introductions about themselves and their work, most of them being educators and trainers in software development. They then discuss some of the best ways for people to get into programming, focusing on the importance of motivation and passion, while narrating their own experiences. They talk about choosing the right learning resources and paths based on individual needs, effective tools and techniques for current programmers to stay up to date with ongoing developments and retaining learnt concepts. They also discuss benefits of publishing work online thus making it available for the public, significance of teaching and how to get into it, and mention tips and hacks on effective time management so as to continue learning in spite of a busy schedule. They wrap up the episode by each stating what they wish to learn the most, and one thing they would like to share with friends. Links ng-conf Mike Dane - YouTube Kent C. Dodds – YouTube Deciding What Not to Learn - Blog Picks Kent C. Dodds: GraphQL Novel in progress - Shurlan Brooke Avery: Rails Lost Stars Jesse Sanders: NestJS Having a good morning routine with mediation, reading and journaling Joe Eames: NestJS Screen Rant Pitch Meetings Mike Dane: CSS Animations The Coding Train Jared Stein: What makes efficient and productive learning happen Dani Sloan: Meditation Moodrise

Dan just added another new year resolution to Abi's already full year.... learning CSS animation. Exciting, but I wouldn't let your mum lose on it.

A DevTales podcast második adásában beszélgettünk a GDPR-ról – mi ez pontosan, és miért is hasznos. Szó volt még a CSS animációk debugolásáról, és a Google Chrome közelgő HTTPS szabályozásairól. Továbbá azt is megbeszéltük, hogy mik az előnyei és hátrányai a CSS-in-JS technológiának. Résztvevők: Edu Arianna Pintér Róka Tibor Tokai Tartalom: 00:00:44 – GDPR 00:12:24 […]

Val Head is a web animation expert and author with a talent for getting designers and developers alike excited about the power of animation. She's the author of Designing Interface Animation and teaches CSS Animation on lynda.com.

Val Head is a web animation expert and author with a talent for getting designers and developers alike excited about the power of animation. She’s the author of Designing Interface Animation and teaches CSS Animation on lynda.com.

Val Head is a web animation expert and author with a talent for getting designers and developers alike excited about the power of animation. She’s the author of *Designing Interface Animation* and teaches CSS Animation on lynda.com.

Animation brings the web to life! Today we talk about (mostly CSS) animation — how it works, tools, and resources.

Check out RailsClips and RemoteConfs!   02:53 - Jack Doyle Introduction GreenSock @greensock GreenSock Blog   03:53 - GSAP (GreenSock’s Animation Platform) 04:05 - GreenSock: The Name 05:01 - GreenSock: The Inception 09:13 - Transitions & CSS Animations 10:32 - Who is GreenSock aimed at? / What kind of applications use it? 15:01 - Lukas and GreenSock     Lukas Reubbelke: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch 16:50 - Angular + GreenSock + CSS Animations (GreenSock Under The Hood) jQuery “tweens” ngAnimate 27:44 - Using GreenSock Outside of Angular 29:20 - Getting Started With Animations, Learning Curve Getting Started with GSAP (GreenSock Animation Platform) Sarah Drasner 39:13 - When To Use Animations (User Experience) Microactions Using Animations to Help Workflow ngFx 46:09 - Material Design Introduction: Material Design 49:11 - Licensing 51:24 - Mobile Apps Picks Take a vacation, and actually do the vacation! (John) GreenSock (Lukas) Microinteractions: Full Color Edition: Designing with Details by Dan Saffer (Lukas) Beautiful Outlaw: Experiencing the Playful, Disruptive, Extravagant Personality of Jesus by John Eldredge (Joe) GOG.com (Joe) Sleeping in a hammock (Ward) remoteconfs.com (Chuck) God (Chuck) Jesus Christ (Chuck) The Church of Jesus Christ of Latter-day Saints (Chuck) CodePen (Jack) Seth Godin's Blog (Jack)

Check out RailsClips and RemoteConfs!   02:53 - Jack Doyle Introduction GreenSock @greensock GreenSock Blog   03:53 - GSAP (GreenSock’s Animation Platform) 04:05 - GreenSock: The Name 05:01 - GreenSock: The Inception 09:13 - Transitions & CSS Animations 10:32 - Who is GreenSock aimed at? / What kind of applications use it? 15:01 - Lukas and GreenSock     Lukas Reubbelke: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch 16:50 - Angular + GreenSock + CSS Animations (GreenSock Under The Hood) jQuery “tweens” ngAnimate 27:44 - Using GreenSock Outside of Angular 29:20 - Getting Started With Animations, Learning Curve Getting Started with GSAP (GreenSock Animation Platform) Sarah Drasner 39:13 - When To Use Animations (User Experience) Microactions Using Animations to Help Workflow ngFx 46:09 - Material Design Introduction: Material Design 49:11 - Licensing 51:24 - Mobile Apps Picks Take a vacation, and actually do the vacation! (John) GreenSock (Lukas) Microinteractions: Full Color Edition: Designing with Details by Dan Saffer (Lukas) Beautiful Outlaw: Experiencing the Playful, Disruptive, Extravagant Personality of Jesus by John Eldredge (Joe) GOG.com (Joe) Sleeping in a hammock (Ward) remoteconfs.com (Chuck) God (Chuck) Jesus Christ (Chuck) The Church of Jesus Christ of Latter-day Saints (Chuck) CodePen (Jack) Seth Godin's Blog (Jack)

Check out RailsClips and RemoteConfs!   02:53 - Jack Doyle Introduction GreenSock @greensock GreenSock Blog   03:53 - GSAP (GreenSock’s Animation Platform) 04:05 - GreenSock: The Name 05:01 - GreenSock: The Inception 09:13 - Transitions & CSS Animations 10:32 - Who is GreenSock aimed at? / What kind of applications use it? 15:01 - Lukas and GreenSock     Lukas Reubbelke: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch 16:50 - Angular + GreenSock + CSS Animations (GreenSock Under The Hood) jQuery “tweens” ngAnimate 27:44 - Using GreenSock Outside of Angular 29:20 - Getting Started With Animations, Learning Curve Getting Started with GSAP (GreenSock Animation Platform) Sarah Drasner 39:13 - When To Use Animations (User Experience) Microactions Using Animations to Help Workflow ngFx 46:09 - Material Design Introduction: Material Design 49:11 - Licensing 51:24 - Mobile Apps Picks Take a vacation, and actually do the vacation! (John) GreenSock (Lukas) Microinteractions: Full Color Edition: Designing with Details by Dan Saffer (Lukas) Beautiful Outlaw: Experiencing the Playful, Disruptive, Extravagant Personality of Jesus by John Eldredge (Joe) GOG.com (Joe) Sleeping in a hammock (Ward) remoteconfs.com (Chuck) God (Chuck) Jesus Christ (Chuck) The Church of Jesus Christ of Latter-day Saints (Chuck) CodePen (Jack) Seth Godin's Blog (Jack)

Thank you RailsClips Kickstarter Backers!   02:05 - Matias Niemelä Introduction Twitter GitHub Blog [YouTube] Matias Niemelä: Whats new in ngAnimate 03:13 - Animations with Angular ngAnimate 04:24 - CSS Animations Angular Developer Guide: Animations Resources: Mozilla: Using CSS animations CSS Animation for Beginners CSS3 Animations   GreenSock Animate.css 13:06 - Testing angular-mocks.js ngAnimateMock [insert Matais’ link] 14:40 - Detecting When Animations End 16:06 - Animations in 1.4 vs 2.0 Classes ES6 New Feature List 20:35 - Side Libraries Animate.css Material Design Aspect GreenSock ngFx 22:44 - Routing Gaia Timeline Feature 26:11 - Default Animations 28:14 - Use Cases YouTube Browsing Website [YouTube] Lukas Rubbelke & Matias Niemela: Awesome Interfaces with AngularJS Animations 30:19 - Where’s Angular 1.4?!?!?! Breaking Changes Picks McFarland, USA (Joe) Matias! Matias at ng-vegas! (Joe) [YouTube] Matias Niemelä: Whats new in ngAnimate (Ward) Citizenfour (Ward) Teach Like a Champion 2.0: 62 Techniques that Put Students on the Path to College by Doug Lemov (Ward) ngFx (Lukas) Search Inside Yourself: The Unexpected Path to Achieving Success, Happiness (and World Peace) by Chade-Meng Tan (Lukas) Thank you RailsClips Kickstarter Backers! (Chuck) Ready Player One by Ernest Cline (Chuck) Mastery by Robert Greene (Chuck) Neovim (Matias) News ng-vegas: May 7th and 8th, 2015! AngularU in the Bay Area in June

Thank you RailsClips Kickstarter Backers!   02:05 - Matias Niemelä Introduction Twitter GitHub Blog [YouTube] Matias Niemelä: Whats new in ngAnimate 03:13 - Animations with Angular ngAnimate 04:24 - CSS Animations Angular Developer Guide: Animations Resources: Mozilla: Using CSS animations CSS Animation for Beginners CSS3 Animations   GreenSock Animate.css 13:06 - Testing angular-mocks.js ngAnimateMock [insert Matais’ link] 14:40 - Detecting When Animations End 16:06 - Animations in 1.4 vs 2.0 Classes ES6 New Feature List 20:35 - Side Libraries Animate.css Material Design Aspect GreenSock ngFx 22:44 - Routing Gaia Timeline Feature 26:11 - Default Animations 28:14 - Use Cases YouTube Browsing Website [YouTube] Lukas Rubbelke & Matias Niemela: Awesome Interfaces with AngularJS Animations 30:19 - Where’s Angular 1.4?!?!?! Breaking Changes Picks McFarland, USA (Joe) Matias! Matias at ng-vegas! (Joe) [YouTube] Matias Niemelä: Whats new in ngAnimate (Ward) Citizenfour (Ward) Teach Like a Champion 2.0: 62 Techniques that Put Students on the Path to College by Doug Lemov (Ward) ngFx (Lukas) Search Inside Yourself: The Unexpected Path to Achieving Success, Happiness (and World Peace) by Chade-Meng Tan (Lukas) Thank you RailsClips Kickstarter Backers! (Chuck) Ready Player One by Ernest Cline (Chuck) Mastery by Robert Greene (Chuck) Neovim (Matias) News ng-vegas: May 7th and 8th, 2015! AngularU in the Bay Area in June

Thank you RailsClips Kickstarter Backers!   02:05 - Matias Niemelä Introduction Twitter GitHub Blog [YouTube] Matias Niemelä: Whats new in ngAnimate 03:13 - Animations with Angular ngAnimate 04:24 - CSS Animations Angular Developer Guide: Animations Resources: Mozilla: Using CSS animations CSS Animation for Beginners CSS3 Animations   GreenSock Animate.css 13:06 - Testing angular-mocks.js ngAnimateMock [insert Matais’ link] 14:40 - Detecting When Animations End 16:06 - Animations in 1.4 vs 2.0 Classes ES6 New Feature List 20:35 - Side Libraries Animate.css Material Design Aspect GreenSock ngFx 22:44 - Routing Gaia Timeline Feature 26:11 - Default Animations 28:14 - Use Cases YouTube Browsing Website [YouTube] Lukas Rubbelke & Matias Niemela: Awesome Interfaces with AngularJS Animations 30:19 - Where’s Angular 1.4?!?!?! Breaking Changes Picks McFarland, USA (Joe) Matias! Matias at ng-vegas! (Joe) [YouTube] Matias Niemelä: Whats new in ngAnimate (Ward) Citizenfour (Ward) Teach Like a Champion 2.0: 62 Techniques that Put Students on the Path to College by Doug Lemov (Ward) ngFx (Lukas) Search Inside Yourself: The Unexpected Path to Achieving Success, Happiness (and World Peace) by Chade-Meng Tan (Lukas) Thank you RailsClips Kickstarter Backers! (Chuck) Ready Player One by Ernest Cline (Chuck) Mastery by Robert Greene (Chuck) Neovim (Matias) News ng-vegas: May 7th and 8th, 2015! AngularU in the Bay Area in June

Scott's at Blendconf and sits down with Val Head to talk about CSS Animations. Val is the author of "The CSS Animations Pocket Guide" and explains the essence of CSS Animations to Scott in this episode.

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, html5, front end development, and more.

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, html5, front end development, and more.

Designer/developer Val Head @vlh and host Jeffrey Zeldman discuss the writing of A Pocket Guide to CSS Animations; the Web Design Day conference; running freelance projects and working as a hired gun; JavaScript and CSS animation compared; tales of Pittsburgh, Philadelphia, Buffalo and Toronto; the profession and people of web design; working with editors; what it takes to run a workshop; and more.

Designer/developer Val Head @vlh and host Jeffrey Zeldman discuss the writing of A Pocket Guide to CSS Animations; the Web Design Day conference; running freelance projects and working as a hired gun; JavaScript and CSS animation compared; tales of Pittsburgh, Philadelphia, Buffalo and Toronto; the profession and people of web design; working with editors; what it takes to run a workshop; and more.

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, html5, front end development, and more.

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, html5, front end development, and more.

CSS has three powerful specifications that can be used to animate things on the page: CSS Transitions, Transforms, and Animations. Designer and author Val Head joins Jen Simmons to explain how they work.

Animations, like transitions, can alter page elements over time. Animations are more powerful and more complex in many ways. You need to declare an animation with a special syntax before you can use it, which allows you to specify values for multiple properties at different percentages of the animations completion (“keyframes”). Then when you do use it, there are lots of values you can set as to how you want it to behave. We’ll cover all that as we build … Read article “#97: Intro to CSS Animations”