SVG Shape Morphing Animation
Jayanta Sarkar, full stack web developer and Python prog
Assista a este curso e milhares de outros
Assista a este curso e milhares de outros
Aulas neste curso
-
-
1.
Introduction
0:38
-
2.
SVG Shape Morphing Animation part 1
6:59
-
3.
SVG Shape Morphing Animation part 2
9:27
-
-
- --
- Nível iniciante
- Nível intermediário
- Nível avançado
- Todos os níveis
Gerado pela comunidade
O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.
13
Estudantes
--
Sobre este curso
In this project-based course, you'll learn how to create stunning, smooth, and interactive animations using SVG (Scalable Vector Graphics), GSAP (GreenSock Animation Platform), and JavaScript.
Whether you're a web designer, frontend developer, or an animation enthusiast, this course will guide you step-by-step to master SVG path transitions and bring your graphics to life through professional-grade animations.
What You'll Learn:
-
The fundamentals of SVG and <path> elements
-
Understanding viewBox, path data (d attribute), and shape structure
-
Setting up GSAP and MorphSVG plugin for seamless shape transitions
-
Creating looping morph animations with timeline controls
-
Responsive SVG design and animation optimization for web
-
Building interactive animation apps with JavaScript
Conheça seu professor
Jayanta Sarkar is a dedicated Python programmer and full-stack web developer with a passion for creating dynamic and interactive web applications. With a robust background in both front-end and back-end development, Jayanta excels in building seamless user experiences and efficient, scalable systems.
Over the years, Jayanta has honed his skills in various programming languages and frameworks, making him proficient in technologies such as JavaScript, CSS, HTML, and MySQL. His expertise extends to developing comprehensive solutions that integrate sophisticated database management with intuitive user interfaces.
Jayanta's journey in the tech industry is marked by a continuous drive to learn and adapt to new technologies. He has developed and published several successf... Visualizar o perfil completo
Projeto prático de curso
Shape Shifter: Build Your Own SVG Morphing Animation App
Your task is to build a mini web app that morphs one SVG shape into another using GSAP’s MorphSVG plugin and JavaScript. The animation should loop continuously or trigger based on user interaction (e.g., a button click).
This project will showcase your understanding of SVG paths, the viewBox concept, and how to create smooth transitions between different shapes using GSAP.
Requirements:
-
Use at least 3 different SVG shapes that morph into one another.
-
Implement GSAP’s MorphSVG plugin for the shape transitions.
-
Add looping animation or user-triggered animation (such as a "Start Morphing" button).
-
Ensure your app is responsive and works across modern browsers.
-
Optional: Add custom styling, animations, or sound to enhance creativity.
Example Features:
-
Auto-morphing shapes every 3 seconds
-
A "Next Shape" button to control morphing manually
-
Display the shape name or description during each transition
-
A toggle to pause/resume morphing
Submission Instructions:
-
Finish building your SVG Shape Morphing Animation app.
-
Take at least one clear screenshot showing your morphing shapes in action (bonus if you show your code too).
-
Submit your screenshot along with a short description of what you created.
-
(Optional) If you host your project on GitHub or CodePen, feel free to share the link!
Nota do curso
Por que fazer parte da Skillshare?
Faça cursos premiados Skillshare Original
Cada curso possui aulas curtas e projetos práticos
Sua assinatura apoia os professores da Skillshare
Aprenda em qualquer lugar
Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.
Cursos relacionados
