{"id":106788,"date":"2023-05-09T17:27:15","date_gmt":"2023-05-09T11:57:15","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=106788"},"modified":"2023-07-18T10:20:27","modified_gmt":"2023-07-18T04:50:27","slug":"scroll-sequence-elementor-widget-settings-overview","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/scroll-sequence-elementor-widget-settings-overview\/","title":{"rendered":"Scroll Sequence Elementor Widget Settings Overview"},"content":{"rendered":"\n<p>Scroll Sequence animation is a popular technique that is increasingly being adopted by designers to enhance the user experience on websites. This technique allows designers to create a story-like experience for visitors as they move down the page, with each section revealing new information or features. The goal of Scroll Sequence animation is to engage the user and make the website more visually interesting and memorable.<\/p>\n\n\n\n<p>With the Scroll Sequence widget from The Plus Addons for Elementor, you easily create amazing image scrolling animations on your Elementor website.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/scroll-sequence-demo?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n<li>This is a Premium widget, and you need the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n\n\n\n<li>Make sure the Scroll Sequence widget is activated, to verify this, visit Plus Settings \u2192 and Search for Scroll Sequence and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Scroll Sequence Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle <\/strong>then<strong> <\/strong>click<strong> Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"910\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-activate.png\" alt=\"scroll sequence activate\" class=\"wp-image-106797\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-activate.png 1920w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-activate-300x142.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-activate-1024x485.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-activate-768x364.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-activate-1536x728.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-activate-600x284.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Multiple places to add scroll sequence<\/strong> &#8211; You can apply scroll sequence to multiple places, Default (Container \/ Section), Body and Inner Column.&nbsp;<\/li>\n\n\n\n<li><strong>Multiple image sources <\/strong>&#8211; You can create image sequence animation from an image gallery or an external URL.<\/li>\n\n\n\n<li><strong>Sticky section<\/strong> &#8211; You can add sticky sections to add different types of content.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Create Image Sequence Animations in Elementor?<\/h2>\n\n\n\n<p>To create an image sequence animation in Elementor, add a section or container (for flexbox).<\/p>\n\n\n\n<p>Then add the Scroll Sequence widget there, in the <strong>Apply To<\/strong> section under the <strong>Scroll Sequence<\/strong> tab, you have to choose where you want to add the scroll sequence animation. Here you\u2019ll find three options &#8211;<\/p>\n\n\n\n<p><strong>Default<\/strong> &#8211; In this option, it will apply to a section or container (in flexbox).<\/p>\n\n\n\n<p><strong>Body<\/strong> &#8211; In this option, it will apply to the page body. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-image-sequence-on-page-body-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<p><strong>Inner Column<\/strong> &#8211; If you are using Elementor sections, then with this option, you can add scroll sequence animation in the column of a section or inner section. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-image-sequence-in-inner-column-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"301\" height=\"468\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-content.png\" alt=\"scroll sequence content\" class=\"wp-image-106798\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-content.png 301w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-content-193x300.png 193w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p>We\u2019ll keep it to <strong>Default<\/strong> here.<\/p>\n\n\n\n<p>Then, in the <strong>Upload Type,<\/strong> you can choose the image source for the sequence animation. Here you\u2019ll find two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Gallery<\/strong> &#8211; In this option, you can add images from your WordPress media library.<\/p>\n\n\n\n<p><strong>Remote Server<\/strong> &#8211; With this option, you can add images from an external URL to create an image scroll sequence. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-image-sequence-scroll-animation-from-a-url\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<p>Here we will keep it to <strong>Gallery<\/strong>, and then from the Image Upload section, you can add images from the media library.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"466\" height=\"463\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-gallery.png\" alt=\"scroll sequence gallery\" class=\"wp-image-106799\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-gallery.png 466w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-gallery-300x298.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-gallery-150x150.png 150w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-gallery-100x100.png 100w\" sizes=\"(max-width: 466px) 100vw, 466px\" \/><\/figure>\n\n\n\n<p>Supported image type &#8211; JPG, PNG and WebP.<\/p>\n\n\n\n<p>Then under the <strong>Extra Option<\/strong> tab, you\u2019ll find <strong>Preload Image (%)<\/strong>, here you can choose the number of images to load at first from your image sequence, then the rest of the images will load.<\/p>\n\n\n\n<p>You can decide the number based on your image sequence so that it doesn\u2019t increase the load time.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"293\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-preload-image.png\" alt=\"scroll sequence preload image\" class=\"wp-image-106800\"\/><\/figure>\n\n\n\n<p>Then from the <strong>Sticky Sections,<\/strong> you can add content over the scrolling sequence to animate with it on the scroll. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-sticky-sections-in-image-scroll-sequence\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<p>If you don\u2019t have long enough content on the Section or Container (in flexbox) then you have to set a minimum height for the Section or Container (for flexbox) containing the Scroll Sequence widget for the scroll animation to work.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">For Elementor Section<\/h3>\n\n\n\n<p>Select the Section in the <strong>Layout<\/strong> tab, set <strong>Height<\/strong> to <strong>Min-Height<\/strong>, and from the <strong>Minimum Height<\/strong> section, set a minimum height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"666\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/section-min-height.png\" alt=\"section min height\" class=\"wp-image-106801\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/section-min-height.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/section-min-height-135x300.png 135w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: The height will decide the speed of your scroll sequence animation, higher the number slower and smoother the animation.&nbsp; <\/em>&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">For Flexbox Container<\/h3>\n\n\n\n<p>From <strong>Min Height<\/strong> under the <strong>Layout<\/strong> tab, you can set the minimum height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"750\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/container-min-height.png\" alt=\"container min height\" class=\"wp-image-106802\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/container-min-height.png 302w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/container-min-height-121x300.png 121w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/figure>\n\n\n\n<p>Now you should have a beautiful image scrolling sequence animation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"889\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-demo.gif\" alt=\"scroll sequence demo\" class=\"wp-image-106803\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Style the Scroll Sequence Widget?<\/h2>\n\n\n\n<p>You can do some position styling of the Scroll Sequence widget from the Style tab.<\/p>\n\n\n\n<p><strong>Position<\/strong> &#8211; From here you can move the Scroll Sequence from top and left.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"505\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-style.png\" alt=\"scroll sequence style\" class=\"wp-image-106804\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-style.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/scroll-sequence-style-178x300.png 178w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p><strong>Z-index<\/strong> &#8211; From here, you can set a z-index value for the Scroll Sequence.<\/p>\n\n\n\n<p><strong>Width<\/strong> &#8211; From here, you can set a width for the Scroll Sequence, by default, it is 100%.<\/p>\n\n\n\n<p><strong>Height<\/strong> &#8211; From here, you can set a height for the Scroll Sequence.<\/p>\n\n\n\n<p><strong>Start Offset (px)<\/strong> &#8211; The value set here will delay the start of the sequence by equivalent pixels. For example, if the Start Offset (px) is set to 500, then the animation will start once the user scrolls down by 500px.<\/p>\n\n\n\n<p><strong>End Offset (px)<\/strong> &#8211; The value set here will end the sequence before equivalent pixels. For example, if the End Offset (px) is set to 500, then the animation will end 500px before the section ends.<\/p>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/theplusblocks.com\/docs\/advanced-tab-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Advanced tab tutorial.<\/a><\/p>\n","protected":false},"author":16,"featured_media":106805,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,561],"class_list":["post-106788","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-scroll-sequence"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=106788"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106788\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/106805"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=106788"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=106788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}