এলিমেন্টরে (ফ্রি টেমপ্লেট) জিএসএপি অ্যানিমেশন কীভাবে যুক্ত করবেন

আপনি Elementor এর ভিতরে সম্পূর্ণ GSAP অ্যানিমেশন চালাতে পারেন। স্প্লিট-টেক্সট প্রকাশ করে, পিন করা অনুভূমিক স্ক্রোল, স্ক্রোল-স্ক্রাবড প্যারালাক্স, কাউন্টার, এই সমস্ত কিছু, কোন প্লাগইন ডেভেলপমেন্ট এবং কোন ফাংশন ছাড়াই।php সম্পাদনা করে, এবং আপনার ক্লায়েন্টরা প্রতিটি শিরোনাম এবং রঙ সম্পাদনা করার ক্ষমতা রাখে। কৌশল হল উইজেট নির্মাতা মাস্টার অ্যাডঅনগুলিতে: আপনার HTML, CSS, এবং JS একবার পেস্ট করুন, কী সম্পাদনাযোগ্য হওয়া উচিত তা চিহ্নিত করুন এবং এটি একটি সাধারণ এলিমেন্টর উইজেট হয়ে যায় যে কেউ একটি পৃষ্ঠায় ড্রপ করতে এবং প্যানেল থেকে সম্পাদনা করতে পারে৷।

এটি প্রমাণ করার জন্য, আমি একটি সম্পূর্ণ এক-পৃষ্ঠার GSAP ল্যান্ডিং টেমপ্লেট তৈরি করেছি (প্লেহেড নামে একটি কাল্পনিক মোশন স্টুডিও) এবং প্রতিটি বিভাগকে একটি আমদানিযোগ্য উইজেটে রূপান্তর করেছি। তুমি পারবে একটি জিপ হিসাবে সমস্ত ছয়টি উইজেট ডাউনলোড করুন এই পোস্টের শেষে, কয়েক ক্লিকে সেগুলি আমদানি করুন এবং তারা ঠিক কীভাবে কাজ করে তা দেখতে তাদের আলাদা করে নিন।

এই গাইডে আমি ধাপে ধাপে হিরো সেকশন উইজেটটি কীভাবে তৈরি করেছি তা নিয়ে হাঁটব, তারপরে অন্য পাঁচটি বিভাগকে সংক্ষিপ্ত করব। আপনি যদি কখনও একটি HTML/CSS/JS ডিজাইনকে Elementor-এ রূপান্তর করতে চান, যার মধ্যে আপনি ChatGPT বা Claude দিয়ে তৈরি করা কোড সহ, এটি হল ওয়ার্কফ্লো।

আপনি শুরু করার আগে একটি শর্টকাট: আপনি যে গতি চান তা যদি নড়াচড়া করে এমন চিত্রগুলির একটি সারি হয়, তাহলে আপনাকে GSAP লিখতে হবে না। আমরা ইতিমধ্যে পাঠানো হয়েছে 20টি ক্যারোজেল এবং স্লাইডার উইজেট একইভাবে তৈরি করা হয়েছে 3D তে সাইড প্যানেল ঘোরায়, একটি স্ট্যাক থেকে কার্ডের খোসা ছাড়ে, একটি বাঁকা রিম em এর চারপাশে স্লাইড চালায় এবং প্রতিটি প্যানেল থেকে আপনি সম্পাদনা করা একটি সাধারণ এলিমেন্টর উইজেট হিসাবে আমদানি করে৷।

তাদের মধ্যে আটটি ফ্রি প্লাগইনে চলে, বারোটির প্রো প্রয়োজন। এমনকি যদি কোনোটিই সঠিক মিল না হয়, তবে সবচেয়ে কাছেরটি আমদানি করা এবং এর ভিতরে JS পড়া একটি খালি সম্পাদক থেকে শুরু করে বীট করে, এবং এই পোস্টের আরও নিচের বিল্ড ধাপগুলি সেই JS কে নিয়ন্ত্রণে পরিণত করে।

GSAP অ্যানিমেশন কি?

