How it works
Before/After Image v2 is a nestable div component. Nested elements or components should be placed inside Before or After. While a slot is empty, a fallback image is shown.
Width, height, border radius and cursor live in the Before/After Image v2 style.
Slider: the slider line that wraps the handlebar and the particles.
Handlebar: the tiny box with the dots in the middle of the Slider.
Glow: the glow behind the particles. It is made up of an outer mask and an inner mask.
Particles Container: contains all the particles.
Slider
Mode: Drag or Hover.
Percentage: the % of Before to show by default. Default 25.
Width
Color
Handlebar
Width
Height
Color
Border radius
Box shadow
Dots color
Dots size
Glow
Outer width
Outer opacity
Outer color
Inner width
Inner color
Particles Container
Width
Mask color
Particles
Number
Color: the particles' color.
Animation duration
Animation CSS easing: you can set any custom CSS easing. Learn more about CSS easing functions here.
Before/After Image v2
DocsHow it works
Glossy Logo is not nestable. Pick a logo image in the Logo group and it will be rendered with a glossy WebGL effect. Create your own color combination with the Colors repeater. Width and height live in the Glossy Logo style.
Logo
Logo: the image that receives the glossy effect. A high-quality black-on-white or black-on-transparent image works best.
Colors
A repeater of palette colors. Add, remove and duplicate items as you need. The shader uses up to 8 colors. Each item:
Color
Background
Background: the color behind the logo.
Shader
Speed: how fast the light animation sweeps across the logo.
Contour: the visibility of the inner edge outlines around the shape.
Angle: rotates the direction of the animated light sweep, in degrees.
Noise: adds film-grain dithering to reduce color banding in gradients.
Glow in: the intensity of the luminous glow inside the shape.
Glow out: the intensity of the soft glow that bleeds outside the shape edges.
Scale: how large the logo is drawn inside the canvas. Default 0.75.
Glossy Logo
Docs
How it works
Image Hotspots is a nestable div component. There is no Hotspots repeater. Create markers by dropping Hotspot components into Hotspots. Nested elements or components inside a Hotspot should be placed inside that Hotspot's Content, and they are displayed as the marker. Nested elements or components for the tooltip should be placed inside Tooltip Content.
While Hotspots is empty, a hint is shown. Width, height and background live in the Image Hotspots style. Dot look and tooltip chrome live in the Hotspot style. Position, pulse, tooltip, arrow, Href and Open in new tab live on the Hotspot component.
Image
Image
Alt text
Object fit: cover, contain, fill, none or scale-down.
Object position
Image Hotspots
DocsHow it works
Portfolio is not nestable. It is made up of Projects. Add, remove and duplicate items as you need. Each item is a text, a year and an image.
Hovering a project swaps the shared background image and plays the zoom-out. These sections live in the Portfolio style:
Container: wraps the project list.
Items container and Project items: the list and each row. Padding, gap, borders and typography live here.
Background image: the shared image shown on hover. Object fit lives here.
Noise overlay: the grain overlay on top of the background.
Projects
A repeater of projects. Each item:
Text: the project title.
Year
Image: the background image shown when hovering this project.
Project Item
Title tag: the HTML tag used for the project title. Default span.
Hover fill color: the fill that grows behind the project on hover.
Background Image
Hover opacity: the opacity of the background image on hover. Default 1.
Initial scale: the scale of the background image when the hover starts. Default 1.2.
End scale: the scale of the background image at the end of the zoom. Default 1.
Noise Overlay
Enable noise
Noise opacity: shown when Enable noise is enabled. Default 0.9.
Noise speed: shown when Enable noise is enabled. Default 0.3s.
Animation
Hover fill in duration: how long the hover fill takes to grow. Default 0.2s.
Hover fill out duration: how long the hover fill takes to leave. Default 0.8s.
Zoom duration: how long the background image zoom takes. Default 0.8s.
Portfolio
Docs
How it works
Image Reveal v3 is not nestable. The image is revealed by columns that wipe away. Object fit lives in the Image Reveal v3 style. Width and height live in the Image Reveal v3 style.
Image
Image
Alt text
Columns
Color: the columns' color.
Width: the image width in the viewport will be divided into columns proportionally. Default 30.
Animation
Duration
Delay
Stagger: the delay between each column animation. Default 0.05.
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
Custom easing: used when GSAP easing is set to custom.
ScrollTrigger
Image Reveal v3 animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
Trigger: the element that will fire the animation on scroll. Use the keyword “this” to use the element itself as the trigger.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
End: the end position of the Trigger. Default unset.
Scrub: links the animation progress to the scrollbar. 0 disables scrub. Default 0.
Toggle actions: Determines how the linked animation is controlled at the 4 distinct toggle places – onEnter, onLeave, onEnterBack, onLeaveBack, in that order. “play pause resume reset” will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning.
Disable on scroll: if enabled, the animation will not fire on scroll. Useful when using Additional triggers.
Additional triggers
In case you need to fire the animation on additional events.
Trigger on: None, Click or Hover.
Click element: the element that will fire the animation on click. Shown when Trigger on is Click.
Hover element: the element that will fire the animation on hover. Shown when Trigger on is Hover.
Image Reveal v3
Docs
How it works
Looping Logos is not nestable. It is made up of Logos. Add, remove and duplicate items as you need. Each item is an image.
Logo height, gap and max-width live in the Looping Logos style.
Logos
A repeater of logos. Each item:
Image
Layout
Logos per loop: how many logos are shown in each loop. Default 3.
Animation
Interval (ms): how long each loop stays visible before the next one. Default 2500.
Stagger (s): the delay between each logo in a loop. Default 0.13.
Translate Y (px): how far each logo travels vertically when entering and exiting. Default 40.
Blur (px): the blur applied to logos while they enter and exit. Default 5.
Looping Logos
DocsHow it works
Lightbox is not nestable. It is made up of Lightbox Images. Add, remove and duplicate items as you need. Each item is an image, an alt and a content description.
Lightbox is built on top of lightGallery. You can learn more here.
These sections live in the Lightbox style:
List and List items: the thumbnail grid. Gap, wrap and item size live here. If you want a grid display or any other layout, change it in the Lightbox style.
Lightbox: the overlay container of all the elements that make up the lightbox. Overlay background lives here.
Toolbar, Icons and Counter: at the top of the lightbox.
Arrows: on the slider sides, in the middle of the lightbox.
Description: shown at the bottom of the lightbox when a Content description is set on the selected image.
Thumbnails: a preview of all the images at the bottom of the lightbox. Thumbnail height lives in the Lightbox style.
Progress: shown when the user clicks the play button to automatically reproduce the whole lightbox.
Lightbox Images
A repeater of gallery images. Each item:
Image
Alt
Content description: shown at the bottom of the lightbox when that image is selected.
Lightbox
Z-Index
Blur
Animations
Lightbox speed (ms)
Lightbox open duration (ms)
Backdrop duration (ms)
Slide animation: 31 types. Default Slide.
Slide CSS easing: you can set any custom CSS easing. Learn more about CSS easing functions here.
Initial image (0 to show selected): the slide index to open on. 0 shows the selected image.
Features
Enable loop
Enable zoom
Enable rotate
Rotate speed (ms): shown when Enable rotate is enabled.
Enable thumbnails
Gap between thumbnails: shown when Enable thumbnails is enabled.
Enable fullscreen
Enable autoplay
Force slideshow autoplay: shown when Enable autoplay is enabled.
Display progress bar: shown when Enable autoplay is enabled.
Slideshow interval (ms): shown when Enable autoplay is enabled.
Displays
Show or hide icons and overlay UI.
Controls: the arrows on the sides of the lightbox.
Counter
Download button
Close icon
Accessibility
Closable
Close on tap
Close on ESC
Enable mousewheel
Enable drag on desktop
Enable swipe on mobile
Lightbox
DocsHow it works
Scrolling Gallery is not nestable. It is made up of Gallery Images. Add, remove and duplicate items as you need. Each item is an image and an alt.
The component is made up of the Thumbnails Container and the Images Container. These sections live in the Scrolling Gallery style:
Thumbnails Container: the sticky thumbnail rail.
Images Container: the scrolled full-size images.
Clicking a thumbnail scrolls its image to the viewport centre. Each thumbnail receives an active state when its image enters the viewport. Active border lives in the Scrolling Gallery style.
Scrolling Gallery uses ScrollTrigger to detect when an image enters the viewport. Learn more about ScrollTrigger here.
Gallery Images
A repeater of gallery images. Each item:
Image
Alt
Thumbnail
Active scale: the scale applied to the thumbnail when its image is in view. Default 1.3.
Active duration: the duration of the active thumbnail transition. Default 0.3s.
Active CSS easing: you can set any custom CSS easing. Learn more about CSS easing functions here.
Animation
Scrolling Gallery will create a random positioning for all the thumbnails and images on every page load. You can customize these random values here.
Random margin thumbnails: the random horizontal offset range applied to each thumbnail. Default 15.
Random margin images: the random horizontal offset range applied to each image. Default 100.
Start: the ScrollTrigger start position that marks a thumbnail as active. Default top center.
End: the ScrollTrigger end position that marks a thumbnail as active. Default bottom center-=50px.
Scrolling Gallery
How it works
Parallax is not nestable. Pick an image in the Image group. Object fit lives in the Parallax style. Width and height live in the Parallax style.
Parallax is built on top of simpleParallax. You can learn more here.
Image
Image
Alt text
Parallax
Disable at touch devices: if enabled, the parallax will not run on touch devices.
Orientation: determines where the parallax animation will come from: down, right, up or left. Default down.
Scale: determines the scale to apply to the image. Default 1.2.
Overflow: if true, the image will overflow outside its dimensions. If false, the image will overflow at itself. Default true.
Delay
CSS easing: you can set any custom CSS easing. Learn more about CSS easing functions here.
Parallax
DocsHow it works
Video Sequence is a nestable div component. Nested elements or components should be placed inside Content, like you would do at an Etch div or container. Position them so they scroll while Video Sequence is pinned.
Scrolling height lives in the Video Sequence style. It determines how much distance has to be scrolled to play the video.
Video Sequence is built on top of ScrollyVideo. You can learn more here.
Video
Video file: the video that plays as the user scrolls.
Dimensions
Full: if enabled, the video covers its container. Default true.
Dimensions: the video size when Full is disabled. Shown when Full is disabled. Default 500px.
Animation
Transition speed: sets the maximum rate at which the video is being played back. Default 8.
Frame threshold: determines when to stop the video animation, in seconds. Default 0.1.
Video Sequence
How it works
Zoom Lens is not nestable. Pick an image in the Image group. A magnifying lens follows the pointer over the image. Lens border lives in the Zoom Lens style. Object fit lives in the Zoom Lens style.
Image
Image
Alt text
Lens
Dimensions: determines the width and height of the lens equally. Default 50px.
Zoom: determines how much zoom to see through the lens. Default 2.
Zoom X distance: determines the distance the zoom will move to at the horizontal axis, from the cursor's position. Default 0.
Zoom Y distance: determines the distance the zoom will move to at the vertical axis, from the cursor's position. Default 0.
Cursor attachment (ms): determines how much speed to apply to the lens regarding the user's cursor. Default 100.
Lens Scale Animation
The lens has a scale animation when the user enters the image and when leaving it.
In duration: determines the scale duration from 0 to 1 when entering the image. Default 200ms.
Out duration (ms): determines the scale duration from 1 to 0 when leaving the image. Default 200.
Zoom Lens
Docs
How it works
Image Reveal v4 is not nestable. The image is revealed by squares that wipe away. Object fit lives in the Image Reveal v4 style. Width and height live in the Image Reveal v4 style.
Image
Image
Alt text
Squares
Color: the squares' color.
Number: the image will be divided proportionally into the number of squares set here. Default 12.
Animation
Duration
Delay
Stagger: the delay between pixels. Default 0.005.
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
Custom easing: used when GSAP easing is set to custom.
ScrollTrigger
Image Reveal v4 animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
Trigger: the element that will fire the animation on scroll. Use the keyword “this” to use the element itself as the trigger.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
End: the end position of the Trigger. Default unset.
Scrub: links the animation progress to the scrollbar. 0 disables scrub. Default 0.
Toggle actions: Determines how the linked animation is controlled at the 4 distinct toggle places – onEnter, onLeave, onEnterBack, onLeaveBack, in that order. “play pause resume reset” will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning.
Disable on scroll: if enabled, the animation will not fire on scroll. Useful when using Additional triggers.
Additional triggers
In case you need to fire the animation on additional events.
Trigger on: None, Click or Hover.
Click element: the element that will fire the animation on click. Shown when Trigger on is Click.
Hover element: the element that will fire the animation on hover. Shown when Trigger on is Hover.
Image Reveal v4
Docs
How it works
Before/After Image v1 is a nestable div component. Nested elements or components should be placed inside Before or After. Although the component will do the appropriate calculations automatically, it is recommended that both sides share the same dimensions to achieve an appropriate before/after effect.
While a slot is empty, a fallback image is shown. Thumb look lives in the Before/After Image v1 style. Object fit, object position and filters live on the images you drop inside Before and After.
Content
Show distance: how much of the Before side to show initially. Default 150.
Arrows
Icon: Chevron, Caret, Angles, Square Caret or Arrows.
Color
Dimensions
Gap between arrows
Line
Color
Width
Animation
The thumb has a lite fade animation on hover.
Opacity: the initial thumb opacity, set to 1 on hover. Default 0.8.
Duration
Before/After Image v1
Docs
How it works
Image Reveal v2 is not nestable. It is made up of a mask and an image. They have separated animations that can be changed in Animation. Object fit lives in the Image Reveal v2 style. Width and height live in the Image Reveal v2 style.
Image
Image
Alt text
Mask color: the color of the mask overlay.
Animation
Direction: determines from where the image will reveal: left, right, top or bottom. Default bottom.
Mask duration
Mask delay
Mask GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
Custom mask easing: used when Mask GSAP easing is set to custom.
Image duration
Image delay
Image GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
Custom image easing: used when Image GSAP easing is set to custom.
ScrollTrigger
Image Reveal v2 animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
Trigger: the element that will fire the animation on scroll. Use the keyword “this” to use the element itself as the trigger.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
End: the end position of the Trigger. Default unset.
Scrub: links the animation progress to the scrollbar. 0 disables scrub. Default 0.
Toggle actions: Determines how the linked animation is controlled at the 4 distinct toggle places – onEnter, onLeave, onEnterBack, onLeaveBack, in that order. “play pause resume reset” will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning.
Disable on scroll: if enabled, the animation will not fire on scroll. Useful when using Additional triggers.
Additional triggers
In case you need to fire the animation on additional events.
Trigger on: None, Click or Hover.
Click element: the element that will fire the animation on click. Shown when Trigger on is Click.
Hover element: the element that will fire the animation on hover. Shown when Trigger on is Hover.
Image Reveal v2
Docs
How it works
Image Accordion is not nestable. It is made up of Items. Add, remove and duplicate items as you need. Each Item is an image and a text. There is no nested Content slot.
Width, height and caption look live in the Image Accordion style. The Expanding and Content Fade animations durations and CSS easings can be customized at Image Accordion.
Items
A repeater of accordion panels. Each item:
Text: the caption shown on hover.
Image
Href: the URL of the item. Leave it empty to keep the item as a div.
Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.
Item Settings
Expanded size: the amount of cells to fill by the image when being expanded. Default 3.
Scale: the amount of scale to apply to each image on hover. Default 1.1.
Grayscale: the grayscale the images will go from to 0 on hover. Default 100%.
Expanding Animation
Duration
CSS Easing: you can set any custom CSS easing. Learn more about CSS easing functions here.
Content Fade Animation
Duration
CSS Easing: you can set any custom CSS easing. Learn more about CSS easing functions here.
Image Accordion
DocsHow it works
Video Tabs is not nestable. It is made up of Tabs. Add, remove and duplicate items as you need. Each item is a text and a video.
The first Tab will display the first video, the second Tab is linked to the second video and so on. When a video ends, the next tab plays automatically.
These sections live in the Video Tabs style:
Nav: the tab list.
Nav items: each tab label and its progress bar.
Progress bar: fills as the active video plays.
Videos: the video container.
Tabs
A repeater of tabs. Each item:
Text: the tab label.
Video: the video played when this tab is active.
Layout
Direction: Horizontal or Vertical. Default Horizontal.
Nav Items Animation
Duration: the duration of the nav item hover and active transition. Default 0.3s.
CSS Easing: you can set any custom CSS easing. Learn more about CSS easing functions here.
Progress Animation
Duration: the duration of the progress fill as the video plays. Default 0.1s.
CSS Easing: you can set any custom CSS easing. Learn more about CSS easing functions here.
Progress Bar Animation
Duration: the duration of the progress bar hover and active transition. Default 0.3s.
CSS Easing: you can set any custom CSS easing. Learn more about CSS easing functions here.
Video Tabs
How it works
Image Reveal v1 is not nestable. Pick an image in the Image group. Object fit lives in the Image Reveal v1 style.
Image
Image
Alt text
Animation
Direction: determines from where the image will reveal: left, right, top or bottom. The demo uses left.
Scale: determines the initial scale from where the image will come from. The demo uses 1.3.
Duration
Delay
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
Custom easing: used when GSAP easing is set to custom.
ScrollTrigger
Image Reveal v1 animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
Trigger: the element that will fire the animation on scroll. Use the keyword “this” to use the element itself as the trigger.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
Toggle actions: Determines how the linked animation is controlled at the 4 distinct toggle places – onEnter, onLeave, onEnterBack, onLeaveBack, in that order. “play pause resume reset” will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning.
Disable on scroll: if enabled, the animation will not fire on scroll. Useful when using Additional triggers.
Additional triggers
In case you need to fire the animation on additional events.
Trigger on: None, Click or Hover.
Click element: the element that will fire the animation on click. Shown when Trigger on is Click.
Hover element: the element that will fire the animation on hover. Shown when Trigger on is Hover.
Image Reveal v1
Docs
next etch
Next Etch is launching on September 15.
Join the newsletter to get an exclusive 20% discount on the lifetime deal.