Jump to content


How´s that made?

Recommended Posts


I´ve seen that site in the newsletter and was wondering how that splitted video scrolling effect was made?




In the dev tools all I see is this <li> element with class "slideshow__item".

Where does the splittng happen? 

Is it a canvas element that I cannot see?


Thanks for helping!

Link to comment
Share on other sites

It's am impressive effect for sure. Below is a video that shows that the video is rendered to canvas.  Notice that I delete the canvas element and can still interact with the slideshow.




I didn't realize until now that you could horizontally drag the slideshow. 

  • Like 2
Link to comment
Share on other sites

I have done similar animation some time ago with images. It can be done very simply!

0) You want to render into a canvas
1) Write a method to split a video into different elements (create few video elements with the same video)
2) Position each video element so it creates one whole piece in canvas
3) Create an animation for each element so it actually moves and makes splits visible.

<li> elements are only for the texts, all the magic that happens within the video is rendered in the canvas.
Very nicely done by the authors, works so smoooothly ( ͡° ͜ʖ ͡ °)

In dev console go to Performance tab, click record, trigger animation, stop record.
This way you'll be able to see each frame of the animation to really see what's going on :)

  • Like 3
Link to comment
Share on other sites

Thank you both!


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.