Divi’s Scroll Effects allow us to create exceptional transition animations that can wow visitors with an eye-catching design. Images, in particular, can showcase the power of these scroll effects in surprising ways. In this tutorial, we are going to explain step-by-step how to create a breakaway image transition with Divi’s scroll effects. This effect was originally featured on the demo page. The effect involves slicing images beforehand using a photo editor like Photoshop (its pretty easy to do). After the images are sliced, all we need to do is add them to Divi and use the built-in scroll effects to make the magic happen.
Let’s get started.
Here is a peek at the design for today.
You can also see the original live demo of the design on the demo page under the title “Exercise Doesn’t Have to Be Boring”.
Download the Breakaway Image Transition Divi Layout for FREE
To lay your hands on the layout from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
To import the layout to your page, simply extract the zip file and drag the JSON file into the Divi Builder.
Let’s get to the tutorial, shall we?
What You Need to Get Started
To get started, you will need to do the following:
- If you haven’t yet, install and activate the Divi Theme.
- Create a new page in
This article was written by Jason Champagne and originally published on Elegant Themes Blog.