GSAP (GreenSock অ্যানিমেশন প্ল্যাটফর্ম) হল একটি জাভাস্ক্রিপ্ট অ্যানিমেশন লাইব্রেরি যা একটি ওয়েব পৃষ্ঠায় যেকোন কিছুকে অ্যানিমেট করে ume টেক্সট, ইমেজ, SVG, CSS বৈশিষ্ট্য ine ফ্রেম-সঠিক সময় এবং সহজ নিয়ন্ত্রণ সহ। এটি স্ক্রোল প্রভাবগুলিকে শক্তি দেয় এবং পাঠ্য প্রকাশ করে যে আপনি পুরস্কার বিজয়ী সাইটগুলিতে দেখতে পাচ্ছেন এবং সংস্করণ 3.13 থেকে ScrollTrigger এবং SplitText এর মতো প্রিমিয়াম প্লাগইন সহ সমগ্র লাইব্রেরিটি 100% বিনামূল্যে৷।

যে শেষ অংশ মানুষ উপলব্ধি চেয়ে বেশি গুরুত্বপূর্ণ। স্প্লিটটেক্সট (প্লাগইন যা শিরোনামগুলিকে পৃথকভাবে অ্যানিমেটেড অক্ষরে বিভক্ত করে) "ক্লাব গ্রিনসক" পেওয়ালের পিছনে প্রতি বছর $99+ খরচ করত। Webflow GSAP অধিগ্রহণ করার পরে, সবকিছু বিনামূল্যে হয়ে গেছে। তাই ওয়ার্ডপ্রেস ব্যবহারকারীদের জন্য একমাত্র আসল বাধাটি হল ইন্টিগ্রেশন, এবং এটিই এই পোস্টটি সরিয়ে দেয়।

সমস্যা: এলিমেন্টর জিএসএপি কথা বলে না

এলিমেন্টরের অন্তর্নির্মিত গতি প্রভাবগুলি প্রবেশদ্বার অ্যানিমেশন, মৌলিক প্যারালাক্স এবং মাউস ট্র্যাকিং কভার করে। 80% পৃষ্ঠার জন্য ভাল। কিন্তু তারা করতে পারে না:

• স্প্লিট-টেক্সট প্রকাশ করে যেখানে প্রতিটি চরিত্র তার নিজস্ব বিলম্বের সাথে অ্যানিমেট করে
• পিন করা বিভাগগুলি যা অনুভূমিকভাবে স্ক্রোল করে যখন পৃষ্ঠাটি উল্লম্বভাবে স্ক্রোল করে
• স্ক্রোল-স্ক্রাবড অ্যানিমেশন সঠিক স্ক্রোল অবস্থানের সাথে আবদ্ধ (স্ক্রোলট্রিগারের বিশেষত্ব)
• শৃঙ্খলিত টাইমলাইন যেখানে একটি অ্যানিমেশন পরের দিকে চলে যায়
• বেগ-প্রতিক্রিয়াশীল প্রভাব, যেখানে উপাদানগুলি ভিজিটর স্ক্রোল কত দ্রুত প্রতিক্রিয়া জানায়

স্বাভাবিক সমাধান সব একটি ত্রুটি ভাগ। আপনি একটি HTML উইজেটে কোড পেস্ট করতে পারেন, কিন্তু তারপর শিরোনাম পাঠ্য একটি কোড ব্লকের ভিতরে থাকে আপনার ক্লায়েন্ট কখনই স্পর্শ করার সাহস করবে না। আপনি একটি GSAP-নির্দিষ্ট অ্যানিমেশন প্লাগইন ইনস্টল করতে পারেন, কিন্তু আপনি এর প্রিসেট প্রভাবের মধ্যে সীমাবদ্ধ। আপনি আপনার চাইল্ড থিমে হাতে স্ক্রিপ্টগুলি সারিবদ্ধ করতে পারেন, কিন্তু এখন একটি শিরোনাম সম্পাদনা করার জন্য একজন বিকাশকারীর প্রয়োজন৷।

