{"id":11463,"date":"2022-12-29T17:21:58","date_gmt":"2022-12-30T00:21:58","guid":{"rendered":"https:\/\/blocksylaunch.click\/documentation\/?p=11463"},"modified":"2023-02-03T15:50:57","modified_gmt":"2023-02-03T22:50:57","slug":"divi-transition-options","status":"publish","type":"post","link":"https:\/\/blocksylaunch.click\/documentation\/divi\/divi-transition-options\/","title":{"rendered":"Using Divi Transition Options"},"content":{"rendered":"

The Divi Transition Options allow you to control the transition duration, delay, and speed curve of any hover animations you have applied to an element. This gives you even more<\/em>\u00a0control over how your hover animations animate on your page.\u00a0 In this doc, we’ll go over how to access transition options, how to use them, and more resources on the topic.<\/p>\n

How to Access Transition Options<\/h2>\n

Transition options are available within all Divi’s sections, rows, and modules. To access them, hover over the element you’re working on, click the gear icon to bring up the settings, and navigate to\u00a0Advanced > Transitions<\/strong>.<\/p>\n

\"Accessing<\/p>\n

All Divi Transition Options Explained<\/h2>\n

There are three main components to adjusting transitions: the transition duration, delay, and speed curve. These all work together to adjust the look and feel of your transitions, however, the transition duration must always be higher than 0 for the other transition settings to come into effect as well.<\/p>\n

Transition Duration<\/h3>\n

This controls the transition duration of the hover animation in milliseconds. Drag the range slider to increase or decrease the duration of the hover animation.<\/p>\n

For example, in this design below we have a Transform effect that enlarges the image on hover. Here we’ll adjust the transition duration to demonstrate how a higher number increases the duration of the animation and a lower number makes it faster.<\/p>\n

Transition Delay<\/h3>\n

This controls the transition delay of the hover animation in milliseconds. Increase the delay of the animation by dragging the range slider to the right.<\/p>\n

For example, in this design below we have a Transform effect that enlarges the image on hover. Here we\u2019ll adjust the transition delay to demonstrate the delay in starting the animation on hover. Notice that the higher the number, the longer the delay, and the lower the number, the less delay.<\/p>\n

Transition Speed Curve<\/h3>\n

This controls the transition speed curve of the hover animation. Ease-In-Out is a smoother and subtler transition whereas Linear is a snappier transition. Let’s look at an example of each.<\/p>\n

\"\"<\/p>\n

Ease-In-Out<\/h4>\n

A transition effect with a slow start and a slow end.<\/p>\n

Ease<\/h4>\n

A transition effect with a slow start, then gets faster and ends slow.<\/p>\n

Ease-In<\/h4>\n

A transition effect that starts slow.<\/p>\n

Ease-Out<\/h4>\n

A transition effect that ends slowly.<\/p>\n

Linear<\/h4>\n

A transition effect that is the same speed from start to end.<\/p>\n

More Resources on the Divi Transition Options<\/h2>\n