Part 2: Replacing a 3.4MB video with 40kb of scripted GSAP animations: adding a camera
The article discusses the process of enhancing a web animation by adding camera movements to scripted GSAP animations. It highlights the challenges faced in achieving responsive scaling and proper zooming techniques. The author shares insights from user feedback and the technical solutions implemented to improve the animation experience.
- ▪Part one of the series reached 69,000 views on r/webdev in just two days.
- ▪The author aimed to replace a 3.4 MB video with a 40 KB animation to improve performance.
- ▪The article details the technical challenges of implementing camera movements and responsive scaling in GSAP animations.
Opening excerpt (first ~120 words) tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3839377) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } Sugam Panthi Posted on May 27 Part 2: Replacing a 3.4MB video with 40kb of scripted GSAP animations: adding a camera #webdev #design #animation #claude Part one reached 69,000 views on r/webdev in two days. I did not expect that. I wrote it because I thought replacing a 3.4 MB video with 40 KB of DOM animation was interesting enough to share. Turns out a lot of people are thinking about the same problem. The comments were better than the post.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at DEV.to (Top).