JavaScript

MotoGP

Technology

Work

React

Web Development

Animations

Nature

ES6 also known as ECMAScript introduced a wide range of powerful features to JavaScript. Here's a comprehensive list with explainations and examples:

Set default values for function parameters.

Shorthand for Object properties and methods.

Unique and immutable data type for object keys.

 is an object that defines a sequence and potentially a return value upon completion.

 that makes creating iterators much simpler.

You define a generator using the function* syntax, and you use yield to return values.

Copy properties from source to target object.

 — similar to ===, but with a few important differences.

1. NaN === NaN, === will result in false but Object.is() will result to true.

2. +0 === -0, === will result in true but the Object.is() will result to false.

Array.find() gives first element which is which satisfies the condition.

Array.findIndex() gives the index of that element.

18. String.includes(), startsWith() and endsWith() :

Syntactic sugar for prototypal inheritance.

ES6 (ECMAScript 2015) introduced a wide range of powerful features to JavaScript. This article lists all of those new features.

ES6 new features

You can animation basically everything with the "motion" component which is a DOM element with animation capabilities. 

For basic animation, use "animate" prop of motion.

By default Motion will add smooth transition based on what type of value is animated, 

for example - x or scale will have spring type effect, whereas color or opacity will have easing curves.

However, we could define our own animations using 

 props to  motion component in order to animate components, In order to completely disable the initial animation set initial to false.

This will make he element render values given in animate prop.

When a component is completely removed from the DOM, it is difficult to animate.
In order to tackle this, Motion provides 

component which when wrapped to a component will keep the component in the DOM until animation is finished. You also need to give "

prop can be set as a value of keyframes. This will animate through each value in sequence.

We can use a value's current state as the initial keyframe by setting it to null.

is useful for single element animation, Another way is using "variants".

They're passed to motion components via the variants prop:

These variants can now be referred to by a label, wherever you can define an animation target:

You can also define multiple variants via an array:

Variants will flow down through motion components. So in this example when the ul enters the viewport, all of its children with a "visible" variant will also animate in:

Each variant can be defined as a function that resolves when a variant is made active.

These functions are provided a single argument, which is passed via the custom prop:

 instead of React state to update style will also avoid re-renders.

Overview of Motion Animations

Introduction to Motion animations

Motion extends basic sets of event listeners with a powerful set of UI gestures.
Currently it has support for - hover, tap, pan, drag and inView. Each gesture has both a set of event listeners and a while- animation prop.

Motion provides multiple gesture animation props - whileHover, whileTap, whileFocus, whileDrag and whileInView. Using these the animation target can define animations while the gesture is active.

In all of these, we can either set animation values or the name of any variants defined via the variant prop. 

Hover gesture detects when a pointer hovers over or leaves a component. 

These contains gesture animation prop such as whileHover and event handler like onHoverStart and onHoverEnd.

Tap gestures gets detected when pointer is clicked and released on the same point.

event when the pointer taps or ends click on the same component it started on, and fires 

event if it does not ends on the same component.

Some animation props are - onTapStart, whileTap, onTap, tapCancel.

The Pan gestures detects when a pointer is pressed down on a component and moves further than 3 pixels. It ends with release in pointer.

Pan gestures does not have while- animation prop.

Drag gesture applies when a pointer drags a component over the x/y axis.

prop to false in order to prevent element from performing an inertia animation, which happens by default.

You can set constrains by either of two options:

Use dragConstraints prop and set value as an object with keys left, right, top, bottom.

Set a "ref" to a container and pass the same ref to the dragConstraint as a value.

with the container as a ref will allow draggable element to pass the container but eventually gets back to the parent container with some elasticity. In order to control elasticity tweak value of the prop 

In order to lock the direction of the drag, we can use 

. This will lock the element to the first axis its dragged on.

Focus gestures detects when a component gains or loses focus.

A child component can stop drag and tap gestures and their related while animations from firing on parents by passing 

This article gives basic understanding of motion's gesture animations

Gesture animations in Motion dev

Scroll Animation are those types of animations that are triggered or controlled by the user's scroll behavior.

 : An animation gets triggers when an element enters or leaves the viewport.

 : Values are linked directly to scroll progress.

Scroll-triggered animations are normal animations that are fired when an element enters the viewport. For this, Motion offers 

The animation gets triggered whenever the element enters or leaves the viewport. 
We can use 

prop, and set { once: true } to run the animation just once.

By default, The element is said to be within the viewport if it enters/leaves the browser window. Here, the browser window is the scroll container. 

In order to change the scroll container, you can provide a 

to another scrollable container. For example -

You can also set states when any element (not just a motion component) enters or leaves the viewport using 

Scroll-linked animations are created using 

useScroll Hook returns four motion values, 

Two of them store scroll offset in pixels (scrollX and scrollY).

The Other two store scroll progress as a value between 0 and 1 (scrollXProgress and scrollYProgress).

These motion values could be passed to specific styles to animate an element.

For example, we can pass scrollYProgress to scaleX to form a progressbar.

You can also use progress motion values like scrollYProgress to smoothen its value using 

 hook and use it to mix between any values like colors using 

This article will give you a brief description about scroll animations in Motion dev.

What are Scroll animations in Motion?

Suppose you want to clone one of the example template from the official repository of Next JS Github. How would you do that?


Runs a tool temporarily without installing it.

This is the tool to create a new Next.js app. @latest just means "use the latest version."

You're saying, "I want to use a ready-made template (example)."

Replace this with the name of the example (like with-tailwindcss, with-redux, etc.).

This is what your app folder will be called. You can name it anything.




 - If you want to install "gsap" example template of next JS, then you would write:


This document teaches you to clone the example template from next JS official Github repository.

How to clone example template from Next JS repository?

A debounce function can be used when you want to execute a function after a certain delay once the user stops trigerring it.
Let's learn how to use debouncing in React.

We can implement debouncing with a combination of useEffect and setTimeout in React (For Functional components).

We start by creating a state variable "debouncedValue" in the above example.
We then create a "useeffect" hook, which will run when the component is initialised and when value or delay is updated.

Inside the "useeffect" hook, we declare a handler function which holds the "setTimeout" function, The setTimeout function will executes the code inside when the delay value is reached. 

Suppose a user inputs a value and waits for the delay, The debounce useEffect will run saving the value in debouncedValue.

If the user inputs a value and types before the delay is reached, the cleanup function of useeffect will run clearing out all timeout functions and new setTimeout will be run saving the new value intil the delay time has reached.

Debouncing is a great way to handle re-rendering in react. 

Blogs

ES6 new features

Introduction to Motion animations

Gesture animations in Motion dev

What are Scroll animations in Motion?

How to clone example template from Next JS repository?

How to use Debouncing in React?

Copyright © 2025 Web Journal. All Rights Reserved