Jump to content
Search Community

How´s that made?

am_ test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey,

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

 

https://antoni.de/

 

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

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 ( ͡° ͜ʖ ͡ °)

PRO TIP:
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

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.
×
×
  • Create New...