SVG Shape Morphing Animation
Jayanta Sarkar, Behind the Code: Jayanta Sarkar
Regardez ce cours et des milliers d'autres
Regardez ce cours et des milliers d'autres
Leçons de ce cours
-
-
1.
Introduction
0:38
-
2.
SVG Shape Morphing Animation part 1
6:59
-
3.
SVG Shape Morphing Animation part 2
9:27
-
-
- --
- Niveau débutant
- Niveau intermédiaire
- Niveau avancé
- Tous niveaux
Généré par la communauté
Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.
20
apprenants
--
À propos de ce cours
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
Rencontrez votre enseignant·e
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... Voir le profil complet
Projet de cours pratique
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!
Notes attribuées au cours
Pourquoi s'inscrire à Skillshare ?
Suivez des cours Skillshare Original primés
Chaque cours comprend de courtes leçons et des travaux pratiques
Votre abonnement soutient les enseignants Skillshare
Apprenez, où que vous soyez
Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.
