The video is played every time it returns in the viewport and paused if not ended
Video playback controlled by mouse X position (mouse position)
Video playback controlled by mouse X position (drag and drop)
Use the mouse wheel to control video playback
Video playback controlled by Y position
![](https://modul-r.codekraft.it/wp-content/uploads/2022/06/b7a.gif)
Example: Animation – Duration
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
Example: Animation – Delay
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
Example: Animation – Active area (80% 50% 20%)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
Example: Animation – No animation in / No animation out
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
Example: Animation – Linear / EaseIn / EaseOut / EaseInOut
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
Example: Stagger (childs)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
Example: Animation – Stagger (Elements)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/08/1ILL.gif)
Custom Animation
![](https://modul-r.codekraft.it/wp-content/uploads/2019/06/wapuu-original.png)
3
2
1
![](https://modul-r.codekraft.it/wp-content/uploads/2019/06/wapuu-original.png)
position: absolute;
top: 45%;
left:45%;
1 2 3 GO!
Title stagger (letters)
Title text remix
654321
![](https://modul-r.codekraft.it/wp-content/uploads/2022/02/daniel-leone-197357-unsplash-scaled-1-1024x648.webp)
Parallax title
scroll with the mouse over the image on the left
![](https://modul-r.codekraft.it/wp-content/uploads/2022/06/b7a.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/06/b7a.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/06/b7a.gif)
![](https://modul-r.codekraft.it/wp-content/uploads/2022/06/b7a.gif)
TIMELINE
![](https://modul-r.codekraft.it/wp-content/uploads/2019/06/wapuu-original.png)
No comments yet, be the first!