{"id":11530,"date":"2022-12-21T14:30:08","date_gmt":"2022-12-21T21:30:08","guid":{"rendered":"https:\/\/www.blocksylaunch.click\/documentation\/?p=11530"},"modified":"2023-02-03T15:51:14","modified_gmt":"2023-02-03T22:51:14","slug":"scroll-effects","status":"publish","type":"post","link":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/","title":{"rendered":"Using Divi Scroll Effects"},"content":{"rendered":"<p>Divi Scroll Effects can create animations and transitions that trigger as visitors scroll up and down the page. No complicated CSS or JavaScript is needed, with Divi Scroll Effects it\u2019s easy to create the stunning transitions and animations your website needs.<\/p>\n<h2>Table of Contents<\/h2>\n<ul>\n<li><a href=\"#what-are-scroll-effects\">What Are Scroll Effects?<\/a><\/li>\n<li><a href=\"#where-to-find-divi-scroll-effects\">Where To Find Divi Scroll Effects<\/a><\/li>\n<li><a href=\"#all-scroll-effects-options-explained\">All Scroll Effects Options Explained<\/a>\n<ul>\n<li><a href=\"#sticky-position\">Sticky Position<\/a><\/li>\n<li><a href=\"#scroll-transform-effects\">Scroll Transform Effects<\/a><\/li>\n<li><a href=\"#vertical-motion\">Vertical Motion<\/a><\/li>\n<li><a href=\"#horizontal-motion\">Horizontal Motion<\/a><\/li>\n<li><a href=\"#fading-in-and-out\">Fading In and Out<\/a><\/li>\n<li><a href=\"#scaling-up-and-down\">Scaling Up and Down<\/a><\/li>\n<li><a href=\"#rotating\">Rotating<\/a><\/li>\n<li><a href=\"#blur\">Blur<\/a><\/li>\n<li><a href=\"#scroll-effect-controls\">Scroll Effect Controls<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#tips-and-best-practices-for-using-divi-scroll-effects\">Tips and Best Practices For Using Divi Scroll Effects<\/a>\n<ul>\n<li><a href=\"#using-scroll-effects-to-highlight-important-content\">Using Scroll Effects To Highlight Important Content<\/a><\/li>\n<li><a href=\"#using-multiple-scroll-effects-but-not-too-many\">Using Multiple Scroll Effects, But Not Too Many<\/a><\/li>\n<li><a href=\"#create-static-animations\">Create Static Animations<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#more-resources\">Continue Learning<\/a><\/li>\n<\/ul>\n<h2 id=\"what-are-scroll-effects\">What Are Scroll Effects?<\/h2>\n<p>Scroll Effects are customizable animations that react to your visitors as they scroll up and down the page. Unlike traditional animations, scroll effects are tied directly to your visitor\u2019s scrolling behavior. The speed and direction of the animation are based on how fast and in which direction the visitor is scrolling. The animation timeline is based on the element\u2019s position within the browser viewport.<\/p>\n<p>Any element can be animated using a combination of scale, rotation, horizontal and vertical motion, opacity, and blur effects. You control the magnitude of each effect at different points during the animation and then Divi takes care of the rest, creating beautiful transitions as those elements enter and move through your visitor\u2019s view. Create simple animations that add subtle depth and sophistication, or combine effects and animate multiple elements to create spectacular explosions of activity that will blow your visitors away!<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Fruit.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Fruit.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2 id=\"where-to-find-divi-scroll-effects\">Where To Find Divi Scroll Effects<\/h2>\n<p>Scroll Effects are available in all sections, rows, columns, and modules. Simply hover over the element you&#8217;re working on, click the gear icon to bring up the settings, and navigate to\u00a0<strong>Advanced &gt; Scroll Effects<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-11533 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects.png\" alt=\"Where to find Divi Scroll Effects\" width=\"1800\" height=\"1182\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects.png 1800w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects-300x197.png 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects-1024x672.png 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects-768x504.png 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects-1536x1009.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2 id=\"all-scroll-effects-options-explained\">All Scroll Effects Options Explained<\/h2>\n<p>To apply a scroll effect, navigate to the one you want and click the Enable toggle to &#8220;yes&#8221;, triggering the scroll effect controls where you can minutely adjust each scroll effect.<\/p>\n<h3 id=\"sticky-position\">Sticky Position<\/h3>\n<p>Here you can choose to have the element remain a fixed distance from the top or bottom edge of the browser window as the user scrolls. Click the dropdown menu and select from Do Not Stick, Stick to Top, Stick to Bottom, and Stick to Top and Bottom.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/scroll-effects.jpg\" alt=\"\" width=\"1800\" height=\"1067\" class=\"alignnone size-full wp-image-15732\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/scroll-effects.jpg 1800w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/scroll-effects-300x178.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/scroll-effects-1024x607.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/scroll-effects-768x455.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/scroll-effects-1536x911.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3 id=\"scroll-transform-effects\">Scroll Transform Effects<\/h3>\n<p>This is where you can choose from the 6 scroll effect animations. The animation\u2019s transition is based on the user\u2019s scrolling behavior. Once the element enters the browser viewport the animation will begin, and once it leaves the viewport the animation ends.<\/p>\n<h4 id=\"vertical-motion\">Vertical Motion<\/h4>\n<p>The vertical motion effect allows any element to move up and down the page based on the speed and direction that a visitor scrolls. The result is a parallax effect! Now anything can be used to create parallax effects with Divi. You can even combine vertical motion with parallax background images to build some really awesome designs.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/3-Scrolleffects.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/3-Scrolleffects-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"horizontal-motion\">Horizontal Motion<\/h4>\n<p>The horizontal motion effect is just like the vertical motion effect, except it allows elements to be moved left and right across the screen based on the direction and speed that a visitor scrolls. You can even combine vertical and horizontal motion, giving you complete control over the movement of any element!<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/4-Scrolleffects.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/4-Scrolleffects-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"fading-in-and-out\">Fading In and Out<\/h4>\n<p>The fade effect with fade elements in and out is based on the speed and direction that a visitor scrolls. You can fade elements in, fade them out, or both. Combining fade, blur and scale can create some really sophisticated animations that add an extra \u201cit\u201d factor to your designs.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/5-Scrolleffects.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/5-Scrolleffects-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"scaling-up-and-down\">Scaling Up and Down<\/h4>\n<p>The scale effect will increase or decrease the size of any element based on the speed and direction that a visitor scrolls. If you want to bring attention to a particular element, such as a call to action, you can set the scale effect to increase the size of the element as it gets closer to the center of the viewport. Of course, there are so many other possibilities too!<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/6-Scrolleffects.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/6-Scrolleffects-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"rotating\">Rotating<\/h4>\n<p>The rotate effect will rotate an element in either direction based on the speed and direction that a visitor scrolls. Subtle rotation can really bring scenes to life. Just a little bit of rotation when combined with horizontal motion can look great! Or, let elements spin round and round.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/7-Scrolleffects.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/7-Scrolleffects-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"blur\">Blur<\/h4>\n<p>The blur effect will bring elements in and out of focus based on the speed and direction that a visitor scrolls. Since Divi allows you to control the starting, middle and ending blur value, you can bring elements into focus right when they are in front of the visitor\u2019s eyes. It\u2019s a great way to bring attention to important pieces of information.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/8-Scrolleffects.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/8-Scrolleffects-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h3 id=\"scroll-effect-controls\">Scroll Effect Controls<\/h3>\n<p>These Scroll Effect Controls give you even more granular control over when effects are triggered and their duration.<\/p>\n<ul>\n<li><strong>Viewport Bottom<\/strong> &#8211; This controls when the animation starts. To delay the effect, increase the value of the Viewport Bottom<\/li>\n<li><strong>Viewport Middle<\/strong> &#8211; The Viewport Middle is controlled by the center circle. This setting allows you to increase or decrease the timeline of both the viewport&#8217;s top and bottom.<\/li>\n<li><strong>Viewport Top<\/strong> &#8211; This controls when the animation ends and then starts upon a reverse scroll. Simply drag the range slider or input a numerical value to increase or decrease the animation endpoint.<\/li>\n<li><strong>Enable Vertical Motion<\/strong> &#8211; Toggle this option to &#8220;yes&#8221; to enable vertical motion. This will make the element move faster or slower than the elements around it as the viewer scrolls through the page. You can adjust this with the following options.<\/li>\n<li><strong>Starting Offset<\/strong> &#8211; This setting determines the state of the element when it enters the bottom of the browser viewport.<\/li>\n<li><strong>Mid Offset<\/strong> &#8211; This defines how much the element will offset when it reaches the middle of the viewport.<\/li>\n<li><strong>Ending Offset<\/strong> &#8211; Here you can define whether the element should be visible or hidden when the element leaves the browser viewport.<\/li>\n<\/ul>\n<h2 id=\"tips-and-best-practices-for-using-divi-scroll-effects\">Tips and Best Practices For Using Divi Scroll Effects<\/h2>\n<p>When using Divi Scroll effects, keep these tips and best practices in mind.<\/p>\n<h3 id=\"using-scroll-effects-to-highlight-important-content\">Using Scroll Effects To Highlight Important Content<\/h3>\n<p>Scroll Effects can be used to highlight important content on your website in an eye-catching way. This can help guide website visitors through your content and help essential information stand out.<\/p>\n<h3 id=\"using-multiple-scroll-effects-but-not-too-many\">Using Multiple Scroll Effects, But Not Too Many<\/h3>\n<p>You can actually apply multiple scroll effects throughout the page to design a moving and engaging website design. However, combining too many scroll effects could get confusing and distracting.<\/p>\n<h3 id=\"create-static-animations\">Create Static Animations<\/h3>\n<p>You can also add pauses to your animations by increasing the duration of your static middle effect value. To create a static animation duration, click the two arrows when hovering over the middle keyframe. You can then extend the middle keyframe by dragging its edges in either direction. During this point of the animation, the element will remain static. Once the static duration ends, the animation will continue to transition toward its ending value.<\/p>\n<h2 id=\"more-resources\">Continue Learning<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/how-to-design-an-animated-clock-with-divis-scroll-effects\">How to Design an Animated Clock with Divi\u2019s Scroll Effects<\/a><\/li>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/how-to-blend-copy-on-scroll-with-divis-position-settings-scroll-effects\">How to Blend Copy on Scroll with Divi\u2019s Position Settings &amp; Scroll Effects<\/a><\/li>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/create-a-scrollable-portfolio-navigation-list-with-divis-scroll-effects\">Create a Scrollable Portfolio Navigation List with Divi\u2019s Scroll Effects<\/a><\/li>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/how-to-limit-scroll-effects-to-column-containers-with-divi\">How to Limit Scroll Effects to Column Containers with Divi<\/a><\/li>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/how-to-design-a-divi-timeline-layout-with-scroll-effects\">How to Design a Divi Timeline Layout with Scroll Effects<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Divi Scroll Effects can create animations and transitions that trigger as visitors scroll up and down the page.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,2],"tags":[],"class_list":["post-11530","post","type-post","status-publish","format-standard","hentry","category-divi-builder","category-divi"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Divi Scroll Effects - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"Divi Scroll Effects can create animations and transitions that trigger as visitors scroll up and down the page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-21T21:30:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T22:51:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects.png\" \/>\n<meta name=\"author\" content=\"Chaucee Stillman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chaucee Stillman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/\"},\"author\":{\"name\":\"Chaucee Stillman\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\"},\"headline\":\"Using Divi Scroll Effects\",\"datePublished\":\"2022-12-21T21:30:08+00:00\",\"dateModified\":\"2023-02-03T22:51:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/\"},\"wordCount\":1236,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/1-scrolleffects.png\",\"articleSection\":[\"Divi Builder Plugin Documentation\",\"Divi Theme Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/\",\"name\":\"Using Divi Scroll Effects - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/1-scrolleffects.png\",\"datePublished\":\"2022-12-21T21:30:08+00:00\",\"dateModified\":\"2023-02-03T22:51:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/1-scrolleffects.png\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/1-scrolleffects.png\",\"width\":1800,\"height\":1182},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/scroll-effects\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Divi Scroll Effects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\",\"name\":\"Chaucee Stillman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"caption\":\"Chaucee Stillman\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/","og_locale":"en_US","og_type":"article","og_title":"Using Divi Scroll Effects - Elegant Themes Documentation","og_description":"Divi Scroll Effects can create animations and transitions that trigger as visitors scroll up and down the page.","og_url":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2022-12-21T21:30:08+00:00","article_modified_time":"2023-02-03T22:51:14+00:00","og_image":[{"url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects.png","type":"","width":"","height":""}],"author":"Chaucee Stillman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chaucee Stillman","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/#article","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/"},"author":{"name":"Chaucee Stillman","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8"},"headline":"Using Divi Scroll Effects","datePublished":"2022-12-21T21:30:08+00:00","dateModified":"2023-02-03T22:51:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/"},"wordCount":1236,"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects.png","articleSection":["Divi Builder Plugin Documentation","Divi Theme Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/","url":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/","name":"Using Divi Scroll Effects - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/#primaryimage"},"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects.png","datePublished":"2022-12-21T21:30:08+00:00","dateModified":"2023-02-03T22:51:14+00:00","author":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8"},"breadcrumb":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/#primaryimage","url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects.png","contentUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/08\/1-scrolleffects.png","width":1800,"height":1182},{"@type":"BreadcrumbList","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/scroll-effects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.blocksylaunch.click\/documentation\/"},{"@type":"ListItem","position":2,"name":"Using Divi Scroll Effects"}]},{"@type":"WebSite","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website","url":"https:\/\/www.blocksylaunch.click\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.blocksylaunch.click\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8","name":"Chaucee Stillman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","caption":"Chaucee Stillman"}}]}},"_links":{"self":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/11530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/comments?post=11530"}],"version-history":[{"count":40,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/11530\/revisions"}],"predecessor-version":[{"id":15059,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/11530\/revisions\/15059"}],"wp:attachment":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/media?parent=11530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/categories?post=11530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/tags?post=11530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}