# Custom easing
> Custom easing demo: set the slide transition curve with the lightGallery easing setting, from linear to back-and-forth cubic-bezier curves.
Pass any CSS timing function through the `easing` setting. Below are some possible values; the curves come from Matthew Lein's Ceaser.
Canonical page: https://www.lightgalleryjs.com/demos/custom-easing/
#### Demo
Change easing : cubic-bezier(0.680, -0.550, 0.265, 1.550)
**JavaScript**
**HTML**
```html
```
**JavaScript**
```js
lightGallery(document.getElementById('gallery-custom-easing-demo'), {
easing: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
// increasing speed to see the easing correctly
// Just for the demo purpose
speed: 1000,
});
```
**React**
```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
const items = [
{ src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
{ src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];
// `easing` is any CSS timing function. The speed is slower than the
// default 400, so the curve is easy to see.
{items.map((item) => (
))}
;
```
**Vue**
```vue
```
**Angular**
```ts
import { Component } from '@angular/core';
import {
LgGalleryComponent,
LgGalleryItemDirective,
type LgGalleryItem,
} from '@lightgallery/angular';
@Component({
selector: 'app-gallery',
imports: [LgGalleryComponent, LgGalleryItemDirective],
template: `
@for (item of items; track item.src) {
}
`,
})
export class Gallery {
items: LgGalleryItem[] = [
{ src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
{ src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];
}
```
