Get started with GreenSock Animation Platform

Jan 21, 2026
कैसे करना है
GreenSock Animation Platform logo

ग्रीन्सॉक एनीमेशन प्लेटफॉर्म (जीएसएपी) आपको कुछ भी एनिमेट करने में सक्षम बनाता है जिसे आप डोम, कैनवास और सीएसएस, साथ ही साथ अपनी कस्टम ऑब्जेक्ट्स सहित जावास्क्रिप्ट के साथ एक्सेस कर सकते हैं।

जीएसएपी ब्राउज़र विसंगतियों को आसान बनाने में भी मदद करता है उपयोगकर्ता परीक्षण (अच्छा न वेब होस्टिंग यहां भी मदद कर सकते हैं), आपको जटिल एनिमेशन का प्रबंधन करने के लिए वस्तुओं का उपयोग करने में सक्षम बनाता है, और jQuery की तुलना में 20 गुना तेजी से चलता है। यह उद्योग में एक मानक बन गया है, और अनगिनत पुरस्कार विजेता वेबसाइटों में इसका उपयोग किया गया है। बनाने के लिए एक साइट मिला? यहाँ सबसे अच्छा करने के लिए हमारी गाइड है वेबसाइट निर्माता चारों ओर।

01. एक मूल HTML फ़ाइल सेट अप करें

Get started with GSAP: Set up a basic HTML file

के साथ एक छवि शामिल करें प्रतीक चिन्ह आपकी HTML फ़ाइल में कक्षा

जीएसएपी सीखने का सबसे अच्छा तरीका इसे कार्रवाई में देखना है। इस ट्यूटोरियल में आप मंच की प्रमुख विशेषताओं के बारे में सीखेंगे जो कामकाजी उदाहरणों के साथ हैं जिन्हें आप आज अपनी परियोजनाओं में उपयोग कर सकते हैं!

एक मूल HTML फ़ाइल सेट करके शुरू करें, जहां आप अपने जावास्क्रिप्ट कोड में ड्रॉप कर सकते हैं। ए के साथ एक छवि शामिल करें प्रतीक चिन्ह कक्षा। आप कैसे काम करता है यह देखने के लिए गुणों को एनिमेट करने के लिए जीएसएपी का उपयोग करेंगे। 

 & lt; html lang = "en" & gt;
& lt; हेड और जीटी;
  & lt; शैली & gt;
    .logo {चौड़ाई: 150px; }
  & lt; / शैली & gt;
& lt; / सिर & gt;
& lt; शरीर & gt;
& lt; img वर्ग = "लोगो"
src = "logo.svg" / & gt;
& lt; स्क्रिप्ट और जीटी;
// कोड यहाँ
& lt; / स्क्रिप्ट & gt;
& lt; / शरीर & gt;
& lt; / html & gt;

02. GSAP लाइब्रेरी शामिल करें

इसके बाद, आपको अपनी वेब प्रोजेक्ट में GSAP जोड़ना होगा। अपने बीच & lt; छवि & gt; तथा & lt; स्क्रिप्ट और जीटी; टैग, जीएसएपी लाइब्रेरी के लिए एक लिंक डालें। आप सीधे ज़िप डाउनलोड कर सकते हैं यहां , या इसे पकड़ो GitHub (यदि आपको साझा करने के लिए फाइलें हैं, तो सही चुनें घन संग्रहण )। फाइलें सुपर-फास्ट क्लाउडफ्लेयर सीडीएन पर भी होस्ट की जाती हैं, इसलिए इस तरह की होस्ट की गई फाइलों का उपयोग करना सबसे आसान तरीका है: 

 & lt; स्क्रिप्ट src = "https://cdnjs.cloudfre.com/jax/libs/gsap/2.0.1/tweenmax.min.js" & gt; & lt; / स्क्रिप्ट & gt;

03. ट्वीन के साथ एनिमेट करें

ट्विनिंग एक एनीमेशन बनाने के लिए समय के साथ एक मूल्य बदलने की प्रक्रिया है। उदाहरण के लिए, किसी ऑब्जेक्ट को ए से बी तक ले जाना, इसे स्केल करना, या इसे घूर्णन करना। आप अपने स्वयं के कस्टम मानों को भी बना सकते हैं।

