Category: how-to

In this article we will look on how to make Image sequence animation in Beaver Builder. Sequence of images that play and rewind as you scroll up and down on the page. This is part of a series that focuses on Scrollsequence WP plugin integration.

First two steps are focusing on plugin installation and creating a basic animation, if you already know that, you can skip to the integration to Beaver Builder

1. Install Scrollsequence WP Plugin

There is a choice between Free and Pro version of the plugin.
Even with the free version, you can make it work. We also provide a free 14-day trial so that you can check it out for free and upgrade if you like.

2. Create Animation

Below it is described how to make a simple animation in Scrollsequence.

For that, firstly go to the ‘Scrollsequence Menu’ on the left side of your dashboard and click on the ‘Add New Scrollsequence’. 

In the next steps create a new scene and add images to the Scene.

After you’ve selected and added the images, a new editor section called ‘Fixed Content’ will appear on top of it. It’s used to overlay headlines and other text on top of an image sequence. There is already a default header in place with ‘Another Day on Earth’. 

Let’s not spend much more space with the details on how to make an animation. You can have a look at how to create scroll animation and a general introduction articles.

3. Add Scrollsequence Image Animation To Beaver Builder

I am sure you are familiar with Beaver Builder. It is an intuitive WordPress website builder. It works in real time on the front end of your page. Live, Front End Editing – what you see is what you get.

Firstly, make sure that you’ve Beaver Builder is installed on your website whether free or premium. 

Then, you need to go to the page you want to add the animation and launch it with Beaver Builder. Afterward, you’ll be directed to the Beaver Builder’s page editing interface. 

Now, from the right sidebar, you can drag the HTML module to the page.

Then, paste the shortcode that you copied previously in the ‘General box’ as shown above. And you need to click on the ‘Save’ button just below that. 

You can also preview the scroll image animation in the back end just as shown in the above GIF. As our plugin Scrollsequence seamlessly integrates even in the back end of these page builders. 

If you like your scroll image animation, then you can publish it right away. And, there you go with your animation added using Beaver Builder page builder. 

More from this series

1. Add Image sequence animation to Elementor

2. Add Image sequence animation to Divi

3. Add Image sequence animation to Beaver Builder

Conclusion

folks! We’ve come to the end of our article on how to make scroll image animation and integrate it Beaver Builder in WordPress. 

Are you fascinated by the scroll image animation that you see on Sony, Apple, or Samsung websites? We are going to talk about image sequence animation in Divi page builder.

In general, you can understand scroll image animation as appealing animated images that play and rewind as you scroll. Therefore, you can also create scroll image animation web pages on your WordPress site to draw your visitors to your site.

Thankfully, it’s possible with our Scrollsequence plugin. It’s a handy plugin that allows you to quickly create attractive animation effects. And it’s totally compatible with various page builders such as Beaver Builder, Elementor, Divi, and more. This way, you can add them to various pages effortlessly.

1. Install Scrollsequence WP Plugin

There is a choice between Free and Pro version of the plugin.
Even with the free version, you can make it work. We also provide a free 14-day trial so that you can check it out for free and upgrade if you like.

2. Create Animation

There are some useful articles on how to create scroll animation and a general introduction tutorial. Have a read through them if you feel like you need to start fresh.

3. Add Scrollsequence Image Animation To Divi

Divi’s is a visual page builder. You drag and drop page sections rows and modules to build any type of website by combining and arranging content elements.

To add Scrollsequence to Divi, just follow the steps below. It’s quite simple!

Now, you need to go to the page where you want to add the animation. And go to the Plus (+) button to type in ‘Divi Builder’ and click on it. 

Then, you’ll see ‘Edit With The Divi Builder’, click on it. 

Following that, in the Insert Module search bar, type in ‘Code’. Once you’ll see the code wizard, click on it. 

Now, paste the shortcode that you copied previously and paste it into the Code box. Then, click on the right (✓) icon just below it to save the changes.

More from this series

1. Add Image sequence animation to Elementor

2. Add Image sequence animation to Divi

3. Add Image sequence animation to Beaver Builder

Conclusion

