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
2 responses to “Image sequencer”
Классный эффект, но жутко стробоскопит при первой загрузке (
это баг, будет исправлено