এলিমেন্টরে GSAP অ্যানিমেশন যোগ করার 4টি উপায় (তুলনা)

প্রিসেট প্লাগইনগুলি সত্যিকার অর্থে ঠিক আছে যদি একটি ফেইড-অন-স্ক্রোল আপনার প্রয়োজন হয়। উইজেট বিল্ডার জয়ী হয় যখন আপনি এমন একটি অ্যানিমেশন চান যা অন্য কারো কাছে নেই, কারণ আপনি (বা একটি AI) এটি লিখেছেন। আপনি কোডটি একবার কাজ করেন, সম্পাদনাযোগ্য অংশগুলিকে নিয়ন্ত্রণে সংযুক্ত করুন এবং তারপর থেকে এটি যেকোনো স্টক এলিমেন্টর উইজেটের মতো আচরণ করে: পাঠ্য ক্ষেত্র, রঙ চয়নকারী, লিঙ্ক নিয়ন্ত্রণ, লট।

বিনামূল্যের টেমপ্লেট:6টি উইজেট হিসাবে একটি সম্পূর্ণ GSAP ল্যান্ডিং পৃষ্ঠা

প্লেহেড একটি কাল্পনিক মোশন স্টুডিওর জন্য একটি এক পৃষ্ঠার সাইট। আমি উদ্দেশ্যমূলকভাবে সেই কুলুঙ্গিটি বেছে নিয়েছি: একটি মোশন স্টুডিওর জন্য, অ্যানিমেশন হয় পোর্টফোলিও, তাই প্রতিটি প্রভাব তার স্থান অর্জন করে। পৃষ্ঠাটি GSAP 3.15-এ ScrollTrigger এবং SplitText সহ চলে, অফিসিয়াল CDN থেকে লোড করা হয়।

ডাউনলোডে ছয়টি উইজেট:

1. বীর 1 স্প্লিটটেক্সট অক্ষর প্রকাশ, প্যারালাক্স হীরার আকার, প্রবাহিত গ্লো অর্বস, চৌম্বকীয় বোতাম
2. মার্কি একটি অসীম টিকার যা ভিজিটর দ্রুত স্ক্রোল করলে গতি বাড়ে
3. কাজের গ্যালারি একটি লাইভ কার্ড কাউন্টার এবং বেগ-ভিত্তিক কার্ড স্কু সহ পিন করা অনুভূমিক স্ক্রোল
4. পরিসংখ্যান ভিউপোর্টে প্রবেশ করার সময় শূন্য থেকে রোল আপ হওয়া কাউন্টারগুলির মধ্যে
5. প্রক্রিয়া চারটি সহজীকরণ বক্ররেখা যা আক্ষরিক অর্থে নিজেদের আঁকে, প্রতিটি তার নিজস্ব GSAP সহজ ব্যবহার করে
6. সিটিএ একটি চৌম্বকীয় ইমেল বোতাম দিয়ে স্ক্রোল-ট্রিগার করা স্প্লিট-টেক্সট প্রকাশ করুন

প্রতিটি উইজেট স্বয়ংসম্পূর্ণ: স্কোপড সিএসএস যাতে এটি আপনার থিমের সাথে সংঘর্ষ করতে না পারে, এর নিজস্ব জিএসএপি লোডার যা লাইব্রেরি একবার নিয়ে আসে এমনকি যদি ছয়টি উইজেট একই পৃষ্ঠায় বসে থাকে এবং ফলব্যাক করে যাতে সিডিএন কখনও থাকলে বিষয়বস্তু দৃশ্যমান থাকে ব্যর্থ। হ্রাস-গতির পছন্দগুলিকেও সম্মান করা হয়। যে দর্শকরা তাদের OS এ অ্যানিমেশন বন্ধ করে তারা একটি স্ট্যাটিক পৃষ্ঠা পায়।

আমি কিভাবে হিরো উইজেট তৈরি করেছি, ধাপে ধাপে

এই অংশ যে সাধারণীকরণ যেকোন অ্যানিমেশন আপনি কখনও চাইবেন। প্রতিবার একই সাত ধাপ।

