使用Greensock (GSAP)掌握React动画: 课程2 | Master React animations with Greensock (GSAP) : course 2

Master React animations with Greensock (GSAP) : course 2

使用 React.js 和 GSAP 创建一个惊人的缩小悬停效果菜单。

你将会学到的

  • 带有样式组件的样式化 React 组件
  • 如何使用 .map() 在 JavaScript 中遍历数组项
  • 如何在 JavaScript 中使用 filter() 数组方法
  • React中的条件渲染
  • React状态管理
  • 目标和动画元素与 Greensock React
  • 使用 Greensock 创建分割文本交错动画
  • 使用 greensock 创建和控制时间线
  • 避免无样式内容的闪现 (FOUC)
  • 交互动画(onMouseLeave、onMouseEnter、onMouseMove)
  • 创建自定义光标

要求

  • Html、css和Javascript知识
  • 安装在本地机器上的节点
  • 文本编辑器

说明

React.js是最流行的 Javascript 库和Greensock,最好的JavaScript动画库。在本课程中,我们将把它们组合在一起来构建一个令人惊叹的菜单动画。

我们将探索如何使用 React 和 GSAP创建一个惊人的 Rotated 3D Letter 菜单和这个非常酷的 Scale down 图像动画。

我们将涵盖诸如地图过滤器条件渲染状态管理、交互动画以及使用Greensock创建和控制时间线等主题。

本课程是一个循序渐进的课程,可确保您准确了解 React.js 和 GSAP 如何协同工作,并将为您提供作为前端开发人员的新工作,或帮助您建立您一直梦想的体验。本课程还关心设计,而不仅仅是编程。

你会建造什么?

本课程包含 15 个视频,可帮助您了解 React.js 和 Greensock (GSAP) 的工作原理。不需要任何先前的经验。我们将构建一个具有美感和微调动画的令人惊叹的菜单。本课程中的每个部分都是逐步添加的,以确保您拥有扎实的知识基础。

这是您将在本课程中学习的主题列表:

  • 样式化你的组件
  • 如何使用 .map() 在 JavaScript 中遍历数组项
  • 如何在 JavaScript 中使用 filter() 数组方法
  • React中的条件渲染
  • React状态管理
  • 目标和动画元素与 Greensock React
  • 使用 Greensock 创建分割文本交错动画
  • 使用 greensock 创建和控制时间线
  • 避免无样式内容的闪现 (FOUC)
  • 交互动画(onMouseLeave、onMouseEnter、onMouseMove)
  • 创建自定义光标

快乐编码!

此课程面向哪些人:

  • 本课程适用于想要使用 Greensock (GSAP) 掌握 React Javascript 动画的人
  • 本课程适用于关心设计和开发的人。
  • 本课程也适用于喜欢微调动画、动作设计并希望学习如何使用 React an Gsap (Greensock) 创建有意义的交互体验的人。
声明:本站所有资源、素材等全部来源于互联网,赞助VIP仅用于对IT资源服务器带宽等费用支出做支持,从本站下载资源,说明你已同意本条款。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
TheItzy » 使用Greensock (GSAP)掌握React动画: 课程2 | Master React animations with Greensock (GSAP) : course 2