Image Flip and Rotation on Scroll

Effect: Images rotate or flip as the user scrolls.

How to implement:

Use Scroll Navigation widget to structure sections.
Add JetElements Image Comparison widget to create before/after effects.
Apply Rotate or Flip animation from Elementor’s Motion Effects.
Adjust the rotation angle and animation delay for a dynamic effect.

💡 Best for before/after comparisons, transformations, or storytelling visuals.

Steps:

Add an Image Widget in Elementor:
- Insert an Image widget into a section.
Enable Rotation Animation:
- Click the Image widget, then go to Advanced > Motion Effects.
- Select Rotate or Flip animation.
Sync with Scroll Navigation:
- Add Scroll Navigation widget and link each section.
- Apply delayed animation for a smooth transition.

💡 Perfect for dynamic portfolios, galleries, or creative design elements.

				
					.flip-image {
  transform: rotateY(90deg);
  transition: transform 0.8s ease-out;
}

.flip-image.visible {
  transform: rotateY(0);
}

				
					document.addEventListener("DOMContentLoaded", function() {
    let flipImages = document.querySelectorAll(".flip-image");

    function flipOnScroll() {
        flipImages.forEach(image => {
            let imgTop = image.getBoundingClientRect().top;
            if (imgTop < window.innerHeight * 0.8) {
                image.classList.add("visible");
            }
        });
    }

    window.addEventListener("scroll", flipOnScroll);
    flipOnScroll();
});

How to Implement:

Add an Image in Elementor → Advanced > CSS Class → Add flip-image.
Insert the CSS code in Elementor > Custom CSS.
Insert the JavaScript code in Elementor > Custom Code.

💡 Works well for creative designs or before/after effects.

Image Flip and Rotation on Scroll

How to implement:

Steps:

How to Implement:

There are no bots on this site.

WP Woman is powered by H.I.* only!