ধাপ 1: HTML, CSS, এবং JS কাজ করে শুরু করুন

উত্সটি যে কোনও কিছু হতে পারে: একটি কোডপেন যা আপনি প্রশংসা করেন, একটি বিভাগ যা আপনি কোড করেছেন বা একটি AI চ্যাট থেকে আউটপুট৷ আমার নায়ক ছিল মার্কআপ, শৈলী এবং একটি স্ক্রিপ্টের তিনটি ফাইল যা একটি GSAP টাইমলাইন তৈরি করে। উইজেট বিল্ডার স্পর্শ করার আগে, নিশ্চিত করুন যে এটি একটি ব্রাউজারে একটি প্লেইন ।html ফাইল হিসাবে কাজ করে। ডিবাগিং যেকোনো পৃষ্ঠা নির্মাতার ভিতরের তুলনায় সেখানে 10x সহজ।

ধাপ 2: এক মোড়ক ক্লাসে সবকিছু স্কোপ করুন

আপনার উইজেট অন্যান্য উইজেট, অন্যান্য প্লাগইন, অন্যান্য CSS সহ পৃষ্ঠাগুলিতে বাস করবে। পুরো বিভাগটিকে একটি অনন্য ক্লাসে মোড়ানো এবং প্রতিটি নির্বাচককে এটি বন্ধ করে দিন:

<section class="ph-hero-wrap">
  ...
</section>