एक संपत्ति का उपयोग करने का सबसे आसान तरीका उपयोग करना है Tweenmax.to () समारोह। इसके लिए एक लक्ष्य वस्तु, एक अवधि और संपत्ति / मूल्य जोड़े जिन्हें आप एनिमेट कर रहे हैं। कार्रवाई में कार्य को देखने के लिए, नीचे दिए गए कोड की प्रत्येक पंक्ति को आज़माएं प्रतीक चिन्ह लक्ष्य वस्तु के रूप में:

[9 2] // वर्तमान से ट्विन एक्स स्थिति 400 से अधिक 2 सेकंड तक Tweenmax.to ("लोगो", 2, {x: 400}); // वर्तमान से ट्विन वाई स्थिति से 200 और अस्पष्टता 0, 1 से अधिक दूसरा Tweenmax.to ("लोगो", 1, {y: 200, अस्पष्टता: 0}); // ट्विन एक्स और वाई से 100, स्केल करने के लिए 1.5, और 90 डिग्री घुमाएं, 2 से अधिक दूसरा Tweenmax.to ("लोगो", 2, {x: 100, y: 100, स्केल: 1.5, रोटेशन: 90});

04. से और से ट्विन

Get started with GSAP: Tween from and FromTo

आप tweening के लिए प्रारंभ और अंत दोनों मूल्यों को परिभाषित कर सकते हैं

आप अपने वर्तमान मूल्य से एक संपत्ति का उपयोग करके एक संपत्ति को ट्विन कर सकते हैं सेवा मेरे() , लेकिन आप भी ट्विन कर सकते हैं से इसके वर्तमान मूल्य के लिए एक मूल्य। उदाहरण के लिए, यदि आप प्रतीक चिन्ह X स्थिति से शुरू हो रहा है 0 और आप इसे वहां खत्म करना चाहते हैं, आप यह कर सकते हैं:

[9 2] Tweenmax.from ("लोगो", 2, {x: 400});

इस मामले में, आपका लोगो तुरंत आगे बढ़ेगा x = 400 और फिर ट्विन x = 0 । आप वर्तमान मानों को अनदेखा करते हुए, प्रारंभ और अंतिम मान दोनों को भी परिभाषित कर सकते हैं से() इस तरह:

[9 2] Tweenmax.fromto ("लोगो", 2, {x: 400}, {x: 200});

05. आसान

Get started with GSAP: Easing

Easing आपके एनिमेशन में चरित्र जोड़ता है

Easing एनीमेशन की 'शैली' है, क्योंकि गति की निरंतर दर के बजाय ए से बी से मान संक्रमण, जिसे 'रैखिक' कहा जाता है, आप गति की दर को वक्र करने के लिए कार्यों को लागू कर सकते हैं। क्या वे धीरे-धीरे शुरू करते हैं और धीरे-धीरे गति करते हैं? क्या वे अचानक स्टॉप पर आते हैं और अंत में थोड़ा सा उछालते हैं? एनीमेशन में ये शैलियों आपके काम के लिए चरित्र और भावना जोड़ते हैं। आप इस तरह एक आसान कार्य लागू कर सकते हैं:

[9 2] Tweenmax.to ("लोगो", 2, {x: 100, y: 100, घूर्णन: 90, आसानी: circ.easein});

06. कार्यों को आसान और अंदर / बाहर

Get started with GSAP: Easing functions and In / Out

GSAP से चुनने के लिए कई आसान विकल्प हैं

जीएसएपी में विभिन्न प्रकार के आसान कार्य शामिल हैं, जैसे कि वापस , उछाल , लोचदार , पाप , सीआईआरसी , तथा प्रदर्शनी । आपने यह भी देखा होगा कि आराम समारोह में एक संपत्ति है आराम से , जिसे हमने ऊपर दिए गए चरण में उपयोग किया था। आप भी उपयोग कर सकते हैं आराम से तथा सहजता । ये इंगित करते हैं कि एनीमेशन में आसान वक्र लागू होता है। परिणाम देखने के लिए निम्नलिखित प्रयास करें:

[9 2] // एक उछाल के साथ बहस Tweenmax.to ("लोगो", 2, {x: 100, y: 100, रोटेशन: 90, आसानी: bounce.easeout}); // लोचदार के साथ अंदर और बाहर Tweenmax.to ("लोगो", 2, {x: 100, y: 100, घूर्णन: 90, आसानी: elastic.easeinout});

