This is one of our favourite tricks! If a tween has multiple targets, you can easily add some delightful stagger between the start of each animation: ease : "power1.in" // start slow and end faster, like a heavy object fallingĮase : "power1.out" // start fast and end slower, like a rolling ball slowly coming to a stopĮase : "power1.inOut" // start slow and end slow, like a car accelerating and deceleratingĮase out animations like "power1.out" are the best for UI transitions they're fast to start which helps the UI feel responsive, and then they ease out towards the end giving a natural feeling of friction. See the Pen Preview: GreenSock Ease Visualizer by GreenSock on CodePen. These control the momentum over the course of the ease. There are three types of ease: in, out and inOut. But don't worry, we do all the math for you! You just sit back and select the ease that best fits your animation.įor most eases you'll be able to specify a type. Under the hood, the "ease" is a mathematical calculation that controls the rate of change during a tween.
#Basic animation in adobe animate code#
Change the code to yoyo:false in the demo below to see the difference. repeat is often paired with yoyo in order to reverse the direction each cycle.
Repeat does exactly what you might think - it allows you to play an animation more than once. Let's look at some of these in more detail. Default: "power1.out"Ī function that runs when the animation completes
Time (in seconds) between the start of each target's animation (if multiple targets are provided)Ĭontrols the rate of change during the animation, like the motion's "personality" or feel. If true, every other repeat the tween will run in the opposite direction. How many times the animation should repeat. You can check them all out in our documentation, but here are some of most common ones.ĭuration of animation (seconds) Default: 0.5Īmount of delay before the animation should begin (seconds) To adjust how a tween behaves we can pass in some special properties. In fact, we've looked at one already - duration. This demo below is a live code playground, go ahead and tweak the values to make the box move! The best way to learn is by experimenting. The center of translation, this will rotate around the bottom left. Move vertically (percentage of element's height) Move horizontally (percentage of element's width) Here's a handy chart with some of the most commonly used transform values. Under the hood GSAP uses document.querySelectorAll(), so for HTML or SVG targets we can use selector text like ".class" and "#id". Or you can pass in a variable or even an Array. Next up we have to tell GSAP what we want to animate. This tween is saying "hey GSAP, animate the element with a class of '.box' to an x of 200px (like transform: translateX(200px))". Let's start by animating an HTML element with a class of "box".Ī single animation like this is called a 'tween'. See an overview of the available plugins. You don’t need to learn them in order to get started, but they can help with specific animation challenges like scroll based animation, draggable interactions, morphing, etc. In addition to the core, there are a variety of plugins. This is what we'll be stepping through in this article. The core library contains everything you need to create blazing fast, cross-browser friendly animations. The GreenSock Animation Platform (GSAP) is an industry-celebrated suite of tools used on over 11 million sites, including more than 50% of award‑winning ones! You can use GSAP to animate pretty much anything JavaScript can touch, in any framework. Whether you want to animate UI, SVG, Three.js or React components - GSAP has you covered. Still with us? Wonderful, let's get started! If you just want to jump in, here are some handy links.
0 kommentar(er)