/* every rule starts with the wrapper */
.ph-hero-wrap .ph-title { font-size: clamp(3rem, 10.5vw, 8.6rem); }
.ph-hero-wrap .ph-btn-solid { background: var(--ph-primary, #5551f0); }

এছাড়াও জেনেরিক অ্যানিমেশন কীফ্রেমের নাম পরিবর্তন করুন। @keyframes spin হয়ে যায় @keyframes ph-hero-spin, তাই এক পৃষ্ঠায় দুটি উইজেট একই নামের জন্য লড়াই করে না। এই একক পদক্ষেপটি 90% "আমার উইজেট পৃষ্ঠা ভেঙে" সমর্থন টিকিটকে বাধা দেয়।

ধাপ 3: টোকেন দিয়ে সম্পাদনাযোগ্য পাঠ্য প্রতিস্থাপন করুন

যে কোনো জায়গায় একজন সাইটের মালিক বিভিন্ন শব্দ চাইতে পারেন, ডবল কোঁকড়া ধনুর্বন্ধনীতে একটি টোকেনের জন্য হার্ডকোড করা পাঠ্যটি অদলবদল করুন:

<h1 class="ph-title">
  <span class="ph-split">{{title_line_one}}</span>
  <span class="ph-split">{{title_line_two}}</span>
  <em class="ph-serif">{{accent_word}}</em>
</h1>

লক্ষ্য করুন আমি শিরোনামটিকে একটির পরিবর্তে তিনটি টোকেনে বিভক্ত করেছি। অ্যাকসেন্ট শব্দ (“move”) ভিন্নভাবে স্টাইল করা হয়েছে italic serif, amber, animated um যাতে এটি তার নিজস্ব নিয়ন্ত্রণ পায়। সম্পাদনা করা ব্যক্তির কখনই এটি জানার প্রয়োজন নেই; তারা শুধু তিনটি লেবেলযুক্ত পাঠ্য ক্ষেত্র দেখতে পায়। প্রতিটি টোকেন একটি হয়ে যায় পাঠ্য নিয়ন্ত্রণ নির্মাতার মধ্যে।

বোতামগুলি একটি URL নিয়ন্ত্রণ পায় যাতে লিঙ্ক, নতুন-ট্যাব টগল এবং প্যানেল থেকে সমস্ত কাজ অনুসরণ না করে:

<a class="ph-btn" href="{{first_button_url.url}}"
   target="{{first_button_url.is_external}}"
   rel="{{first_button_url.nofollow}}">{{first_button_text}}</a>

ধাপ 4: ব্র্যান্ডের রঙগুলিকে স্টাইল কন্ট্রোলে পরিণত করুন

ত্রিশটি রঙ নিয়ন্ত্রণ করার তাগিদ প্রতিরোধ করুন। আমার নায়কের পাঁচটি আছে: ব্যাকগ্রাউন্ড, টেক্সট, অ্যাকসেন্ট, প্রাথমিক এবং নিঃশব্দ। তারা মোড়কে CSS ভেরিয়েবল ফিড করে এবং প্রতিটি প্রাপ্ত রঙ (গ্লো, সীমানা, ছায়া) তাদের থেকে গণনা করা হয় color-mix():

.ph-hero-wrap {
  --ph-accent: {{accent_color}};
  --ph-primary: {{primary_color}};
  --ph-glow-primary: color-mix(in srgb, var(--ph-primary, #5551f0) 22%, transparent);
}

"প্রাথমিক" পরিবর্তন করুন রঙ নিয়ন্ত্রণ এবং বোতাম, গ্লো অর্ব এবং ডায়মন্ড শেপ সব একসাথে আপডেট হয়। এটিই একটি উইজেটকে একত্রিত করার পরিবর্তে ডিজাইন করা অনুভব করে।

ধাপ 5: CDN থেকে GSAP একবার লোড করুন

JS GSAP স্ক্রিপ্টগুলিকে সুরক্ষিত আইডি দিয়ে ইনজেক্ট করে, তাই এক পৃষ্ঠায় ছয়টি উইজেট এখনও ঠিক একবার লাইব্রেরি লোড করে:

["ph-gsap-core", "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"],
["ph-gsap-st",   "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"],
["ph-gsap-split","https://cdn.jsdelivr.net/npm/gsap@3.15/dist/SplitText.min.js"]

তারপর অ্যানিমেশন নিজেই একটি আদর্শ GSAP টাইমলাইন। অক্ষর একটি স্তব্ধ সঙ্গে বৃদ্ধি, উচ্চারণ শব্দ সঙ্গে পপ back.out(2.5), স্ক্রোল অবস্থানের বিরুদ্ধে হীরা স্ক্রাব। আপনি যদি ইতিমধ্যে GSAP জানেন তবে কিছুই পরিবর্তন হয় না। যদি আপনি না করেন, তাহলে ঠিক এই কোডটি একটি AI আপনার জন্য আনন্দের সাথে লিখবে (নীচে আরও)।

ধাপ 6: উইজেট বিল্ডারে উইজেট তৈরি করুন

আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে: মাস্টার অ্যাডঅন → উইজেট বিল্ডার → নতুন যোগ করুন। উইজেটের নাম দিন, একটি আইকন বাছাই করুন, তারপর আপনার তিনটি ফাইল HTML, CSS এবং JS ট্যাবে পেস্ট করুন।

এখন প্রতি টোকেনে একটি নিয়ন্ত্রণ যোগ করুন: আমার নায়কের জন্য 19, চারটি ভ্রু পাঠ্য, চারটি শিরোনাম ক্ষেত্র, বিবরণ, তাদের লিঙ্ক সহ দুটি বোতাম, স্ক্রোল কিউ এবং স্টাইল ট্যাবে পাঁচটি রঙ। কন্ট্রোল নাম অবশ্যই টোকেনের সাথে হুবহু মিলবে: {{title_line_one}} টোকেন নামে একটি নিয়ন্ত্রণ প্রয়োজন title_line_one. সম্পূর্ণ নিয়ন্ত্রণ রেফারেন্স বাস উইজেট নির্মাতা ডকুমেন্টেশন.

অনুলিপি করার মতো একটি বিশদ: প্রতিটি রঙ নিয়ন্ত্রণকে আপনার ডিজাইনের সাথে মিলে যাওয়া একটি ডিফল্ট দিন। একটি উইজেট যা ধূসর আমদানি করে কারণ এর রঙ নিয়ন্ত্রণগুলি খালি ছিল তা না থাকলেও ভাঙা দেখায়৷।

ধাপ 7: এটিকে এলিমেন্টরে ফেলে দিন এবং যেকোনো উইজেটের মতো সম্পাদনা করুন

উইজেটটি প্রকাশ করুন এবং এটি মাস্টার অ্যাডঅনসের অধীনে এলিমেন্টর প্যানেলে প্রদর্শিত হবে। এটি একটি পৃষ্ঠায় টেনে আনুন, এবং বাম প্যানেল আপনার লেবেলযুক্ত ক্ষেত্রগুলি দেখায়। আপনার নিজের শিরোনামে "আমরা তৈরি করি" পরিবর্তন করুন, উচ্চারণটি পুনরায় রঙ করুন, আপনার মূল্য পৃষ্ঠায় বোতামগুলি নির্দেশ করুন৷ GSAP টাইমলাইন প্রতিটি সম্পাদনার মাধ্যমে চলতে থাকে। এটাই পুরো প্রতিশ্রুতি: অ্যানিমেশন জটিলতা লুকানো, বিষয়বস্তু সম্পাদনা উন্মুক্ত।

অন্যান্য পাঁচটি বিভাগ, সংক্ষেপে

মার্কি (3 নিয়ন্ত্রণ)। টিকার টেক্সট একটি ফাঁকহীন CSS লুপের জন্য দুবার প্রিন্ট করে এবং GSAP স্ক্রোল বেগের প্রতিক্রিয়া জানাতে নেয়। দ্রুত স্ক্রোল করুন এবং এটি 4x পর্যন্ত ত্বরান্বিত হয়, তারপরে ফিরে আসে। মজার শিক্ষার উদাহরণ কারণ ফলব্যাকটি বিশুদ্ধ CSS: যদি GSAP কখনও লোড না হয় তবে এটি এখনও স্ক্রোল করে।

কাজের গ্যালারি (22 নিয়ন্ত্রণ)। শোপিস। স্ক্রোলট্রিগার বিভাগটি পিন করে যখন কার্ড ট্র্যাকটি অনুভূমিকভাবে অনুবাদ করে, একটি কাউন্টার টিক 01 /05, এবং কার্ডগুলি স্ক্রোল বেগের উপর ভিত্তি করে সামান্য তির্যক হয়। পাঁচটি কার্ড, প্রতিটি সম্পাদনাযোগ্য শিরোনাম, টাইমকোড এবং ট্যাগ সহ। মোবাইলে এটি একটি নেটিভ সোয়াইপ ক্যারোজেলে পরিণত হয়, কোন পিনিং এবং কোন JS প্রয়োজন হয় না। পিন গণিত কাজ করার জন্য Elementor-এ একটি পূর্ণ-প্রস্থ বিভাগ প্রয়োজন।

পরিসংখ্যান (13 নিয়ন্ত্রণ)। চারটি সংখ্যা যা দেখার সময় স্ক্রোল করার সময় এক্সপো সহজে গণনা করা হয়। চূড়ান্ত সংখ্যাগুলি মার্কআপেই থাকে, তাই জাভাস্ক্রিপ্ট অক্ষম থাকা দর্শকরাও "142" দেখতে পান, “0” নয়।

প্রক্রিয়া (20 নিয়ন্ত্রণ)। পৃষ্ঠায় আমার প্রিয় অহংকার: চারটি প্রক্রিয়া ধাপ, প্রতিটি একটি SVG সহজীকরণ বক্ররেখার সাথে যুক্ত যা সেই সঠিক সহজতা ব্যবহার করে নিজেকে আঁকে। রৈখিক বক্ররেখা রৈখিকভাবে আঁকে, ব্যাক-আউট বক্ররেখা ওভারশুট। কোড ক্যাপশনগুলি সম্পাদনাযোগ্য পাঠ্য নিয়ন্ত্রণ, তাই আপনি আপনার নিজের ধাপের বিবরণের জন্য GSAP রেফারেন্সগুলি অদলবদল করতে পারেন৷।

CTA (11 নিয়ন্ত্রণ)। নায়কের মতো একই স্প্লিট-টেক্সট কৌশল কিন্তু স্ক্রলে ট্রিগার করা হয়েছে, এছাড়াও একটি চৌম্বকীয় বোতাম যা কার্সারকে অনুসরণ করে এবং একটি ইলাস্টিক সহজে ফিরে আসে। একটি mailto এ URL নিয়ন্ত্রণ নির্দেশ করুন: লিঙ্ক এবং এটি একটি যোগাযোগ বিভাগ।

টেমপ্লেট ডাউনলোড করুন (6 উইজেট, এক জিপ)

gsap-animation-elementor-widgets.zip ডাউনলোড করুন সমস্ত ছয়টি উইজেট JSON ফাইল, বিনামূল্যে, কোন ইমেল গেট নেই।

আপনি শুরু করার আগে একটি নোট: মাস্টার অ্যাডনসের বিনামূল্যের সংস্করণটি একটি সীমিত উইজেট বিল্ডারকে প্রেরণ করে এবং এই উইজেটগুলির ব্যবহার সম্পূর্ণ বৈশিষ্ট্য সেটের সাথে আসে মাস্টার অ্যাডনস প্রো. আমদানি করতে:

1. ডাউনলোডটি আনজিপ করুন যদি আপনি ছয়টি JSON ফাইল দেখতে পাবেন, প্রতি বিভাগে একটি
2. যাও মাস্টার অ্যাডঅন → উইজেট নির্মাতা আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে
3. ক্লিক করুন আমদানি, একটি JSON ফাইল চয়ন করুন, এবং নিশ্চিত করুন
4. আপনি যে বিভাগগুলি চান তার জন্য পুনরাবৃত্তি করুন (আপনার ছয়টি প্রয়োজন নেই)
5. Elementor দিয়ে যেকোনো পৃষ্ঠা খুলুন এবং মাস্টার অ্যাডঅন বিভাগ থেকে উইজেটগুলি টেনে আনুন

আমদানির পরে সবকিছু সম্পাদনাযোগ্য: ছয়টি উইজেট জুড়ে 88টি নিয়ন্ত্রণ, প্রতিটি রঙ, প্রতিটি শিরোনাম, প্রতিটি লিঙ্ক। আপলোড করার জন্য কোন ছবি নেই। সমস্ত ভিজ্যুয়াল হল CSS এবং SVG, যা পুরো টেমপ্লেটটিকে 200KB-এর অধীনে রাখে।

এআই অ্যাঙ্গেল: যেকোনো জেনারেটেড ডিজাইনকে এলিমেন্টরে রূপান্তর করুন

এআই টুল এখন সত্যিকারের ভালো জিএসএপি কোড লেখে। GSAP স্প্লিট-টেক্সট রিভিল, ডার্ক ব্যাকগ্রাউন্ড, স্ক্রোল প্যারালাক্স" সহ একটি হিরো সেকশনের জন্য ChatGPT বা Claude কে জিজ্ঞাসা করুন এবং আপনি একটি প্রতিক্রিয়ায় HTML, CSS এবং JS কাজ করতে পারবেন। সমস্যাটি সর্বদা শেষ মাইল ছিল: সেই কোডটি একটি স্ট্যাটিক ফাইল হিসাবে আটকে ছিল, এলিমেন্টরে সম্পাদনা করা ক্লায়েন্টের কাছে অকেজো।

উইজেট নির্মাতা সেই শেষ মাইল। একটি প্রম্পট প্যাটার্ন যা ভাল কাজ করে:

Build a [section type] with GSAP animation.
Requirements:
- Wrap everything in one unique class, prefix all selectors with it
- Load gsap from cdn.jsdelivr.net/npm/gsap@3.15 via injected script tags
- Put editable text in {{token}} placeholders
- Define brand colors as CSS variables on the wrapper

সামনে সেই চারটি সীমাবদ্ধতার জন্য জিজ্ঞাসা করুন এবং আউটপুট প্রায় অপরিবর্তিত উইজেট বিল্ডারে নেমে যায়। আমি এখনও প্রথমে এটি একটি ফ্ল্যাট HTML ফাইল হিসাবে পরীক্ষা করব। AI কোড সাধারণত কাজ করে, কিন্তু “সাধারণত” এমন একটি শব্দ নয় যা আপনি একটি ক্লায়েন্টের লাইভ পৃষ্ঠার মধ্যে আবিষ্কার করতে চান।

কর্মক্ষমতা: GSAP অ্যানিমেশন দ্রুত রাখুন

• লাইব্রেরি একবার লোড করুন। ধাপ 5 থেকে সুরক্ষিত স্ক্রিপ্ট আইডিগুলি একাধিক উইজেট জুড়ে এটি স্বয়ংক্রিয়ভাবে পরিচালনা করে।
• অ্যানিমেট রূপান্তর এবং অস্বচ্ছতা, প্রস্থ/উচ্চতা/উপর/বাম নয়। GSAP ডিফল্টরূপে এটি করে x, y, এবং scale ব্রাউজার কম্পোজিটর রিফ্লো ছাড়াই তাদের পরিচালনা করে।
• সম্মান পছন্দ-হ্রাস-গতি। টেমপ্লেটের প্রতিটি উইজেট এটি পরীক্ষা করে এবং স্ট্যাটিক সামগ্রী পরিবেশন করে। অ্যাক্সেসযোগ্যতা, কিন্তু ব্যাটারি জীবন।
• মোট খরচ ছোট। GSAP কোর + ScrollTrigger + SplitText মোটামুটি 90KB মিনিফাইড, বেশিরভাগ একক হিরো ছবির চেয়ে কম। টেমপ্লেটটিকে চর্বিহীন পৃষ্ঠাগুলির সাথে যুক্ত করুন এবং আপনি আরামে কোর ওয়েব ভাইটালগুলি পাস করবেন; আমাদের অ্যানিমেশন প্রভাব নির্দেশিকা বিস্তৃত গতির ছবি কভার করে।

যদি GSAP আপনার প্রয়োজনের চেয়ে বেশি মনে করে, মাস্টার অ্যাডনসও বাক্সের বাইরে নো-কোড মোশন পাঠায় প্রবেশদ্বার অ্যানিমেশন, ভাসমান প্রভাব, এবং অ্যানিমেশন সিস্টেম শূন্য সেটআপ সহ। GSAP হল যখন প্রিসেটগুলি যথেষ্ট হওয়া বন্ধ করে।

ভিডিও টিউটোরিয়াল নির্দেশিকা

হয়তো আপনি পড়তে পছন্দ করেন না, তাই আমি আপনার এলিমেন্টর এডিটরে GSAP অ্যানিমেশন দিয়ে উইজেটটি কীভাবে ডাউনলোড এবং ইনস্টল করবেন সে সম্পর্কে আপনার জন্য একটি ভিডিও তৈরি করি।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

টেমপ্লেট দিয়ে শুরু করুন, তারপর নিজের তৈরি করুন

ছয়টি উইজেট আমদানি করুন, সেগুলি ভেঙে ফেলুন, পুনর্নির্মাণ করুন। উইজেট বিল্ডার বোঝার দ্রুততম উপায় হল আমদানির পরে হিরো উইজেটটি খুলুন এবং দেখুন কিভাবে 19 তার HTML ট্যাবে টোকেনগুলিতে মানচিত্র নিয়ন্ত্রণ করে। এর পরে, প্রতিটি কোডপেন আপনি বুকমার্ক করেন এবং প্রতিটি AI-উত্পাদিত বিভাগ একটি উইজেট প্রার্থী হয়ে ওঠে।

মাস্টার অ্যাডঅনগুলি 30,000+ ওয়ার্ডপ্রেস সাইটে চলে এবং প্রো সংস্করণ সহ সম্পূর্ণ উইজেট বিল্ডার জাহাজে চলে। এ অন্তর্ভুক্ত সবকিছু দেখুন উইজেট এবং এক্সটেনশন পৃষ্ঠা, উপরের টেমপ্লেটটি ডাউনলোড করুন এবং আপনার প্রথম কাস্টম GSAP উইজেট আজ লাইভ হতে পারে।