07. एक ट्विन में देरी

कभी-कभी आप एक एनीमेशन की शुरुआत में देरी करना चाहते हैं, या तो इसे किसी अन्य एनीमेशन के साथ सिंक्रनाइज़ करने के लिए, या इसे किसी घटना के होने की प्रतीक्षा करने के लिए। आप एक और एक जीएसएपी के विशेष गुणों का उपयोग कर सकते हैं विलंब यह करने के लिए। निम्नलिखित कोड को देखने के लिए यह देखने के लिए कि आप विशिष्ट समय के लिए Tweens में कैसे देरी कर सकते हैं:

[9 2] Tweenmax.to ("लोगो", 1, {y: 100, आसानी: bounce.easeout}); // इस ट्विन को 1 सेकंड तक देरी Tweenmax.to ("लोगो", 1, {रोटेशन: 9 0, आसानी: circ.easeout, देरी: 1});

08. कॉलबैक फ़ंक्शन

अपने कोड के साथ एनिमेशन को एकीकृत करने के लिए, यह जानना महत्वपूर्ण है कि घटनाएं कब होती हैं, खासकर जब एक एनीमेशन समाप्त होता है या शुरू होता है। आप उपयोग कर सकते हैं अप्रासंगिक इसके लिए घटना कॉलबैक। आप जानना चाह सकते हैं कि एक ट्विन कब शुरू होता है टालना । और आप अपने ट्विन को किसी अन्य एनीमेशन के साथ भी सिंक करना चाहते हैं, या कुछ अन्य कस्टम ऑब्जेक्ट को अपडेट करने के लिए ट्विन और इसकी आसानता का उपयोग भी कर सकते हैं। उपयोग अवज्ञा इसके लिए कॉलबैक। यहां आप कॉलबैक का उपयोग कैसे करते हैं:

[9 2] Tweenmax.to ("लोगो", 1, { y: 100, आसानी: बाउंस.सआउट, ONCOMPLETE: TWEENCOMPLETE }); फ़ंक्शन TWEENCOMPLETE () { console.log ("ट्विन पूर्ण"); }

09. कॉलबैक पैरामीटर

कॉलबैक फायरिंग करते समय आप कॉलबैक के साथ उस फ़ंक्शन को संभालने के साथ जानकारी पास करना चाह सकते हैं। आपको कॉलर या विशिष्ट मानों के बारे में जानकारी पास करने की आवश्यकता हो सकती है। यह आपको अपने एनिमेशन को बाकी कोड बेस के साथ एकीकृत करने में सक्षम बनाता है। सभी पैरामीटर के माध्यम से पारित किए जाते हैं कॉलबैक + "पैराम्स" , अर्थात् OnupdateParams ।

निम्नलिखित उदाहरण में, आप कीवर्ड का उपयोग करके ट्विन की प्रगति को ट्रैक कर सकते हैं {स्वयं} और देख सकते हैं कि एक सरणी का उपयोग करके एकाधिक पैरामीटर कैसे पास करें:

[9 2] Tweenmax.to ("लोगो", 1, { y: 100, आसानी: बाउंस.सआउट, onupdate: tweenupdate, OnupdateParams: ["{स्वयं}", "पूरा किया हुआ"] }); फ़ंक्शन ट्विनअपडेट (ट्विन, संदेश) { वार प्रतिशत = ट्विन। प्रगति () * 100; // प्रगति () एक मान 0-1 है Console.log (प्रतिशत + "" + संदेश); }

10. एनिमेशन को नियंत्रित करना

ठीक है, तो अब आप ट्वीन्स बना सकते हैं और ट्वीन्स, फायर कॉलबैक और पैरामीटर को आसानी से आसानी कर सकते हैं। लेकिन आप एनिमेशन कैसे नियंत्रित करते हैं? अक्सर आप अन्य घटनाओं के आधार पर उन्हें शुरू करना या रोकना चाहते हैं।

यदि आपको एक एनीमेशन को रोकने की आवश्यकता है जिसका आप उपयोग कर सकते हैं विराम () तरीका। यदि आप एक ट्विन को फिर से शुरू करना चाहते हैं, तो उपयोग करें बायोडाटा() । एक ट्विन उपयोग को पूरी तरह से नष्ट करने के लिए हत्या () । निम्नलिखित प्रयास करें और देखें कि क्या होता है:

[9 2] // VAR TWEN के संदर्भ में var tween = tweenmax.to ("। लोगो ", 2, {{y: 100, आसानी: उछाल। आराम से }); // तुरंत रोकें tween.pause (); // घटना पर शुरू करें Settimeout (फ़ंक्शन () {ट्विन। फिर से शुरू करें ()}, 1000); // घटना पर रिवर्स एनीमेशन Settimeout (फ़ंक्शन () {ट्विन। रिवर्स ()}, 3000);

11. सीएसएस और सीएसएसप्लगिन

Get started with GSAP: CSS and CSSPlugin

CSSPlugin ऑटो-डिटेक्ट करता है जब एनिमेशन के लिए इसकी आवश्यकता होती है

जब आप उपयोग करते हैं तो cssplugin शामिल है ट्विनमैक्स । यह एक बड़ा समय-बचतकर्ता है, जिसमें यह एनिमेशन के लिए आवश्यक होने पर ब्राउज़र में व्यवहार सामान्य करता है और ऑटो-डिटेक्ट करता है। CSSplugin रंगीन ट्वेन्स, एसवीजी एनिमेशन और कैशिंग और अन्य आंतरिक चाल के साथ अनुकूलित प्रदर्शन को संभाल सकता है - और सीएसएस के माध्यम से पदों का अनुवाद करने के लिए अक्सर अधिक कुशल होता है।

आपने पहले ही इसे कार्रवाई में देखा है जब आपने उपयोग किया था अस्पष्टता तथा पद एनिमेशन। यह किसी भी विशेष कोडिंग के बिना काम करता है!

12. 2 डी और 3 डी ट्रांसफॉर्म

Get started with GSAP: 2D and 3D transforms

GSAP में अंतर्निहित ट्रांसफॉर्म शामिल हैं जो आपको स्केल करने, अनुवाद और तिरछा करने की अनुमति देते हैं

सीएसएस परिवर्तन आपको स्केल करने, अनुवाद करने और skew करने में सक्षम बनाता है। वे खूबसूरत प्रभाव बनाने के लिए 2 डी और 3 डी दोनों में काम करते हैं। GSAP में अंतर्निहित ट्रांसफॉर्म गुण शामिल हैं एक्स , y , रोटेशन , रोटेशनक्स , रोटेशन , तिरछा तथा स्केल । उन लोगों की बजाय अपनी छवि में निम्नलिखित ट्विन को लागू करने का प्रयास करें जिन्हें हमने पहले ही कोशिश की है:

[9 2] Tweenmax.to ("लोगो", 3, { x: 100, y: 100, पैमाना: 1.5, रोटेशन: 360, आसानी: bounce.easeout});

13. टाइमलाइन

Get started with GSAP: Timelines

GSAP की टाइमलाइन ऑब्जेक्ट आपको कई एनिमेशन प्रबंधित करने में सक्षम बनाता है

एक बार जब आप एक या दो ट्वीन से आगे बढ़ते हैं तो आप सोच सकते हैं कि एकाधिक एनिमेशन कैसे प्रबंधित करें। GSAP में एक शामिल हैं समय वास्तव में ऐसा करने के लिए वस्तु। आप tweens को संलग्न करते हैं समय वस्तु और उपयोग कर सकते हैं पद समय के बाद पैरामीटर उन्हें समय पर। आप ट्वीन्स दूसरे के बाद एक चल सकते हैं, या अंतराल, या यहां तक ​​कि उन्हें ओवरलैप कर सकते हैं। कक्षाओं के साथ अपने HTML पर कुछ और छवियां जोड़ें लोगो 2 तथा लोगो 3 क्रमशः।

यह देखने के लिए कि यह कैसे काम करता है, निम्नलिखित को आज़माएं समय कोड:

[9 2] // एक समयरेखा उदाहरण बनाएँ var tl = नया TimelineMax (); tl.add (tweenmax.to ("लोगो", 1, {x: 50})); // अंतिम "0" को नोट करने के लिए यह एक 0 सेकंड से शुरू होता है। tl.add (tweenmax.to ("logo2", 1, {y: 100}), "0"); // इसे बनाने के लिए "+.25" नोट करें .25 सेकंड में एक शुरू tl.add (tweenmax.to ("Logo3", 1, {रोटेशन: 180, वाई: 50, X: 50}), "+ 25");

14. टाइमलाइन नियंत्रण

साथ ही एनिमेशन को नियंत्रित करने के लिए, आप टाइमलाइन भी नियंत्रित करना चाह सकते हैं। सौभाग्य से, आप एनिमेशन के साथ कर सकते हैं जैसे आप रोक, फिर से शुरू और रिवर्स कर सकते हैं। आप समयरेखा को पैरामीटर भी जोड़ सकते हैं दोहराना , योयो और पूरी समयरेखा के लिए कॉलबैक जोड़ें। आप एक टाइमलाइन की गति को भी नियंत्रित कर सकते हैं टिमकेल संपत्ति। यह देखने के लिए कि यह कैसे काम करता है यह देखने के लिए निम्न कोड के साथ अपनी टाइमलाइन घोषणा को बदलने का प्रयास करें:

[9 2] var tl = new timelinemax ({ // अनन्त रूप से दोहराएं दोहराएं: -1, योयो: सच,});

15. गुण प्राप्त करें और सेट करें

एक सुविधा जो वास्तव में उपयोगी है और ट्वीन्स और टाइमलाइन की गुणों को प्राप्त कर रही है। इस तरह, आप समग्र प्रगति और अवधि को जान सकते हैं, या एक जीएसएपी ऑब्जेक्ट के बारे में अन्य जानकारी इकट्ठा कर सकते हैं। इस कोड उदाहरण में आप कर सकते हैं प्राप्त समयरेखा की अवधि, और फिर सेट इसकी अवधि इसे बदलने के लिए। यह ट्वीन्स के लिए भी यही काम करता है। घटनाओं के वास्तविक समय में प्रतिक्रिया करने और फ्लाई पर एनिमेशन को संशोधित करने का यह एक और शानदार तरीका है। अपने पिछले टाइमलाइन कोड के बाद निम्न जोड़ें:

[9 2] // की वर्तमान अवधि प्राप्त करें समयरेखा console.log (tl.duration ()); // अवधि को 5 सेकंड तक सेट करता है 2 सेकंड प्रतीक्षा के बाद Settimeout (फ़ंक्शन () { tl.duration (5); }, 2000);

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका वेब डिज़ाइनर में प्रकाशित किया गया था। मुद्दा 279 खरीदें या सदस्यता लेने के ।

अधिक पढ़ें:

[3 9 3] [3 9 4] GSAP के साथ सुपरचार्ज एसवीजी एनिमेशन [3 9 7] [3 9 4] एचटीएमएल 5 में प्रभाव एनिमेशन के बाद निर्यात करें [3 9 7] [3 9 4] सभी उपकरणों के लिए स्केल करने के लिए एनिमेशन कैसे बनाएं [3 9 7]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to write HTML code faster

कैसे करना है Jan 21, 2026

(छवि क्रेडिट: भविष्य) [1 9] आधुनिक वेबसाइटों के ..

10 ways to improve your 3D anatomy

कैसे करना है Jan 21, 2026

(छवि क्रेडिट: रयान किंग्स्लियन) [1 9] मानव आकृत�..

बेहतर चरित्र एनिमेशन बनाने के 10 तरीके

कैसे करना है Jan 21, 2026

वर्ष में 3 डी उद्योग के बढ़ते वर्ष के आकार के साथ, यह सुनिश्चित करने के लिए �..

डिजिटल प्लेइन एयर पेंटिंग्स कैसे बनाएं

कैसे करना है Jan 21, 2026

महान कला बनाने के लिए बाहर निकलें [1 9] (छवि क्रेडि..

Get started with Diffuse

कैसे करना है Jan 21, 2026

के किसी भी हिस्से में कुछ अतिरिक्त जीवन लाने के सबसे सरल तरीकों में से एक ..

How to design a chatbot experience

कैसे करना है Jan 21, 2026

चाहे हम इसे स्वीकार करना चाहते हैं या नहीं, मैसेज�..

Paint an epic New York scene

कैसे करना है Jan 21, 2026

इस कार्यशाला के लिए मैं अपने पसंदीदा विषयों में से एक को चित्रित कर रहा ह�..

Create a self-portrait with just 4 colours

कैसे करना है Jan 21, 2026

आत्म-चित्रण एक कलाकार का प्रयास कर सकते हैं सबसे �..

श्रेणियाँ