Arc Title
Blade Reveal
Blended Hover
Blur Reading
Blur Reveal
Counter
Decode Hover
Decode Reveal
Dynamic Copyright
Fluid Gradient
Highlight
Highlight Hover
Letter Launcher
Link Preview
Looping Lines
Looping Lines v2
Looping Lines v3
Mask Hover
Proximity Hover
Read More
Scribble Reveal
Scroll Reading
Swap Hover
Text Shimmer
Twist Reveal
Typed
Underline Hover
Unfold Hover
3D Swap Hover
Anyside Button
Arrow Button
Arrow Button v2
Arrow Button v3
Arrow Button v4
Arrow Button v5
Arrow Button v6
Arrow Button v7
Arrow Button v8
Arrow Button v9new
Blurry Button
Bubbles Button
Crystal Button
Dot Button
Dot Button v2
Dot Button v3
FlipFlop Button
FlipFlop Button v2
FlipFlop Button v3
Glowing Button
Marquee Button
Marquee Button v2
Mask Button
Modal Button
Nudge Button
Pixels Button
Prism Button
Prism Button v2
Rainbow Button
Reel Button
Ripple Button
Ripple Button v2
Ripple Button v3
Ripple Button v4
Ripple Button v5
Ripple Button v6
Ripple Button v7
Shiny Button
Squeezy Radius Button
Strip Button
Stripes Button
Audio Player
Back to Top
Chartnew
Click and Copy
Decode Card
Distorsion Tabs
Expanders
Flipbox
Glitchy
Horizontal Marquee
Interactive Divider
Inverted Corner
Looping Tabs
Lottie
Motion Divider
Observer
Orbitnew
Pixels Shimmer Card
Progress Bar
Progress Bar v2
QR Code
Scrollbar
Sharer
Smooth Scroll
Spinner
Stacking Cards
Sticky Footer
Syncnew
Tabs
Tippy
Toast
Toolteam
Vertical Marquee
Workflownew
Flipbox
Front Card
How it works
Flipbox is a nestable widget made up of 2 containers: Front and Back.
You can place the content you want at both of them. Visible content must be placed inside “Front” container. Content visible when flipping must be placed at “Back” container.
Front and Back containers styles can be edited right inside Flipbox widget.
Content tab
Animation group
Type: type will determine the flipbox direction. There are 4 types: horizontal, horizontal-reverse, vertical, vertical-reverse. The demo is horizontal-reverse.
Trigger: the event that will trigger the flipbox animation. Hover or click.
Perspective: determines the flip intensity.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.