Image sequencer

I am sure that you saw well-known Apple landings with animated frames when you scroll down a page. Now, you can do similar without code knowledge with image sequencer block.

This blocks allows to control frames based on different triggers: scroll, click, hover. Technically, it’s possible to control video file, but browsers still very slow in such operation, so, you need to prepare video and convert it to image files. There are many free services for this action which do this automatically. For example Ezgif video converter. Also, all video editors have option to export video to image sequence.

Once you have all files, you must upload them. Make sure that you selected your images in proper order because it’s critical to order images properly. You must select first image, then, second, then third, etc (or select them all from first to last).

Once you did this, you can use sequencer. This is example of full width container with a sequencer + enabled scroll trigger with enabled trigger end +=500 (it means that animation will go from trigger point to point +500px on scroll.

Now let me show more complex example with enabled pin option.

Animation Pin Scroll

Cool, Right???

You can also use other triggers. For example, hover trigger.

Hover over this image

Here you can find more deep tutorial how to make Apple-style animation effects

Copy this post’s content
Copy code below, and paste it (CTRL+V) in content of page

2 responses to “Image sequencer”

  1. artemstrezh Avatar

    Классный эффект, но жутко стробоскопит при первой загрузке (

    1. Blog Staff Avatar

      это баг, будет исправлено