{"id":106826,"date":"2023-05-09T17:49:07","date_gmt":"2023-05-09T12:19:07","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=106826"},"modified":"2023-05-09T17:49:07","modified_gmt":"2023-05-09T12:19:07","slug":"create-image-sequence-scroll-animation-from-a-url","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-image-sequence-scroll-animation-from-a-url\/","title":{"rendered":"How to Create Image Sequence Scroll Animation From a URL?"},"content":{"rendered":"\n

Do you want to create an Image Sequence Scroll animation form a remote URL? This image scroll animation technique allows you to create a stunning visual effect that captures your viewer’s attention and keeps them engaged on your website. <\/p>\n\n\n\n

But for creating beautiful image sequence animation you need many images at times hundreds of images. Having so many images in your WordPress media library will take up a lot of storage and can make managing other media files difficult.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Scroll Sequence widget, click here<\/a>.<\/em><\/p>\n\n\n\n

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

When you use the  Scroll Sequence widget from The Plus Addons for Elementor you can easily add a scroll sequence image from a remote server via the image URL.<\/p>\n\n\n\n

So you can easily store and manage your sequence images in different cloud storages like S3, Dropbox etc. and use an URL to create scroll sequence from them.<\/p>\n\n\n\n

To do this, add a section or container (for flexbox), then add the Scroll Sequence widget there.<\/p>\n\n\n\n

Select the appropriate option from the Apply To<\/strong> dropdown where you want to add the sequence animation.<\/p>\n\n\n\n

Then from the Upload Type<\/strong> dropdown select Remote Server<\/strong>.<\/p>\n\n\n\n

\"scroll<\/figure>\n\n\n\n
\n

Note: You have to name your images in a number sequence followed by the image extension like 1.jpg, 2.jpg, 3.jpg etc<\/em>.<\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

In the Folder Path<\/strong>, you have to add the image folder path without the image name.<\/p>\n\n\n\n

For example, https:\/\/website-name.com\/images\/<\/em><\/strong><\/p>\n\n\n\n

If you have saved your image with a prefix like image-1.jpg, image-2.jpg, image-3.jpg<\/em><\/strong> etc. then in the Prefix<\/strong> field, you have to add image-<\/em><\/strong>.<\/p>\n\n\n\n

From the Digit<\/strong> dropdown, you have to choose the number sequence which you\u2019ve used on your images. For example, if you have saved your images like image-01.jpg, image-02.jpg, image-03.jpg<\/em><\/strong> etc. then you have to select 01 – 99<\/strong>. <\/p>\n\n\n\n

From the Image Type<\/strong> dropdown, you have to select your image extension.<\/p>\n\n\n\n

\n

Note: Supported image type – JPG, PNG and WebP.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

In the Total Image<\/strong> field, you have to mention the total number of images in your sequence.<\/p>\n\n\n\n

If you don\u2019t have long enough content on the section or container (for flexbox) then you have to set a minimum height for the container or section with the Scroll Sequence widget.<\/p>\n\n\n\n

With all the settings in place, you should have an image scroll sequence from your image URL.<\/p>\n\n\n\n

Also, check How to Create Image Scroll Animations like in Apple, Sony in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":106829,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,561],"class_list":["post-106826","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\/106826","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=106826"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106826\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/106829"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=106826"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=106826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}