That’s it, folks! We’ve come to the end of our article on how to make scroll image animation and integrate it Divi in WordPress. 

We genuinely hope you enjoyed this article and now can make scroll image animation effortlessly and add it with various page builders using our Scrollsequence plugin. 

If you’ve any queries or confusions related to making scroll image animation or Scrollsequence plugin, then leave a comment below. We’ll respond to you as soon as possible. Also, if you’re already using it to make animation, do leave your thoughts below.

Lastly, don’t forget to share this article with your friends and family. Do follow us on Facebook,and Twitter for more related articles. 

You have been wondering how to make Sony, Apple, or Samsung style image sequence animation in Elementor? Look no further, we are going to dive deep into the visually striking animation technology.

Scrollsequence allows you to seamlessly Scroll through video cut up to individual image frames. On top of the animation you can add any interactive content and animate it in sync with the video animating in the background. It is available as freemium WordPress plugin.

In this article we are going to discover, how easy it is to encompass the animation sequence in Elementor Page Builder

Elementor is the leading website builder platform for professionals on WordPress. It serves web professionals, including developers, designers.

1. Install Scrollsequence WP Plugin

There is a choice between Free and Pro version of the plugin.
Even with the free version, you can make it work. We also provide a free 14-day trial so that you can check it out for free and upgrade if you like.

2. Create Animation

So, now let’s get down to the exciting part that is creating animation with our Scrollsequence plugin.

For that, firstly go to the ‘Scrollsequence Menu’ on the left side of your dashboard and click on the ‘Add New Scrollsequence’. 

Following that, you need to click on the ‘Add Scenes’ option to add images to create its moving effect. On clicking it, you’ll see that ‘Scene 0’ is created for you to add your images. Also, you can create as many scenes as you want by clicking the Plus (+) icon next to the Scene to add additional scenes.

After you’ve selected and added the images, a new editor section called ‘Fixed Content’ will appear on top of it. It’s used to overlay headlines and other text on top of an image sequence. There is already a default header in place with ‘Another Day on Earth’. 

You can wish to alter it to reflect what you want to show. So, here we’ve changed it to ‘Rotating Watch’ for now as shown above.

Also, you can change the heading ID, by clicking on the ‘Text’ editor. You can see that by default, there is ‘on-earth’. So, let’s change into the ‘rotatingwatch’ here as shown above.

Following that, you can also add animation to your heading. To do so, click on the ‘Add Animation’ button that’s located just below Fixed Content Animation.

Then, you’ll see a new animation menu appear in the User Interface. There you’ll find 3 options boxes that are:

