SVG Shape Morphing Animation
Jayanta Sarkar, Behind the Code: Jayanta Sarkar
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Introduction
0:38
-
2.
SVG Shape Morphing Animation part 1
6:59
-
3.
SVG Shape Morphing Animation part 2
9:27
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
20
Estudiantes
--
Proyectos
Acerca de esta clase
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
Conoce a tu profesor(a)
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... Ver perfil completo
Proyecto de clase práctica
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!
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