• Selector: Here, you need to type in the IDs of the elements you want to animate, starting with a hash (#). For example, #rotatingwatch.
• Start: This field is to select the image number where you want the animation to begin. We want the heading animation to appear from image 15. So, let’s put 15 as a starting point.
• End: Enter the image number to bring the animation to a close. So, let’s put the ending point of heading animation as 100. 

Following that, you can also, select the animation effects at the start and end of the animation, i.e. ‘From Animation’ and ‘To Animation’ sections. 

Here are some useful articles on how to create scroll animation and a general introduction tutorial. With that out of the way, let’s get to the core!

3. Add Scrollsequence Image Animation To Elementor

Let’s go ahead and add animation using the Elementor page builder. Also, do make sure that you’ve already installed Elementor whether free or premium. 

Now, you should go to the page where you want to add the animation and click it in ‘Edit with Elementor’ as shown above.

Following that, you’ll see the Elementor page editing interface. After that, search for the ‘Shortcode’ widget in the left sidebar. Then, you’ll see the shortcode widget just beneath it. You can drag and drop the widget in the page area at the right. 

In the left sidebar, you’ll see the ‘Enter your shortcode’ box. There, you need to paste the shortcode of your animation that you copied last time. Afterward, you’ll need to click on the ‘Apply’ option. 

Following that, you’ll see a page as shown above. As mentioned before, our ScrollSequence plugin seamlessly integrates even on the backend of these popular page builders. 

As shown in the above GIF, you can Live Preview your scroll image animation right from your backend. In addition, this saves a lot of time as you’ll not have to switch back and forth between your frontend and backend. 

Once everything is finalized, now all you need to do is click the ‘Publish’ button at the end of the page. Pretty easy right?

More From This Series

1. Add Image sequence animation to Elementor

2. Add Image sequence animation to Divi

3. Add Image sequence animation to Beaver Builder

Conclusion

That’s it, folks! We’ve come to the end of our article on how to make scroll image animation and integrate it Elementor in WordPress. 

We genuinely hope you enjoyed this article and now can make scroll image animation effortlessly and add it with various page builders using our Scrollsequence plugin. 

If you’ve any queries or confusions related to making scroll image animation or Scrollsequence plugin, then leave a comment below. We’ll respond to you as soon as possible. Also, if you’re already using it to make animation, do leave your thoughts below.

Lastly, don’t forget to share this article with your friends and family. Do follow us on Facebook,and Twitter for more related articles. 

Animation that plays and rewinds on scroll. Holy grail of immersive web experience that can significantly increase your conversion rates. Image animation on scroll is nothing new, but it’s implementation was very challenging and daunting to accomplish. In this article we are going to talk about various ways how to achieve this effect both the hard way and the easy way!

Brief history of image sequence on scroll

There has been only handful of leading edge tech companies, who have invested considerable budget on their web presentation and development of the effects that make them stand out from their competitors.

Sony Be Moved

Apple Airpods Pro

Samsung Galaxy S21

How to create scroll animation like Sony, Apple or Samsung?

Vanilla Javascript, Animation library, or ready made WordPress solution like us? Which is the right approach for you if you want to create animated sequence of background images that play and rewind on scroll?

In this article we are going to research and compare the various options of achieving that sought after effect, that will leave your a strong impact on your audience.

You need the right skills and big budget to code a bespoke solution yourself. Be prepared for quite a few hoops to jump through.

1. Scrollsequence WordPress Plugin
2. Write your own Javascript
   1. Vanilla Javascript
   2. Use of Javascript Animation Libraries
      1. GSAP (Greensock animation platform)
      2. ScrollMagic Javascript Library
      3. Velocity.js

You need the right skills and big budget to code a bespoke solution yourself. There are quite a few hoops to jump through, and you have to be extra efficient with your code performance.

1. Scrollsequence WordPress Plugin

Scrollsequence is without a doubt the easiest way, how to integrate scroll image animation to your website. Pretty much all of the challenges below have been taken care of. All you have to do is upload the images to WordPress and focus on the message you want to tell your audience.

Examples:

Have a look on simple example with a blonde girl opening and closing her eyes on scroll, there is also a deconstruction and explainer article about said example.

If you like futuristic touch, have a look on Cyberpunk example.

2.Write your own Javascript

Below is a list of considerations when creating scroll sequence with custom Javascript.

1. Video versus image sequence

Early on you need to make a decision if to use a video or sequence of images as a source.

• Video is not designed for scrubbing backwards and forwards. Correct video format and encoding are key in order for the animation to work. If you use incorrect format it can happen that only few frames of the video will be displayed, ruining the experience. While it may play smooth on one device, you can have problem on others. See example from GSAP forum, and another one on codepen.
• Sequence of Images is simpler and straightforward solution. Downside is that sometimes images have bigger size than a well compressed video. Vanilla Javascript example on css-tricks.com
• Image sprite animation is also an interesting alternative. Instead a lot of images, you connect them into a sprite and then move the sprite around to achieve desired effect.

2. Which HTML tag to use <canvas> <img > or <video>?

HTML5 give you a number of ways how to dynamically display images in rapid succession to achieve animation effect.

• The oldest trick in the book is use of <img> tag and Javascript to dynamically change it’s src attribute. I don’t recommended to use this, because the of very annoying flashing during the animation caused by decoding. There are ways around it like using multiple images over each other and z-index, but really <img> element is not recommended for this case.
• If you decided to use video as source use the more modern <video> tag. Once again, using video as source has it’s drawbacks, but this is a valid path to go through.
• The most advanced and performance oriented HTML5 tag is <canvas> utilizes Canvas API built for dynamic elements, animations or even games that run in browser. You can draw anything on canvas from images, video, 3D objects or anything that you want. All with the best possible performance. The most expensive part is image decoding, so you have to carefully execute it.

3. Javascript Scroll Image Animation Performance

The most important part is to have your code written efficiently. There is no room for useless operations like drawing the same image twice.

1. Use passive scroll listeners for detecting the scroll position
2. Throttle the scroll event and tie it to requestAnimationFrame, only draw on canvas when there has been a change, if you draw same image multiple times, you get in trouble.
3. Pre-calculate as much as possible in advance. Only hook the necessary functions with extra attention to performance to the events that happen each scroll.
4. The most expensive operation is image decoding. Decoding is necessary operation that takes compressed .jpg or .png and decode it to a bitmap. To efficiently decode the images there are several approaches, but not all are compatible with most browsers. See image.decode(), createImageBitmap, JS web worker and offscreen canvas for reference.

4. Responsivity

Depending on what approach you select, you need to be clear on how the animation will look on different devices, and how it will behave if the window resizes. For Canvas tag you have to handle the resize even yourself, re-drawing the canvas with correct size of the image each time. Don’t forget to throttle and debounce the resize event, as on mobile devices the resize event fires each time when address and navigation bar is moving away.

5. SEO

Most search engines do not run Javascript. Even google first indexes the static HTML and then only if it decides to, it may or may not index your site with Javascript on. That’s why you need to think ahead on how the animation will be displayed with disabled Javascript

6. Image pre-loading and caching

When preloading a large quantities of images, Largest Contentful Paint [LCP] may be affected. To avoid that, the best advice is to preload the images after the LCP event. Scrollsequence is preloading only the necessary images on page load. All the others are preloaded in the background, while user is scrolling.

7. Cross device-compatibility

This is one of the most challenging tasks. Every browser, every device, and even Javascript version can have an effect on performance. Especially tricky is to have a smooth animation on browsers like Internet Explorer.

8. Fallback in case of disabled Javascript

What to display if user has disabled Javascript? Do we really want them to see a broken website.

9. Image Optimisation

Last but not least, you want to keep file size to a minimum. To learn more, read our article about Bulk Image Optimisation.

1.1. Vanilla Javascript Scroll Animation

Using Vanilla Javascript is the most challenging option, but those who succeed get the the most control on how is animation pre-loaded, displayed and served to the visitor. Nevertheless it gives you the most control over everything that is going on.

Follow tutorials below:

• Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages (css-tricks)
• Image Sequence Animation on Scroll (codepen)

1.2. Use of Javascript Animation Libraries

GreenSock Animation Platform (GSAP)

Okay, well GSAP is the number one choice if you are after high performance animation Javascript library. GSAP is lightweight and people use it in some of the most advanced applications, games and animations.

GreenSock is the recommended Javascript library for scroll image sequence animation,

It’s free for non commercial use, and you have to pay a small fee in some cases.

In 2020 folks from GreenSock released ScrollTrigger addon, which is made for high performance scroll triggered animations.

GreenSock is the recommended Javascript library for scroll image sequence animation, it has all the main parts, and a lot of the advanced ones like scroll delay already built in.

• Creating Awesome UI’s that Animate Only On Scroll (youtube video using GSAP)
• CodePen Demo (AirPods)

ScrollMagic Image Sequence

Scrollmagic is an addon for GSAP. You can find few tutorials online on how to use it, but it’s performance and support are not so great. While it was a good choice in the past, now ScrollTrigger has superseded ScrollMagic in many ways.

• Image Sequence Example (ScrollMagic)
• Apple Airpod Pro Javascript Animation Tutorial (Youtube video from DevEd)
• Animated Video Scroll Render for Web with Bodymovin & ScrollMagic JS (Medium)

JQuery Sequencer

Very simple, single use JQuery animation library, it seems that it does the job – we haven’t tested this one, give it a go and let us know

Closing Words

Using Javascript, either vanilla or with use of GSAP might be your choice when you have the skills and buget to write your own code. If you have WordPress, and want to keep things simple, Scrollsequence is the easiest and most user friendly way to have a scroll image animation on your website.