<?xml version="1.0"?>
<rss version="2.0"><channel><title><![CDATA[Jobs & Freelance Latest Topics]]></title><link>https://gsap.com/community/forums/forum/15-jobs-freelance/</link><description><![CDATA[Jobs & Freelance Latest Topics]]></description><language>en</language><item><title><![CDATA[Hiring: Mexico City / MX — Creative Technologist for AI-Assisted Creative Production, GSAP & DCO]]></title><link>https://gsap.com/community/forums/topic/45485-hiring-mexico-city-mx-%E2%80%94-creative-technologist-for-ai-assisted-creative-production-gsap-dco/</link><description><![CDATA[<p>
	Hi GSAP community,
</p>

<p>
	 
</p>

<p>
	We’re looking for a Mexico-based Creative Technologist to join our production team. Mexico City is preferred. This is not a remote role.
</p>

<p>
	This full-time role sits between GSAP/front-end animation, HTML5 display production, DCO, creative automation and AI-assisted workflow strategy.
</p>

<p>
	 
</p>

<p>
	We’re looking for someone who can translate Figma / After Effects / campaign creative into lightweight HTML5 assets, but also help us improve how creative production works at scale using templates, data, automation, AI tools and QA systems.
</p>

<p>
	 
</p>

<p>
	The work includes:
</p>

<ul>
	<li>
		HTML5 animated display banners
	</li>
	<li>
		GSAP / JavaScript animation
	</li>
	<li>
		Multi-size campaign adaptations
	</li>
	<li>
		Paid social and display production
	</li>
	<li>
		DCO-style templates and variant workflows
	</li>
	<li>
		AI-assisted concepting, asset generation, production planning and QA
	</li>
	<li>
		Internal tools, scripts, prompts or playbooks to make production faster and more reliable
	</li>
</ul>

<p>
	 
</p>

<p>
	This is not just a banner developer role, and not just an AI prompt role. We need someone who understands craft, constraints and systems.
</p>

<p>
	 
</p>

<p>
	Useful skills:
</p>

<ul>
	<li>
		HTML, CSS, JavaScript
	</li>
	<li>
		GSAP
	</li>
	<li>
		Figma / After Effects to code
	</li>
	<li>
		Performance and browser testing
	</li>
	<li>
		Reusable templates and scalable production thinking
	</li>
	<li>
		AI tools such as Claude, ChatGPT, Gemini, ComfyUI, Runway, Midjourney, n8n or similar
	</li>
	<li>
		Interest in DCO, DPA, feeds, JSON, spreadsheets, product data or creative automation
	</li>
</ul>

<p>
	 
</p>

<p>
	Nice to have:
</p>

<ul>
	<li>
		HTML5 banner / rich media experience
	</li>
	<li>
		Google Studio, Campaign Manager, DV360 or programmatic creative experience
	</li>
	<li>
		Node or Python scripting
	</li>
	<li>
		Vue / React / Vite
	</li>
	<li>
		WebGL / Three.js / Canvas / SVG animation
	</li>
	<li>
		Agentic workflow, RAG, MCP or automation experience
	</li>
</ul>

<p>
	 
</p>

<p>
	Important:<br />
	Some work is innovative and strategic. Some work is constrained, repetitive and QA-heavy. We need someone who is interested in improving production systems, not someone who only wants experimental creative work.
</p>

<p>
	 
</p>

<p>
	English does not need to be perfect, but you must be able to explain ideas, decisions and blockers clearly to an international internal team.
</p>

<p>
	 
</p>

<p>
	To apply, please send:
</p>

<ol>
	<li>
		Portfolio
	</li>
	<li>
		GitHub/code samples if available
	</li>
	<li>
		A short note on your GSAP/front-end animation experience
	</li>
	<li>
		A short note on your AI workflow experience
	</li>
	<li>
		Any experience with banners, rich media, DCO or campaign production
	</li>
	<li>
		Location in Mexico – Please note this is <strong>not</strong> a <u>remote</u> role.
	</li>
</ol>

<p>
	 
</p>

<p>
	Optional but very helpful:
</p>

<p>
	 
</p>

<p>
	Please answer one of the following:
</p>

<ol>
	<li>
		If you had to build one animated 300x250 banner and then adapt it into five more sizes and twenty copy/product variants, how would you structure the work so it does not become a manual mess?
	</li>
	<li>
		Describe an AI-assisted creative workflow you would design for taking a campaign brief through to multiple social/display assets. Where would AI help, where would you keep human review, and how would you QA the output?
	</li>
	<li>
		A client says, “Can’t AI just make all the assets automatically?” How would you explain the real workflow, risks and quality-control steps?
	</li>
</ol>

<p>
	 
</p>

<p>
	Thanks!
</p>
]]></description><guid isPermaLink="false">45485</guid><pubDate>Mon, 06 Jul 2026 08:54:41 +0000</pubDate></item><item><title><![CDATA[Hiring: Technical Lead – Creative Production, AI & Automation - Fixed Term (6 months)]]></title><link>https://gsap.com/community/forums/topic/45486-hiring-technical-lead-%E2%80%93-creative-production-ai-automation-fixed-term-6-months/</link><description><![CDATA[<p>
	Hola GSAP Community!
</p>

<p>
	 
</p>

<p>
	<strong>Location:</strong> Remote (Mexico, EMEA or India)
</p>

<p>
	<strong>Contract:</strong> Fixed Term – 6 Months (Potential Extension)
</p>

<p>
	 
</p>

<h2>
	About the Role
</h2>

<p>
	We're looking for an experienced <strong>Technical Lead – Creative Production, AI &amp; Automation</strong> to join our global Creative Production team.
</p>

<p>
	This is a hands-on leadership role for someone who enjoys building, mentoring and exploring emerging technology in equal measure. Approximately <strong>50% of your time will be spent leading people and technical direction</strong>, with the remaining <strong>50% focused on hands-on crafting, creative technology and workflow development</strong>.
</p>

<p>
	You'll work closely with Creative Technologists, Designers, Producers and Product teams across multiple markets, helping deliver high-quality HTML5 display and social advertising while shaping how AI and automation are adopted within our creative production workflows.
</p>

<p>
	You'll be responsible for developing the technical capability of our teams worldwide, mentoring engineers, supporting designers in understanding modern AI workflows, and ensuring technical decisions are grounded in practical engineering rather than hype.
</p>

<p>
	 
</p>

<p>
	This role is based in London, but is open to remote candidates who are comfortable supporting a globally distributed Creative Production team. We welcome applications from candidates based in Mexico, EMEA or India who are comfortable collaborating across multiple time zones. Flexibility to overlap with both European and American working hours is important.
</p>

<p>
	 
</p>

<hr />
<h1>
	What You'll Do
</h1>

<h2>
	Technical Leadership
</h2>

<ul>
	<li>
		<p>
			Lead and mentor Creative Technologists worldwide.
		</p>
	</li>
	<li>
		<p>
			Coach creative developers and technologists in design, animation, software engineering and creative technology best practices.
		</p>
	</li>
	<li>
		<p>
			Support career development through regular mentoring, code reviews and technical guidance.
		</p>
	</li>
	<li>
		<p>
			Foster a culture of experimentation, learning and continuous improvement.
		</p>
	</li>
	<li>
		<p>
			Help remove technical blockers across production teams.
		</p>
	</li>
	<li>
		<p>
			Collaborate with Production Directors and Creative Leads to improve technical delivery.
		</p>
	</li>
	<li>
		<p>
			Raise standards across the wider Creative Production organisation.
		</p>
	</li>
	<li>
		<p>
			Provide regular updates to senior leadership on the Creative Technology roadmap, AI initiatives and innovation opportunities, helping shape strategic investment and technical direction.
		</p>
	</li>
</ul>

<hr />
<h2>
	 
</h2>

<h2>
	AI Strategy &amp; Technical Enablement
</h2>

<p>
	AI is becoming an increasingly important part of creative production. Your role will be to help the organisation understand how these technologies actually work and where they provide genuine value.
</p>

<p>
	You'll help translate emerging AI capabilities into practical creative workflows.
</p>

<p>
	Responsibilities include:
</p>

<ul>
	<li>
		<p>
			Mentor teams in modern AI-assisted workflows.
		</p>
	</li>
	<li>
		<p>
			Help designers and producers understand AI capabilities and limitations.
		</p>
	</li>
	<li>
		<p>
			Evaluate new AI products and platforms with a technical mindset.
		</p>
	</li>
	<li>
		<p>
			Distinguish genuine technical capability from marketing terminology.
		</p>
	</li>
	<li>
		<p>
			Build proof-of-concepts demonstrating new approaches.
		</p>
	</li>
	<li>
		<p>
			Introduce practical workflow automation where appropriate.
		</p>
	</li>
	<li>
		<p>
			Champion responsible adoption of AI across Creative Production.
		</p>
	</li>
	<li>
		<p>
			Share knowledge through documentation, workshops and demonstrations.
		</p>
	</li>
</ul>

<p>
	Topics may include:
</p>

<ul>
	<li>
		<p>
			Large Language Models (LLMs)
		</p>
	</li>
	<li>
		<p>
			Agentic workflows
		</p>
	</li>
	<li>
		<p>
			AI orchestration
		</p>
	</li>
	<li>
		<p>
			MCPs (Model Context Protocol)
		</p>
	</li>
	<li>
		<p>
			Workflow automation
		</p>
	</li>
	<li>
		<p>
			Image and video generation
		</p>
	</li>
	<li>
		<p>
			AI-assisted development
		</p>
	</li>
	<li>
		<p>
			Creative production automation
		</p>
	</li>
</ul>

<h2>
	Strategic Responsibilities
</h2>

<ul>
	<li>
		Define and evolve the technical roadmap for Creative Production in partnership with Production leadership.
	</li>
	<li>
		Identify opportunities to improve quality, efficiency and scalability through engineering and automation.
	</li>
	<li>
		Evaluate emerging technologies and recommend practical adoption where they deliver measurable value.
	</li>
	<li>
		Champion engineering best practices across creative production.
	</li>
	<li>
		Help shape the future of AI-assisted creative workflows.
	</li>
</ul>

<hr />
<h2>
	 
</h2>

<h2>
	Hands-on Creative Development
</h2>

<p>
	You'll remain an active contributor within the Creative Production team.
</p>

<p>
	Responsibilities include:
</p>

<ul>
	<li>
		<p>
			Build premium HTML5 display advertising.
		</p>
	</li>
	<li>
		<p>
			Develop reusable GSAP animation systems.
		</p>
	</li>
	<li>
		<p>
			Run automation systems for social advertising
		</p>
	</li>
	<li>
		<p>
			Build internal production tooling.
		</p>
	</li>
	<li>
		<p>
			Improve creative production workflows.
		</p>
	</li>
	<li>
		<p>
			Develop small applications and utilities using modern web technologies.
		</p>
	</li>
	<li>
		<p>
			Prototype AI-enabled production workflows.
		</p>
	</li>
	<li>
		<p>
			Debug complex technical production issues.
		</p>
	</li>
	<li>
		<p>
			Contribute to architectural decisions for internal tooling.
		</p>
	</li>
</ul>

<hr />
<h1>
	What We're Looking For
</h1>

<h2>
	Essential Experience
</h2>

<ul>
	<li>
		<strong>5+ years working within a creative, digital or advertising agency environment.</strong>
	</li>
	<li>
		Experience delivering HTML5 display advertising campaigns for global brands.
	</li>
	<li>
		Strong understanding of creative production workflows and agency delivery models.
	</li>
	<li>
		Experience collaborating with Creative, Production, Media and Client Services teams.
	</li>
	<li>
		Familiarity with campaign timelines, localisation workflows, QA processes and ad serving requirements.
	</li>
</ul>

<h2>
	Essential Skills
</h2>

<ul>
	<li>
		<p>
			Strong HTML5, CSS and modern JavaScript.
		</p>
	</li>
	<li>
		<p>
			Excellent GSAP animation experience.
		</p>
	</li>
	<li>
		<p>
			Experience developing HTML5 display advertising.
		</p>
	</li>
	<li>
		<p>
			Experience with social advertising at scale
		</p>
	</li>
	<li>
		<p>
			Strong understanding of browser technologies.
		</p>
	</li>
	<li>
		<p>
			Experience with Git.
		</p>
	</li>
	<li>
		<p>
			Modern front-end development practices.
		</p>
	</li>
	<li>
		<p>
			Ability to mentor junior creative developers and technologists.
		</p>
	</li>
	<li>
		<p>
			Excellent communication skills.
		</p>
	</li>
	<li>
		<p>
			Comfortable working across distributed international teams.
		</p>
	</li>
</ul>

<hr />
<h2>
	Desirable Experience
</h2>

<ul>
	<li>
		<p>
			Creative Pipelines.
		</p>
	</li>
	<li>
		<p>
			Python.
		</p>
	</li>
	<li>
		<p>
			Google Cloud Platform.
		</p>
	</li>
	<li>
		<p>
			Dynamic Creative.
		</p>
	</li>
	<li>
		<p>
			CM360 / DV360.
		</p>
	</li>
	<li>
		<p>
			Feed-driven creative production.
		</p>
	</li>
	<li>
		<p>
			Creative automation.
		</p>
	</li>
	<li>
		<p>
			Internal tooling development.
		</p>
	</li>
</ul>

<hr />
<h1>
	AI Experience
</h1>

<p>
	We're looking for someone who understands AI as an engineering capability rather than simply a collection of tools.
</p>

<p>
	Experience might include:
</p>

<ul>
	<li>
		<p>
			AI-assisted software development.
		</p>
	</li>
	<li>
		<p>
			Workflow automation.
		</p>
	</li>
	<li>
		<p>
			LLM APIs.
		</p>
	</li>
	<li>
		<p>
			Prompt engineering.
		</p>
	</li>
	<li>
		<p>
			Retrieval-Augmented Generation (RAG).
		</p>
	</li>
	<li>
		<p>
			AI agents.
		</p>
	</li>
	<li>
		<p>
			Multi-agent orchestration.
		</p>
	</li>
	<li>
		<p>
			Model evaluation.
		</p>
	</li>
	<li>
		<p>
			Image generation workflows.
		</p>
	</li>
	<li>
		<p>
			Human-in-the-loop creative systems.
		</p>
	</li>
</ul>

<p>
	You don't need to be an AI researcher, but you should be curious, technically grounded and excited by applying emerging technologies to real production challenges.
</p>

<hr />
<h1>
	What Success Looks Like
</h1>

<p>
	By the end of the contract, you will have:
</p>

<ul>
	<li>
		<p>
			Developed the technical capability of our Creative Technology teams.
		</p>
	</li>
	<li>
		<p>
			Helped establish practical AI workflows across Creative Production.
		</p>
	</li>
	<li>
		<p>
			Improved production efficiency through automation.
		</p>
	</li>
	<li>
		<p>
			Delivered high-quality display and social campaigns.
		</p>
	</li>
	<li>
		<p>
			Built reusable internal tools.
		</p>
	</li>
	<li>
		<p>
			Left behind documentation, processes and knowledge that continue to benefit the wider organisation.
		</p>
	</li>
</ul>

<hr />
<h1>
	You'll Thrive Here If You...
</h1>

<ul>
	<li>
		<p>
			Enjoy mentoring as much as writing code.
		</p>
	</li>
	<li>
		<p>
			Like simplifying complex technical concepts.
		</p>
	</li>
	<li>
		<p>
			Stay curious about emerging technologies.
		</p>
	</li>
	<li>
		<p>
			Build pragmatic solutions rather than chasing trends.
		</p>
	</li>
	<li>
		<p>
			Care about quality and maintainability.
		</p>
	</li>
	<li>
		<p>
			Love solving production problems.
		</p>
	</li>
	<li>
		<p>
			Are equally comfortable talking to designers, developers, producers, clients and other stakeholders.
		</p>
	</li>
	<li>
		<p>
			Enjoy creating tools that make other people's jobs easier.
		</p>
	</li>
</ul>

<hr />
<h1>
	We'd Love to See
</h1>

<p>
	Please include examples of:
</p>

<ul>
	<li>
		<p>
			HTML5 display advertising
		</p>
	</li>
	<li>
		<p>
			Social advertising
		</p>
	</li>
	<li>
		<p>
			GSAP animations
		</p>
	</li>
	<li>
		<p>
			Interactive experiences
		</p>
	</li>
	<li>
		<p>
			CodePen experiments
		</p>
	</li>
	<li>
		<p>
			GitHub projects
		</p>
	</li>
	<li>
		<p>
			Internal tools you've built
		</p>
	</li>
	<li>
		<p>
			Workflow automation projects
		</p>
	</li>
	<li>
		<p>
			AI-assisted engineering work
		</p>
	</li>
</ul>

<p>
	If you've built something that improved the way a team works, we'd especially like to hear about it.
</p>

<hr />
<h1>
	About Us
</h1>

<p>
	We're building a Creative Production team that combines world-class creative development with practical AI adoption.
</p>

<p>
	We're looking for someone who can help shape the future of creative production—not by chasing every new trend, but by understanding emerging technology, applying it thoughtfully, and helping others grow alongside it.
</p>

<p>
	 
</p>
]]></description><guid isPermaLink="false">45486</guid><pubDate>Tue, 07 Jul 2026 09:26:50 +0000</pubDate></item><item><title>SplitType not working for Japanese language, since it doesn't have any word break.</title><link>https://gsap.com/community/forums/topic/45479-splittype-not-working-for-japanese-language-since-it-doesnt-have-any-word-break/</link><description><![CDATA[<p>
	I'm using SplitType animation to reveal text on scroll, when text is in English language it's working fine as text reveal on each line. but when it's Japanese, Chinese or Korean, not working as expected. since it doesn't have word break or space between characters text reveals all line at once.
</p>

<p>
	 
</p>

<p>
	here i added my code pen. 



<p data-height="450" data-slug-hash="xbKJXdg" data-user="xpmpemne-the-sans" class='codepen' data-tab-bar-color="#222" data-default-tab="html,result">
    <span>See the Pen <a href='https://codepen.io/xpmpemne-the-sans/pen/xbKJXdg'>xbKJXdg</a> by xpmpemne-the-sans (<a href='https://codepen.io/xpmpemne-the-sans'>@xpmpemne-the-sans</a>) on <a href='https://codepen.io'>CodePen</a>.</span>
</p>


</p>

<p>
	 
</p>

<p>
	I need to make animation work same as English language
</p>
]]></description><guid isPermaLink="false">45479</guid><pubDate>Thu, 25 Jun 2026 16:22:36 +0000</pubDate></item><item><title>Hiring: Senior Front-End Developer (React / Next.js / GSAP/Framer)</title><link>https://gsap.com/community/forums/topic/45464-hiring-senior-front-end-developer-react-nextjs-gsapframer/</link><description><![CDATA[<p>
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:medium;"><span>We are looking for an experienced Senior Front-End Developer to join an existing iGaming web platform.</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>Requirements</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Strong experience with React.js</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Strong experience with Next.js</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Good knowledge of GSAP animations</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Strong experience with Framer</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Strong understanding of responsive design and cross-device compatibility</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Ability to identify and fix UI/UX issues independently</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Backend experience is a plus</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>Scope of Work</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>The website is already developed. Main tasks include:</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Fixing responsive and scaling issues across different devices and screen sizes</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Implementing UI/UX improvements and visual refinements</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Modifying existing components and layouts</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Improving animations and interactions</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Fixing bugs throughout the platform</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- General front-end optimization and cleanup</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Backend bug fixing (optional but preferred)</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- You must do it for all the pages of the website</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>Budget</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>$600 - $1,000 (depending on experience and scope)</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>Hiring Process</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Applicants must provide relevant portfolio/projects.</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Communication and payments will be handled through a trusted third-party platform or middleman service for security.</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>- Direct deals will not be considered.</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>Please send:</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>1. Portfolio</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>2. Years of experience</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>3. React / Next.js projects you've worked on</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>4. GSAP examples (if available)</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>5. Estimated availability</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>Only experienced developers should apply.</span></span></span><br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<br style="background-color:#1c1c1c;color:#898989;font-size:16px;text-align:left;" />
	<span style="background-color:#1c1c1c;color:#ffffff;font-size:16px;text-align:left;"><span style="font-size:small;"><span>contact me on tg- @decaprio32</span></span></span>
</p>
]]></description><guid isPermaLink="false">45464</guid><pubDate>Tue, 02 Jun 2026 02:46:45 +0000</pubDate></item><item><title>Hiring Senior Front-End / Vue Developer for cinematic transmedia project website (Vue 3 + Firebase + GSAP)</title><link>https://gsap.com/community/forums/topic/45453-hiring-senior-front-end-vue-developer-for-cinematic-transmedia-project-website-vue-3-firebase-gsap/</link><description><![CDATA[<p>
	Hello everyone,
</p>

<p>
	 
</p>

<p>
	I’m currently looking for a senior front-end / Vue developer to help finalize and maintain the infrastructure of an existing cinematic transmedia project website currently in development.
</p>

<p>
	 
</p>

<p>
	The website is already built and functional. I’m specifically looking for someone comfortable stepping into an existing architecture and continuing development from the current base.
</p>

<p>
	 
</p>

<p>
	Current stack:<br />
	• Vue 3<br />
	• Firebase (Hosting, Auth, Firestore, Cloud Functions)<br />
	• OVH (domain + SMTP)<br />
	• GSAP animations
</p>

<p>
	 
</p>

<p>
	The website functions as a private cinematic presentation environment for selected collaborators, industry partners, and investors, and is part of a larger interconnected narrative and systems architecture.
</p>

<p>
	 
</p>

<p>
	What I’m looking for:<br />
	• Strong front-end + implementation skills<br />
	• High attention to detail<br />
	• Ability to execute existing creative direction precisely<br />
	• Comfort working with cinematic/editorial aesthetics<br />
	• Organized communication and autonomy<br />
	• Comfort navigating an English-based project environment and content structure<br />
	• Comfort signing an NDA<br />
	• Experience with premium artistic or storytelling-driven projects is highly valued
</p>

<p>
	 
</p>

<p>
	This is initially a freelance collaboration focused on finalizing and stabilizing the current website structure, with possibility for future ongoing collaboration depending on project evolution and alignment.
</p>

<p>
	 
</p>

<p>
	Remote collaboration is completely fine.<br />
	International applicants are welcome.
</p>

<p>
	 
</p>

<p>
	If interested, feel free to reach out with:<br />
	• portfolio / previous work<br />
	• relevant experience<br />
	• stack familiarity<br />
	• availability
</p>

<p>
	 
</p>

<p>
	Contact:<br />
	<a href="mailto:the33path@the33path.com" rel="">the33path@the33path.com</a>
</p>
]]></description><guid isPermaLink="false">45453</guid><pubDate>Tue, 19 May 2026 10:38:48 +0000</pubDate></item><item><title>Frontend Animator &#x2014; GSAP + ScrollTrigger for Premium Supplement DTC</title><link>https://gsap.com/community/forums/topic/45424-frontend-animator-%E2%80%94-gsap-scrolltrigger-for-premium-supplement-dtc/</link><description><![CDATA[<p>
	<span>We need a frontend animation specialist to build scroll-based storytelling <br />
	on a Shopify store (Prestige theme). Structure and sections are already <br />
	built by our Shopify dev. You ship the cinematic layer.</span>
</p>

<p>
	<span> </span>
</p>

<p>
	<span>This is NOT "add fade-in animations to a Shopify theme." This is <br />
	Apple-product-page level scroll animation, adapted for conversion.</span>
</p>

<p>
	<span> </span>
</p>

<p>
	<span>Required deliverables:<br />
	- Pinned hero section with scroll-driven narrative (Whoop / Apple AirPods <br />
	  Pro reference)<br />
	- Scroll-synced image sequence for a "capsule exploded view" (30–60 frame <br />
	  WebP sequence, scrubbed with ScrollTrigger)<br />
	- Layered parallax on hero product renders<br />
	- Smooth scroll behavior site-wide (Lenis or equivalent, mobile-safe)<br />
	- Staggered reveal system reusable across sections<br />
	- Number counter animations on social proof<br />
	- Dark-to-light section color transitions triggered on scroll</span>
</p>

<p>
	<span> </span>
</p>

<p>
	<span>Technical requirements:<br />
	- GSAP + ScrollTrigger (required — no CSS-only fallbacks for the pinned <br />
	  hero)<br />
	- Vanilla JS (no React layer on top of Shopify)<br />
	- Integrated into existing Shopify Liquid sections (not standalone pages)<br />
	- Mobile performance: Lighthouse mobile &gt; 85 AFTER animations are added<br />
	- Lazy-load for heavy assets<br />
	- Reduced-motion media query respected</span>
</p>

<p>
	<span> </span>
</p>

<p>
	<span>To apply, include:<br />
	1. Two live URLs of scroll animations you personally built (not team work). <br />
	   We will inspect the code.<br />
	2. Which parts of those sites YOU wrote vs. the team<br />
	3. Your approach to keeping pinned sections performant on mobile<br />
	4. Whether you have embedded GSAP work inside a Shopify theme before (yes <br />
	   or no — yes is preferred but no is OK if your demos are strong)<br />
	5. Fixed-price estimate for the scope above</span>
</p>

<p>
	<span> </span>
</p>

<p>
	<span>Start your proposal with: GSAP-PANS</span>
</p>

<p>
	<span> </span>
</p>

<p>
	<span>Screened out automatically:<br />
	- Cover letters without GSAP-PANS prefix<br />
	- "I can build anything" generic pitches<br />
	- Portfolios showing only WordPress sliders<br />
	- Agencies submitting on behalf of hidden developers</span>
</p>

<p>
	<span> </span>
</p>

<p>
	<span>Budget:  500 fixed, depending on scope interpretation.<br />
	Timeline: 7  day</span>
</p>
]]></description><guid isPermaLink="false">45424</guid><pubDate>Fri, 24 Apr 2026 06:50:04 +0000</pubDate></item><item><title>Hiring: Creative GSAP Front-End Developer for Premium Quiz Mini-App</title><link>https://gsap.com/community/forums/topic/45419-hiring-creative-gsap-front-end-developer-for-premium-quiz-mini-app/</link><description><![CDATA[<p>
	Hi everyone,
</p>

<p>
	We’re hiring a creative GSAP front-end developer to build a premium quiz mini-app for a DTC wellness brand.
</p>

<p>
	We want:<br />
	- a mini-app feel, not a standard form<br />
	- smooth GSAP-based motion<br />
	- strong mobile UX<br />
	- clean production-ready front-end<br />
	- someone who understands both interaction quality and conversion flow
</p>

<p>
	Please send:<br />
	- 2–3 relevant projects<br />
	- what you personally built<br />
	- your GSAP experience<br />
	- your availability<br />
	- your rate
</p>

<p>
	Bonus:<br />
	React / Next.js, onboarding flows, quiz funnels, premium wellness or DTC experience.
</p>

<p>
	Relevant work only, please.
</p>
]]></description><guid isPermaLink="false">45419</guid><pubDate>Mon, 20 Apr 2026 14:41:04 +0000</pubDate></item><item><title>Hiring_Creative Developer (remote - fulltime)</title><link>https://gsap.com/community/forums/topic/45411-hiring_creative-developer-remote-fulltime/</link><description><![CDATA[<p>
	<strong>ABOUT US</strong>
</p>

<p>
	Eskimi is a full-stack creative and media tech platform designed for brands, agencies, and publishers seeking more than just impressions. It combines a programmatic DSP, in-house creative studio, advanced audience targeting tools, customizable Media Packages, and a Monetization Suite for publishers. The platform powers attention-optimized campaigns with rich media formats and premium local inventory. Teams in over 30 countries provide on-the-ground support, offering valuable insights into local languages, cultures, and performance drivers.
</p>

<p>
	 
</p>

<p>
	Our Creative Studio is the brains and innovation behind every rich media banner that brings campaigns to life. As the team that conceptualizes and builds high‑impact banners for clients, our mission is to craft visually stunning and performance‑driven assets that truly stand out and work. This is where strategy meets creativity: by combining data and storytelling, we create banners that capture attention and deliver measurable results—from static visuals to complex interactive rich media formats optimized for client KPIs and user experience. 
</p>

<p>
	We are looking for a Creative Developer to build high-quality interactive 3D experiences for digital campaigns. <strong>This is a developer-first role focused on implementing real-time 3D experiences in the browser. You will be responsible for animation quality, interaction logic, and performance optimization.</strong>
</p>

<p>
	3D modeling knowledge is required, but modeling will not be the primary focus of the role. We may collaborate with freelance 3D artists for complex assets — your responsibility will be transforming those assets into polished, performant interactive experiences.
</p>

<p>
	 
</p>

<p>
	<strong>WHAT YOU’LL DO</strong>
</p>

<ul>
	<li>
		Develop interactive 3D experiences using Three.js or similar WebGL frameworks
	</li>
	<li>
		Design and implement animations, transitions, and interaction logic
	</li>
	<li>
		Ensure smooth performance across desktop and mobile devices
	</li>
	<li>
		Optimize rendering performance, asset loading, and memory usage
	</li>
	<li>
		Work with GLB/glTF assets and adjust materials, lighting, and scene setup as needed
	</li>
	<li>
		Collaborate with creative producers and 3D artists to translate concepts into interactive executions
	</li>
	<li>
		Contribute to improving internal real-time 3D production workflows.
	</li>
</ul>

<p>
	 
</p>

<p>
	<strong>WHAT WILL HELP YOU DO IT</strong>
</p>

<p>
	Core Requirements:
</p>

<ul>
	<li>
		Strong professional experience with JavaScript (ES6+)
	</li>
	<li>
		Hands-on experience with Three.js or similar real-time 3D frameworks
	</li>
	<li>
		Experience creating animations using GSAP
	</li>
	<li>
		Solid understanding of real-time rendering principles (scene graph, cameras, lighting, materials)
	</li>
	<li>
		Strong skills in animation and interactive experience development
	</li>
	<li>
		Ability to profile and optimize performance (FPS, memory usage, draw calls)
	</li>
	<li>
		Experience working within performance and file size constraints
	</li>
	<li>
		Professional working proficiency in English is required
	</li>
</ul>

<p>
	 
</p>

<p>
	3D / Asset Skills
</p>

<ul>
	<li>
		Working knowledge of Blender
	</li>
	<li>
		Ability to adjust 3D models, materials, UVs, and basic animations
	</li>
	<li>
		Understanding of web asset optimization (polycount, texture size, compression)
	</li>
	<li>
		Experience working with GLB / glTF asset pipelines
	</li>
</ul>

<p>
	 
</p>

<p>
	<strong>WHAT’S IN IT FOR YOU</strong>
</p>

<ul>
	<li>
		Flexible work arrangements: Hybrid work models in cities with physical offices, and remote work options everywhere else. With our hybrid model, Eskimians enjoy Work Away Days—up to one month of fully remote work each year—and flexible schedules, typically beginning the day at 9 a.m. locally.
	</li>
	<li>
		Professional development opportunities: Grow with programs like Leaders Assembly for managers, mentorship programs for growing talents, regular learning sessions, and access to external consultants. Our internship programs also serve as stepping stones for career starters, often leading to full-time roles within the team.
	</li>
	<li>
		Recognition &amp; rewards: Your efforts matter, so we reward contributions with bonus programs and Bonusly, our peer-to-peer recognition system that turns appreciation into points for gifts and vouchers.
	</li>
	<li>
		Additional perks: Private health insurance (location-dependent), volunteer days, and team get-togethers both online and in-person to foster meaningful connections in Eskimi.
	</li>
	<li>
		Take a day off to celebrate your birthday! Everyone deserves to unwind and enjoy their special day, so we provide an extra day off just for your birthday.
	</li>
</ul>

<p>
	<strong>JOIN US!</strong>
</p>

<p>
	Be a part of a fast-growing adtech company and work with products that change the landscape of digital advertising around the globe. Let's grow together! With us, not even the sky's the limit. Apply or reach out to egle.jakuciune@eskimi.com and let’s chat.
</p>
]]></description><guid isPermaLink="false">45411</guid><pubDate>Wed, 15 Apr 2026 06:19:33 +0000</pubDate></item><item><title>Hiring Senior Front-end Developer (NL Based) - Merlin Studio</title><link>https://gsap.com/community/forums/topic/45407-hiring-senior-front-end-developer-nl-based-merlin-studio/</link><description><![CDATA[<div style="color:#1d1c1d;padding:0;">
	<span style="color:#ecf0f1;">Hi there! We're <a href="https://merlin.studio" rel="external nofollow">Merlin — a Code Boutique</a> that helps extraordinary brands prove what's possible through digital craft. We build high-end digital experiences where design, motion and the latest web tech come together, partnering closely with agencies, design studios and in-house teams to bring ambitious ideas to life. (See what we mean at merlin.studio/work).<br />
	<br />
	We're a team of five based in Amsterdam, and we're looking for a sixth.<br />
	<br />
	We're looking for someone with at least 5 years of experience at a creative agency or studio. Motion, detail and accessibility should be things you naturally pay attention to and not treat as afterthoughts.<br />
	<br />
	A typical week looks like this. You're building immersive experiences, working directly with clients and collaborating closely with our designers. You're making architecture decisions, solving problems that don't have obvious answers, and sharing what you learn with the rest of the team.<br />
	<br />
	As a senior, you'll help shape the way we craft. You'll guide the team, share tricks and tricks, and help set the bar for quality and implementation.<br />
	<br />
	Our stack, roughly:</span>
</div>

<ul style="padding:0;">
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">React (NextJS)</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">SvelteKit</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">TypeScript</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">PostCSS and CSS Modules</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">GSAP</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">Framer Motion</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">Headless CMS (usually Dato)</span>
	</li>
</ul>

<div style="color:#1d1c1d;padding:0;">
	<br />
	<br />
	<span style="color:#ecf0f1;">A few things we care about:</span>
</div>

<ul style="padding:0;">
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">High-quality work and obsessive attention to detail</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">Being great to work with</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">Learning and improving</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">Proving what's possible</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">Honesty, openness and kindness</span>
	</li>
</ul>

<div style="color:#1d1c1d;padding:0;">
	<br />
	<br />
	<span style="color:#ecf0f1;">We're based in Amsterdam. Working from home is completely fine, you don't need to be in the office every day, but being based in the Netherlands is a must.<br />
	<br />
	Salary range is €3.400 to €4.600+, depending on experience.<br />
	<br />
	A few practical perks:</span>
</div>

<ul style="padding:0;">
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">Pension</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">Travel costs covered</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">28 vacation days (based on 40 hours)</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">Occasional conferences and team outings</span>
	</li>
	<li style="color:#1d1c1d;padding:0;">
		<span style="color:#ecf0f1;">Good lunch at the office</span>
	</li>
</ul>

<div style="color:#1d1c1d;padding:0;">
	<br />
	<br />
	<span style="color:#ecf0f1;">Interested? Reach out to </span><span><a href="mailto:hiring@merlin.studio" rel="" style="color:#1264a3;"><span style="color:#ecf0f1;">hiring@merlin.studio</span></a></span><span style="color:#ecf0f1;"> with your portfolio, a project you're proud of and what you'd like to learn or improve in the next two years.</span>
</div>
]]></description><guid isPermaLink="false">45407</guid><pubDate>Tue, 07 Apr 2026 15:28:51 +0000</pubDate></item><item><title>Two animation required in my Reactjs Project</title><link>https://gsap.com/community/forums/topic/45320-two-animation-required-in-my-reactjs-project/</link><description><![CDATA[<p>
	Hi Everyone,<br />
	<br />
	Its a paid task, I need this on urgent bases probably till tomorrow, I want two animations in my Reactjs projject.<br />
	One is Blue Hero Banner that give waves effect and ripple wave effect on mouse interaction. <br />
	Reference example <a href="https://www.chooseplasticfreewipes.com/" rel="external nofollow">https://www.chooseplasticfreewipes.com/</a> <br />
	<br />
	Second animation is 3D Text Slider example that change it text onscroll. I am rferening WHAT, HOW, WHERE section, Only need text slider animation.<br />
	Reference Example <a href="https://immersive.altitude101.com/" rel="external nofollow">https://immersive.altitude101.com/</a>
</p>

<p>
	<br />
	Whatsapp me for more details.
</p>

<p>
	 
</p>

<p>
	<a href="https://immersive.altitude101.com/" rel="external nofollow">Best of Luck </a><br />
	 
</p>
]]></description><guid isPermaLink="false">45320</guid><pubDate>Tue, 27 Jan 2026 13:39:52 +0000</pubDate></item><item><title>ScrollTrigger between multiple sections with animated SVG layers</title><link>https://gsap.com/community/forums/topic/45296-scrolltrigger-between-multiple-sections-with-animated-svg-layers/</link><description><![CDATA[<p>
	Hi,<br />
	 
</p>

<p>
	I’m building a scroll-driven “scene to scene” experience using <strong>GSAP + ScrollTrigger</strong> with <strong>layered SVGs</strong>. Current demo:<br />
	



<p data-height="450" data-slug-hash="xbOOjQq" data-user="nrDEV" class='codepen' data-tab-bar-color="#222" data-default-tab="html,result">
    <span>See the Pen <a href='https://codepen.io/nrDEV/pen/xbOOjQq'>xbOOjQq</a> by nrDEV (<a href='https://codepen.io/nrDEV'>@nrDEV</a>) on <a href='https://codepen.io'>CodePen</a>.</span>
</p>

 (best viewed in Full Page)<br />
	 
</p>

<p>
	<strong>Goal / What I need</strong>
</p>

<p>
	I already have Hero to City working, but I’m stuck on the next transition.<br />
	<br />
	City should be pinned and its layers to move down while Scene3 layers animate in from underneath (similar to the Hero to City handoff).<br />
	Scene3 layers are selected via data-name, e.g. layer4, layer3, layer2, duiker, stream, fish, layer1.<br />
	 
</p>

<p>
	<strong>Deliverable</strong>
</p>

<ul>
	<li>
		a small patch / PR in the CodePen (or StackBlitz) that makes City → Scene3 work, or
	</li>
	<li>
		No need for perfect responsive/mobile polish,  just a working baseline with clean code.
	</li>
</ul>

<p>
	<strong>Timeline</strong>
</p>

<p>
	Start: Whenever possible<br />
	Target: ideally within 1–3 days (flexible)<br />
	 
</p>

<p>
	<strong>Budget</strong>
</p>

<p>
	€50–€100<br />
	<br />
	If needed I can prep a minimal StackBlitz with only the 3 SVGs + transition code if you prefer.
</p>

<p>
	 
</p>
]]></description><guid isPermaLink="false">45296</guid><pubDate>Wed, 14 Jan 2026 13:25:27 +0000</pubDate></item><item><title>Creative Landing Page Designer (3D / Motion-Driven, Three.js Collaboration)</title><link>https://gsap.com/community/forums/topic/45309-creative-landing-page-designer-3d-motion-driven-threejs-collaboration/</link><description><![CDATA[<p>
	We’re looking for a high-level designer to collaborate on a single, standout landing page for a growing platform. This is not a generic web redesign. The goal is to create a visually striking, modern landing experience that communicates the product clearly while feeling futuristic, clean, and emotionally engaging. The landing page will serve as the core brand touchpoint, so we’re aiming for quality, clarity, and originality—without overloading the page or hurting performance.
</p>

<p>
	Project Scope<br />
	 -Design one main page<br />
	 - Focus on strong visual storytelling through layout, typography, color, and motion<br />
	 - Collaborate closely on the concept and creative direction<br />
	 - Balance creative impact with fast load times<br />
	 - Help define a distinct visual identity that can scale into future brand materials
</p>

<p>
	If you love crafting memorable first impressions and want to help shape a brand’s visual direction from the ground up, this project will be a great fit. Thank you.
</p>
]]></description><guid isPermaLink="false">45309</guid><pubDate>Wed, 21 Jan 2026 09:10:43 +0000</pubDate></item><item><title>&#x2B50;Creative frontend developer available for projects (folio in GSAP showcase)</title><link>https://gsap.com/community/forums/topic/45306-%E2%AD%90creative-frontend-developer-available-for-projects-folio-in-gsap-showcase/</link><description><![CDATA[<div style="color:#333333;font-size:small;">
	<span style="color:#dddddd;"><span style="font-size:16px;">Hello fellow GSAP users,</span></span>
</div>

<div dir="ltr">
	<div>
		<div>
			<div dir="ltr">
				<div>
					<br />
					<span style="color:#dddddd;"><span style="font-size:16px;">I am a Swedish frontend developer with two decades experience within Frontend, from gaming, learning, to UI/UX development.</span></span>
				</div>

				<div>
					<span style="font-size:16px;"><span style="color:#dddddd;">View my portfolio @ </span><a href="https://www.thomasthorstensson.com" rel="external nofollow"><span style="color:#dddddd;">https://www.thomasthorstensson.com</span></a><span style="color:#dddddd;"> </span></span>
				</div>

				<div>
					<span style="font-size:16px;"><span style="color:#dddddd;">View my green web project @ </span><a href="https://co2audit.app" rel="external nofollow"><span style="color:#dddddd;">https://co2audit.app</span></a></span>
				</div>

				<div>
					<br />
					<span style="color:#dddddd;"><span style="font-size:16px;"><span class="ipsEmoji">🛠️</span>What I offer:</span></span>
				</div>

				<ul>
					<li>
						<span style="color:#dddddd;"><span style="font-size:16px;">High-end Micro-interactions: Smooth, performance-focused animations.</span></span>
					</li>
					<li>
						<span style="color:#dddddd;"><span style="font-size:16px;">WebGL Expertise: Interactive 3D experiences using Three.js, PixiJS, and CurtainsJS.</span></span>
					</li>
					<li>
						<span style="color:#dddddd;"><span style="font-size:16px;">Full-stack Delivery: Modern frontends (Vue/React) integrated with CMS and deployment.</span></span>
					</li>
				</ul>

				<div>
					<span style="color:#dddddd;"><span style="font-size:16px;"><span class="ipsEmoji">⭐</span> I know the entire GSAP suite—not just ScrollTrigger, but Draggable, Flip, SplitText, and so on.</span></span>
				</div>

				<div>
					 
				</div>

				<div>
					<span style="color:#dddddd;"><span style="font-size:16px;"><span class="ipsEmoji">🧪</span> Recent Labs</span></span>
				</div>

				<div>
					<p>
						<span style="font-size:16px;"><span style="color:#dddddd;">---<br />
						<em>Motion.dev (Framer Motion)</em></span><br />
						<a href="https://atictactoe.vercel.app/" rel="external nofollow"><span style="color:#dddddd;">https://atictactoe.vercel.app/</span></a><br />
						<span style="color:#dddddd;"><em>WebGL / Three.js / Web Audio API</em></span><br />
						<a href="https://mpthree-beta.vercel.app/" rel="external nofollow"><span style="color:#dddddd;">https://mpthree-beta.vercel.app/</span></a></span>
					</p>

					<p>
						<span style="font-size:16px;"><span style="color:#dddddd;"><em>MapboxGL / Dynamic Data</em></span><br />
						<a href="https://palestine-awareness.thomasthorstensson.com/" rel="external nofollow"><span style="color:#dddddd;">https://palestine-awareness.thomasthorstensson.com/</span></a></span>
					</p>

					<p>
						<span style="font-size:16px;"><span style="color:#dddddd;"><em>WebGL / Curtains.js / NASA API</em></span><br />
						<a href="https://github.com/thorstensson/nasa-apod" rel="external nofollow"><span style="color:#dddddd;">https://github.com/thorstensson/nasa-apod</span></a></span>
					</p>
				</div>

				<div>
					<br />
					<span style="color:#dddddd;"><span style="font-size:16px;">I’m currently open to new collaborations and projects. Feel free to reach out anytime to discuss how we can bring your ideas to life!</span></span>
				</div>

				<div>
					<br />
					<span style="color:#dddddd;"><span style="font-size:16px;">Take care, <span class="ipsEmoji">🧦</span><br />
					Thomas</span></span>
				</div>
			</div>
		</div>
	</div>
</div>
]]></description><guid isPermaLink="false">45306</guid><pubDate>Tue, 20 Jan 2026 17:34:12 +0000</pubDate></item><item><title>Animated Website Intro Developer - 5 Day Turnaround</title><link>https://gsap.com/community/forums/topic/45287-animated-website-intro-developer-5-day-turnaround/</link><description><![CDATA[<div>
	<h1>
		Position Overview
	</h1>

	<p>
		We are seeking an experienced animator/developer to create a dynamic 6-second animated intro for our website. This is a fast-turnaround contract position with clear deliverables and timeline.
	</p>

	<h2>
		Project Details
	</h2>

	<p>
		<strong>Animation Specifications:</strong>
	</p>

	<ul>
		<li>
			6-second animated intro sequence positioned at the top of our website
		</li>
		<li>
			Incorporates text, images, and visual effects
		</li>
		<li>
			Final text element scales down (gets smaller)
		</li>
		<li>
			Concludes with interactive dial-style tabs appearing for user selection
		</li>
		<li>
			Serves as gateway to site navigation (site loading based on selection is handled separately - not part of this role)
		</li>
	</ul>

	<p>
		<strong>Timeline:</strong>
	</p>

	<ul>
		<li>
			Creative direction will be finalized by Tuesday of next week
		</li>
		<li>
			Upon approval ("Go" signal), animation must be completed within 5 days or less
		</li>
		<li>
			Total project duration: 5 business days from approval
		</li>
	</ul>

	<h2>
		Compensation
	</h2>

	<p>
		<strong>$4,000 USD</strong>
	</p>

	<ul>
		<li>
			Payment structure: 50% upfront, 50% upon completion
		</li>
		<li>
			Fixed price for complete deliverable
		</li>
	</ul>

	<h2>
		Requirements
	</h2>

	<p>
		<strong>Technical:</strong>
	</p>

	<ul>
		<li>
			Proven experience with web animations
		</li>
		<li>
			Portfolio demonstrating similar intro/interactive animation work
		</li>
		<li>
			Ability to work with existing prototype and codebase (will be provided upon selection)
		</li>
	</ul>

	<p>
		<strong>Legal:</strong>
	</p>

	<ul>
		<li>
			Must sign Non-Disclosure Agreement (NDA)
		</li>
		<li>
			Must sign our standard development contract
		</li>
		<li>
			Both documents provided upon selection
		</li>
	</ul>

	<p>
		<strong>Professional:</strong>
	</p>

	<ul>
		<li>
			Ability to meet tight deadline without compromising quality
		</li>
		<li>
			Responsive communication during the 5-day production period
		</li>
		<li>
			Experience delivering polished, production-ready animations
		</li>
	</ul>

	<h2>
		What We Provide
	</h2>

	<ul>
		<li>
			Existing prototype and code base
		</li>
		<li>
			Clear creative direction (finalized by Tuesday)
		</li>
		<li>
			All necessary assets and specifications
		</li>
		<li>
			Direct communication channel for quick approvals
		</li>
	</ul>

	<h2>
		To Apply
	</h2>

	<p>
		Please submit:
	</p>

	<ol>
		<li>
			Portfolio/reel showcasing relevant web animation work
		</li>
		<li>
			Brief description of your technical approach for this type of project
		</li>
		<li>
			Confirmation of availability for 5-day turnaround starting next week
		</li>
		<li>
			Any questions about the project scope
		</li>
	</ol>

	<p>
		<strong>Note:</strong> This is a one-time contract position for a specific deliverable. The selected candidate will be notified by end of Tuesday to allow immediate project kickoff.
	</p>
</div>

<div>
	 
</div>
]]></description><guid isPermaLink="false">45287</guid><pubDate>Fri, 09 Jan 2026 16:22:09 +0000</pubDate></item><item><title>Hiring Full Stack Developer (GSAP + Barba.js + ScrollTrigger) for High End Landing Page</title><link>https://gsap.com/community/forums/topic/45252-hiring-full-stack-developer-gsap-barbajs-scrolltrigger-for-high-end-landing-page/</link><description><![CDATA[<p>
	
</p>

<div style="color:#fffce1;font-size:1.125rem;">
	<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
		Hi , PLEASE READ THE ENTIRE POST, APPLICATIONS WITHOUT THE REQUIRED PROOF OF PORTFOLIO WILL BE IGNORED
	</p>

	<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
		For a client 
	</p>

	<p style="color:#000000;padding:0px;">
		<span style="color:#ecf0f1;padding:0px;"><b style="padding:0px;">I'm looking for a highly skilled Full-Stack Developer</b> who can design and build a premium, animation driven landing page for a construction company.</span>
	</p>

	<p style="color:#000000;padding:0px;">
		<span style="color:#ecf0f1;padding:0px;">I need <b style="padding:0px;">one person</b> who can handle <b style="padding:0px;">design, front end, back end</b>, and deliver <b style="padding:0px;">smooth, high performance animations </b>using <b style="padding:0px;">GSAP, ScrollTrigger, and Barba.js</b>.</span>
	</p>

	<p style="color:#000000;padding:0px;">
		<span style="color:#ecf0f1;padding:0px;">If you cannot provide <b style="padding:0px;">verifiable proof</b> of the projects you claim to have built, <b style="padding:0px;">do not apply</b>.</span>
	</p>

	<p style="color:#000000;padding:0px;">
		 
	</p>

	<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
		- it should be the landing page, the section "about us" "services" "contact page", "mission page" and the Projects page where they want to showcase 7/8 projects with relative pictures
	</p>

	<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
		- The time line to complete the project is 2/3 months max, startin before or after Christmas
	</p>

	<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
		- It's a paid gig
	</p>

	<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
		Ideally you are experienced and able to:
	</p>

	<p style="padding:0px;">
		- Implement engaging, scroll-triggered animations using GSAP/Barba js.
	</p>

	<p style="padding:0px;">
		- The desired<span style="padding:0px;"> </span><strong style="padding:0px;">animation style and quality</strong><span style="padding:0px;"> </span>are similar to effects seen on sites like<span style="padding:0px;"> </span><a href="https://www.maman-corp.com" rel="external nofollow" style="background-color:transparent;padding:0px;">https://www.maman-corp.com</a>   <span> </span><a href="https://asmobius.co.jp" rel="external nofollow" style="background-color:transparent;padding:0px;">https://asmobius.co.jp</a> e.g., smooth reveals, dynamic transitions driven by scroll).
	</p>

	<p style="padding:0px;">
		- Focus on smooth performance and responsiveness across devices.
	</p>

	<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
		<strong style="padding:0px;">Requirements:</strong>
	</p>

	<p style="padding:0px;">
		- Proven experience with GSAP (ScrollTrigger is key).
	</p>

	<p style="padding:0px;">
		- Strong skills in HTML, CSS, JavaScript.
	</p>

	<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
		 
	</p>

	<p style="color:#000000;padding:0px;">
		 
	</p>

	<h3 style="color:#000000;padding:0px;">
		<span style="color:#ffffff;padding:0px;"><b style="padding:0px;">Project Scope</b></span>
	</h3>

	<p style="color:#000000;padding:0px;">
		<span style="color:#ffffff;padding:0px;">Full website creation: <b style="padding:0px;">design + front-end + back-end</b></span>
	</p>

	<ul style="color:#000000;padding:0px;">
		<li style="padding:0px;">
			<p style="padding:0px;">
				<span style="color:#ffffff;padding:0px;">High-end landing page with:</span>
			</p>

			<ul style="color:#bbbaa6;padding:0px;">
				<li style="padding:0px;">
					<p style="padding:0px;">
						<span style="color:#ffffff;padding:0px;">Smooth, modern transitions (GSAP, Barba.js)</span>
					</p>
				</li>
				<li style="padding:0px;">
					<p style="padding:0px;">
						<span style="color:#ffffff;padding:0px;">Scroll-triggered animations</span>
					</p>
				</li>
				<li style="padding:0px;">
					<p style="padding:0px;">
						<span style="color:#ffffff;padding:0px;">Clean, minimal, high-performance UI/UX</span>
					</p>
				</li>
				<li style="padding:0px;">
					<p style="padding:0px;">
						<span style="color:#ffffff;padding:0px;">Responsive layout</span>
					</p>
				</li>
				<li style="padding:0px;">
					<p style="padding:0px;">
						<span style="color:#ffffff;padding:0px;">Simple backend (contact form, leads management, or basic CMS , open to suggestions)</span>
					</p>
				</li>
			</ul>
		</li>
	</ul>

	<p style="color:#000000;padding:0px;">
		 
	</p>

	<p style="color:#000000;padding:0px;">
		 
	</p>

	<hr style="padding:0px;" />
	<p style="color:#000000;padding:0px;">
		 
	</p>

	<p style="color:#000000;padding:0px;">
		 
	</p>

	<h3 style="color:#000000;padding:0px;">
		<span style="color:#ffffff;padding:0px;"><b style="padding:0px;">Required Skills</b></span>
	</h3>

	<p style="color:#000000;padding:0px;">
		<span style="color:#ffffff;padding:0px;">Expert-level JavaScript (GSAP + ScrollTrigger + Barba.js)</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">Strong eye for design, typography, layout, and interaction</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">Ability to build both <b style="padding:0px;">front-end and back-end</b></span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">Experience delivering <b style="padding:0px;">smooth, fluid, lag-free animations</b></span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">Ability to provide <b style="padding:0px;">real, verifiable work samples</b></span>
	</p>

	<p style="padding:0px;">
		 
	</p>

	<p style="padding:0px;">
		 
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;"><b style="padding:0px;">Proof of Work (MANDATORY — applications without these will be rejected</b></span>
	</p>

	<p style="padding:0px;">
		 
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">To avoid fake portfolios, every applicant must provide:</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">1.<span> </span><b style="padding:0px;">Live links</b><span> </span>to websites you personally built using GSAP/Barba/ScrollTrigger.</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">2.<span> </span><b style="padding:0px;">Proof that you actually developed them</b>, such as:</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• Screenshots or screen recordings of the codebase</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• GitHub repos</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• Video walkthrough of the project files (showing structure + animation logic)</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• Backend access (read-only) or staging environment demo</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">3. A short explanation of<span> </span><b style="padding:0px;">what exactly you built</b><span> </span>on each project (design? animations? full build? partial work?).</span>
	</p>

	<p style="padding:0px;">
		 
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">If you cannot prove authorship, your application will not be considered.</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">I have already received applicants who provided websites they did<span> </span><i style="padding:0px;">not</i><span> </span>build — I verify everything.</span>
	</p>

	<p style="padding:0px;">
		 
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">⸻</span>
	</p>

	<p style="padding:0px;">
		 
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;"><b style="padding:0px;">How to Apply</b></span>
	</p>

	<p style="padding:0px;">
		 
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">Send an email to<span> </span>fsquaredfrancone@gmail.com<span> </span> with subject:<span> </span><b style="padding:0px;">“GSAP Full-Stack Developer – [Your Name]”</b></span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">Include:</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• Your portfolio (with proof as described above)</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• Your experience with GSAP, Barba.js, and ScrollTrigger</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• Your proposed approach for this landing page</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• Estimated timeline and price range</span>
	</p>

	<p style="padding:0px;">
		 
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">⸻</span>
	</p>

	<p style="padding:0px;">
		 
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;"><b style="padding:0px;">Bonus (Not required but preferred)</b></span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• Ability to design Figma mockups</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• Experience with performance optimization for animation-heavy websites</span>
	</p>

	<p style="padding:0px;">
		<span style="color:#ffffff;padding:0px;">• Understanding of SEO for animated landing pages</span>
	</p>
</div>
]]></description><guid isPermaLink="false">45252</guid><pubDate>Thu, 11 Dec 2025 14:02:01 +0000</pubDate></item><item><title>Help Required: Tight-Scoped, Desktop Only ScrollTrigger Bug</title><link>https://gsap.com/community/forums/topic/45233-help-required-tight-scoped-desktop-only-scrolltrigger-bug/</link><description><![CDATA[<p>
	Hi there <span class="ipsEmoji">👋</span><br />
	<br />
	<strong><span style="font-size:26px;">TL;DR</span></strong><br />
	I'm looking for a ScrollTrigger expert to help me resolve a stubborn bug for a project I'm working on. I'm facing a persistent 'Ghost Pin' effect causing duplicate spacing and/or critical failure in the dynamic pin-chaining mechanism within a responsive CSS Grid layout.<br />
	<br />
	This is a short, targeted task, not a long-term development project.
</p>

<p>
	 
</p>

<p>
	My budget for this is around R1 000 (±$60).<br />
	<br />
	I would also like an explanation of the working solution so that I can continue to build my GSAP competence.<br />
	<br />
	<strong><span style="font-size:26px;">DETAILS</span></strong><br />
	The challenge is to resolve a complex, persistent spacing and pinning failure within a custom two-column layout module. The DOM structure is a two-column CSS Grid layout, with left-right section pairs (using data-pin-id and data-pin-trigger to link) pin-scrolling over each other. <br />
	<br />
	 
</p>

<p>
	<strong><span style="font-size:22px;">1. <span class="ipsEmoji">📝</span> The Core Problem &amp; Desired Outcome</span></strong>
</p>

<p>
	The current ScrollTrigger implementation is failing to determine the correct height for each individual section pair, leading to two primary issues:
</p>

<ul>
	<li>
		<strong>Internal Height Duplication: </strong>The pinning logic is forcing all individual content sections within the module to inherit the height of the single tallest section on the page. This creates substantial, unwanted whitespace and gaps between the pinned elements.
	</li>
	<li>
		<strong>Final Spacing Error ('Ghost Pin'):</strong> The last pinned element creates a massive, duplicated gap at the end of the page. This is caused by the "Ghost Pin" effect, where the element's transformation upon unpinning conflicts with the pin-spacer height, doubling the total vertical space.
	</li>
</ul>

<p>
	<strong>Desired Outcome: </strong>
</p>

<p>
	The height of each left column pin must be calculated dynamically and individually to match the content height of its corresponding right-column section, eliminating all unnecessary gaps and cleanly unpinning the final element without duplicate spacing.
</p>

<p>
	<br />
	<span style="font-size:22px;"><strong>2. <span class="ipsEmoji">💻</span> Technologies and Environment</strong></span>
</p>

<div style="background-color:#000000;color:#d3d3d3;font-size:16px;padding:0px;">
	<div style="padding:0px;">
		<table style="border-collapse:collapse;padding:0px;">
			<thead style="padding:0px;">
				<tr style="padding:0px;">
					<th style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						Category
					</th>
					<th style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						Technology/Component
					</th>
					<th style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						Detail
					</th>
				</tr>
			</thead>
			<tbody style="padding:0px;">
				<tr style="padding:0px;">
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						<strong style="color:#3eadaa;padding:0px;">Platform</strong>
					</td>
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						WordPress / Custom Theme
					</td>
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						Built on the Full Site Editing (FSE) model with the<span> </span><strong style="color:#3eadaa;padding:0px;">Greenshift</strong><span> </span>theme.
					</td>
				</tr>
				<tr style="padding:0px;">
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						<strong style="color:#3eadaa;padding:0px;">Animation</strong>
					</td>
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						GSAP 3.12.5
					</td>
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						Core GSAP and the<span> </span><strong style="color:#3eadaa;padding:0px;">ScrollTrigger</strong><span> </span>plugin (advanced pinning required).
					</td>
				</tr>
				<tr style="padding:0px;">
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						<strong style="color:#3eadaa;padding:0px;">Layout</strong>
					</td>
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						HTML/CSS Grid
					</td>
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						Two-column layout with<span> </span><code style="padding:0px;">grid-template-columns: 40% 60%</code>.
					</td>
				</tr>
				<tr style="padding:0px;">
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						<strong style="color:#3eadaa;padding:0px;">Development</strong>
					</td>
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						JavaScript / PHP
					</td>
					<td style="border-color:#3f3f3f;border-style:solid;border-width:1px;padding:5px;">
						Custom modules implemented in vanilla JavaScript, with dependencies managed via<span> </span><code style="padding:0px;">wp_enqueue_script</code>.
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<p>
	 
</p>

<p>
	<span style="font-size:22px;"><strong>3. 🛠 Troubleshooting Steps Already Taken</strong></span><br />
	The following comprehensive, non-working solutions have already been attempted. This is not to say they might not be the solution (or parts of it), but for your reference.<br />
	 
</p>

<ul>
	<li>
		<strong>Dynamic Chaining (end: () =&gt; {...}):</strong> Attempted to use fluid functions and returning the next DOM element to chain pins. This resulted in consistent pin sequence failure due to apparent conflicts with the CSS Grid's height calculation.
	</li>
	<li>
		<strong>Proxy Element Strategy: </strong>Implemented a non-rendered, height-injected proxy element to serve as an explicit end trigger, but this failed due to execution order timing.
	</li>
	<li>
		<strong>Callback Intervention (Final Pin):</strong> Implemented the standard Ghost Pin fix using the onLeave and onEnterBack callbacks to manually collapse the last pin-spacer height. This also failed, as the pinning broke before the callback could be reliably executed
	</li>
	<li>
		<strong>Dependency Management:</strong> The JavaScript execution order has been corrected to ensure height-setting scripts run before pin-creation scripts.
	</li>
</ul>

<p>
	The final solution must be a clean, low-level fix that resolves the height determination and Ghost Pin conflict in this specific CSS Grid context.<br />
	<br />
	Full current code will be provided on acceptance of job.
</p>
]]></description><guid isPermaLink="false">45233</guid><pubDate>Thu, 04 Dec 2025 06:25:24 +0000</pubDate></item><item><title>Looking for an Experienced GSAP/ Barbajs Developer for Website</title><link>https://gsap.com/community/forums/topic/45228-looking-for-an-experienced-gsap-barbajs-developer-for-website/</link><description><![CDATA[<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
	Hi ,
</p>

<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
	For a client 
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;"><b>I'm looking for a highly skilled Full-Stack Developer</b> who can design and build a premium, animation driven landing page for a construction company.</span>
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">I need <b>one person</b> who can handle <b>design, front end, back end</b>, and deliver <b>smooth, high performance animations </b>using <b>GSAP, ScrollTrigger, and Barba.js</b>.</span>
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">If you cannot provide <b>verifiable proof</b> of the projects you claim to have built, <b>do not apply</b>.</span>
</p>

<p style="color:#000000;">
	 
</p>

<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
	- it should be the landing page, the section "about us" "services" "contact page", "mission page" and the Projects page where they want to showcase 7/8 projects with relative pictures
</p>

<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
	- The time line to complete the project is 2/3 months max, startin before or after Christmas
</p>

<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
	- It's a paid gig
</p>

<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
	Ideally you are experienced and able to:
</p>

<p style="padding:0px;">
	- Implement engaging, scroll-triggered animations using GSAP/Barba js.
</p>

<p style="padding:0px;">
	- The desired<span> </span><strong style="padding:0px;">animation style and quality</strong><span> </span>are similar to effects seen on sites like<span> </span><a href="https://www.maman-corp.com" rel="external nofollow">https://www.maman-corp.com</a>    <a href="https://asmobius.co.jp" rel="external nofollow">https://asmobius.co.jp</a> e.g., smooth reveals, dynamic transitions driven by scroll).
</p>

<p style="padding:0px;">
	- Focus on smooth performance and responsiveness across devices.
</p>

<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
	<strong style="padding:0px;">Requirements:</strong>
</p>

<p style="padding:0px;">
	- Proven experience with GSAP (ScrollTrigger is key).
</p>

<p style="padding:0px;">
	- Strong skills in HTML, CSS, JavaScript.
</p>

<p style="background-color:#0e100f;color:#bbbaa6;padding:0px;">
	
</p>

<p style="color:#000000;">
	 
</p>

<h3 style="color:#000000;">
	<span style="color:#ffffff;"><b>Project Scope</b></span>
</h3>

<p style="color:#000000;">
	<span style="color:#ffffff;">Full website creation: <b>design + front-end + back-end</b></span>
</p>

<ul style="color:#000000;">
	<li>
		<p>
			<span style="color:#ffffff;">High-end landing page with:</span>
		</p>

		<ul>
			<li>
				<p>
					<span style="color:#ffffff;">Smooth, modern transitions (GSAP, Barba.js)</span>
				</p>
			</li>
			<li>
				<p>
					<span style="color:#ffffff;">Scroll-triggered animations</span>
				</p>
			</li>
			<li>
				<p>
					<span style="color:#ffffff;">Clean, minimal, high-performance UI/UX</span>
				</p>
			</li>
			<li>
				<p>
					<span style="color:#ffffff;">Responsive layout</span>
				</p>
			</li>
			<li>
				<p>
					<span style="color:#ffffff;">Simple backend (contact form, leads management, or basic CMS , open to suggestions)</span>
				</p>
			</li>
		</ul>
	</li>
</ul>

<p style="color:#000000;">
	 
</p>

<p style="color:#000000;">
	 
</p>

<hr />
<p style="color:#000000;">
	 
</p>

<p style="color:#000000;">
	 
</p>

<h3 style="color:#000000;">
	<span style="color:#ffffff;"><b>Required Skills</b></span>
</h3>

<p style="color:#000000;">
	<span style="color:#ffffff;">Expert-level JavaScript (GSAP + ScrollTrigger + Barba.js)</span>
</p>

<p>
	<span style="color:#ffffff;">Strong eye for design, typography, layout, and interaction</span>
</p>

<p>
	<span style="color:#ffffff;">Ability to build both <b>front-end and back-end</b></span>
</p>

<p>
	<span style="color:#ffffff;">Experience delivering <b>smooth, fluid, lag-free animations</b></span>
</p>

<p>
	<span style="color:#ffffff;">Ability to provide <b>real, verifiable work samples</b></span>
</p>

<p>
	 
</p>

<p>
	 
</p>

<p>
	<span style="color:#ffffff;"><b>Proof of Work (MANDATORY — applications without these will be rejected</b></span>
</p>

<p>
	 
</p>

<p>
	<span style="color:#ffffff;">To avoid fake portfolios, every applicant must provide:</span>
</p>

<p>
	<span style="color:#ffffff;">1. <b>Live links</b> to websites you personally built using GSAP/Barba/ScrollTrigger.</span>
</p>

<p>
	<span style="color:#ffffff;">2. <b>Proof that you actually developed them</b>, such as:</span>
</p>

<p>
	<span style="color:#ffffff;">• Screenshots or screen recordings of the codebase</span>
</p>

<p>
	<span style="color:#ffffff;">• GitHub repos</span>
</p>

<p>
	<span style="color:#ffffff;">• Video walkthrough of the project files (showing structure + animation logic)</span>
</p>

<p>
	<span style="color:#ffffff;">• Backend access (read-only) or staging environment demo</span>
</p>

<p>
	<span style="color:#ffffff;">3. A short explanation of <b>what exactly you built</b> on each project (design? animations? full build? partial work?).</span>
</p>

<p>
	 
</p>

<p>
	<span style="color:#ffffff;">If you cannot prove authorship, your application will not be considered.</span>
</p>

<p>
	<span style="color:#ffffff;">I have already received applicants who provided websites they did <i>not</i> build — I verify everything.</span>
</p>

<p>
	 
</p>

<p>
	<span style="color:#ffffff;">⸻</span>
</p>

<p>
	 
</p>

<p>
	<span style="color:#ffffff;"><b>How to Apply</b></span>
</p>

<p>
	 
</p>

<p>
	<span style="color:#ffffff;">Send an email to fsquaredfrancone@gmail.com  with subject: <b>“GSAP Full-Stack Developer – [Your Name]”</b></span>
</p>

<p>
	<span style="color:#ffffff;">Include:</span>
</p>

<p>
	<span style="color:#ffffff;">• Your portfolio (with proof as described above)</span>
</p>

<p>
	<span style="color:#ffffff;">• Your experience with GSAP, Barba.js, and ScrollTrigger</span>
</p>

<p>
	<span style="color:#ffffff;">• Your proposed approach for this landing page</span>
</p>

<p>
	<span style="color:#ffffff;">• Estimated timeline and price range</span>
</p>

<p>
	 
</p>

<p>
	<span style="color:#ffffff;">⸻</span>
</p>

<p>
	 
</p>

<p>
	<span style="color:#ffffff;"><b>Bonus (Not required but preferred)</b></span>
</p>

<p>
	<span style="color:#ffffff;">• Ability to design Figma mockups</span>
</p>

<p>
	<span style="color:#ffffff;">• Experience with performance optimization for animation-heavy websites</span>
</p>

<p>
	<span style="color:#ffffff;">• Understanding of SEO for animated landing pages</span>
</p>

<p style="color:#000000;">
	 
</p>
]]></description><guid isPermaLink="false">45228</guid><pubDate>Mon, 01 Dec 2025 21:26:14 +0000</pubDate></item><item><title>Hiring a Senior Webflow Developer (GSAP expert + custom code)</title><link>https://gsap.com/community/forums/topic/45220-hiring-a-senior-webflow-developer-gsap-expert-custom-code/</link><description><![CDATA[<p>
	Nova Studio is hiring <br />
	Senior Webflow Developer<br />
	If you’ve built complex sites with GSAP, worked with component systems, understand interactions deeply, and can execute fast with precision, we want to hear from you.<br />
	Apply here: <a href="https://tally.so/r/zxxAoR" rel="external nofollow">https://tally.so/r/zxxAoR</a><br />
	 
</p>

<p>
	Senior Product Designer<br />
	We’re looking for a designer with strong product thinking(Web, App), clean execution, and the ability to turn messy problems into beautiful, functional systems.<br />
	Apply here: <a href="https://tally.so/r/D44oER" rel="external nofollow">https://tally.so/r/D44oER</a>
</p>
]]></description><guid isPermaLink="false">45220</guid><pubDate>Thu, 27 Nov 2025 13:43:05 +0000</pubDate></item><item><title>Looking for a GSAP + Webflow Specialist for a High-Visibility Project</title><link>https://gsap.com/community/forums/topic/45198-looking-for-a-gsap-webflow-specialist-for-a-high-visibility-project/</link><description><![CDATA[<p>
	
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">Hi everyone,</span>
</p>

<p style="color:#000000;">
	 
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">I’m looking for a GSAP specialist with strong Webflow experience to support a high-visibility project. This includes implementing advanced interactions, smooth motion sequences, and component-level choreography inside Webflow.</span>
</p>

<p style="color:#000000;">
	 
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">What I’m looking for:</span>
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">• Expert-level GSAP animation inside Webflow</span>
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">• Ability to build clean, scalable, reusable animation structures</span>
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">• Experience with interaction sequencing and design-system-level motion</span>
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">• Availability to start soon</span>
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">• Strong portfolio of recent, relevant work</span>
</p>

<p style="color:#000000;">
	 
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">This is a paid engagement. If you’re interested, please email me directly with:</span>
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">• Portfolio or recent GSAP/Webflow samples</span>
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">• Your rate</span>
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">• Your availability</span>
</p>

<p style="color:#000000;">
	 
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;"><span class="ipsEmoji">📩</span> Email: jesse@jessemercado.me</span>
</p>

<p style="color:#000000;">
	 
</p>

<p style="color:#000000;">
	<span style="color:#ecf0f1;">Thanks in advance to anyone who reaches out. Looking forward to connecting with the right specialist.</span>
</p>
]]></description><guid isPermaLink="false">45198</guid><pubDate>Mon, 17 Nov 2025 21:19:42 +0000</pubDate></item><item><title>Job Filled: GSAP Developer for Cinematic Scroll Experience (Music Artist Site)</title><link>https://gsap.com/community/forums/topic/45181-job-filled-gsap-developer-for-cinematic-scroll-experience-music-artist-site/</link><description><![CDATA[<div style="background-color:#000000;color:#f5f5f5;font-size:15px;">
	<div>
		<div style="border-bottom-width:0px;border-top-width:0px;font-size:15px;vertical-align:baseline;">
			<div>
				<div>
					<div>
						<div>
							<div>
								<div style="background-color:#262626;border-bottom:0px solid rgba(0,0,0,0);border-top:0px solid rgba(0,0,0,0);color:#ffffff;">
									<div style="color:#f5f5f5;">
										<span style="color:#f5f5f5;font-size:0.9375rem;">Hi everyone, </span>
									</div>

									<div style="color:#f5f5f5;">
										 
									</div>

									<div style="color:#f5f5f5;">
										<span style="color:#f5f5f5;font-size:0.9375rem;">I’m looking for a GSAP developer to help bring a cinematic, scroll-based website to life for my husband, a music artist (R&amp;B/rap/experimental). </span>
									</div>

									<div style="color:#f5f5f5;">
										 
									</div>

									<div style="color:#f5f5f5;">
										<span style="color:#f5f5f5;font-size:0.9375rem;">The site is mobile-first and built around a series of immersive scenes that reveal new visuals and music as users scroll. Each scene will include subtle motion and interactive details — we have reference images and a full asset document ready. </span>
									</div>

									<div style="color:#f5f5f5;">
										 
									</div>

									<div style="color:#f5f5f5;">
										<span style="color:#f5f5f5;font-size:0.9375rem;">We’re looking for someone who: </span>
									</div>

									<div style="color:#f5f5f5;">
										<span style="color:#f5f5f5;font-size:0.9375rem;">• Is experienced with GSAP and ScrollTrigger </span>
									</div>

									<div style="color:#f5f5f5;">
										<span style="color:#f5f5f5;font-size:0.9375rem;">• Can create smooth, visually engaging scroll-based animations </span>
									</div>

									<div style="color:#f5f5f5;">
										<span style="color:#f5f5f5;font-size:0.9375rem;">• Works collaboratively with provided assets and creative direction </span>
									</div>

									<div style="color:#f5f5f5;">
										<span style="color:#f5f5f5;font-size:0.9375rem;">• (Optional) Has experience with mobile-responsive design </span>
									</div>

									<div style="color:#f5f5f5;">
										 
									</div>

									<div style="color:#f5f5f5;">
										<span style="color:#f5f5f5;font-size:0.9375rem;">If interested, please comment below or DM me with examples of your GSAP work and general availability/rates. Thanks so much! Excited to find the right collaborator to bring this project to life.</span>
									</div>

									<div style="color:#f5f5f5;">
										 
									</div>

									<div style="color:#f5f5f5;">
										<span style="color:#f5f5f5;font-size:0.9375rem;">— Evee Nuñez</span>
									</div>
								</div>
							</div>

							<div style="background-color:#000000;">
								<div>
									 
								</div>
							</div>
						</div>
					</div>

					<div style="background-color:#000000;">
						<div>
							 
						</div>
					</div>
				</div>

				<div style="background-color:#000000;">
					<div>
						 
					</div>
				</div>
			</div>
		</div>
	</div>

	<div style="background-color:#000000;">
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div style="background-color:transparent;border-bottom-style:none;border-bottom-width:0px;border-top-style:none;border-top-width:0px;text-align:inherit;">
									<div>
										 
									</div>
								</div>
							</div>
						</div>

						<div>
							<div>
								<div style="background-color:transparent;border-bottom-style:none;border-bottom-width:0px;border-top-style:none;border-top-width:0px;text-align:inherit;">
									<div>
										 
									</div>
								</div>
							</div>
						</div>

						<div>
							<div>
								<div style="background-color:transparent;border-bottom-style:none;border-bottom-width:0px;border-top-style:none;border-top-width:0px;text-align:inherit;">
									<div>
										 
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div style="background-color:#000000;">
		 
	</div>
</div>
]]></description><guid isPermaLink="false">45181</guid><pubDate>Wed, 12 Nov 2025 03:21:15 +0000</pubDate></item><item><title>Help In Project URgent !!</title><link>https://gsap.com/community/forums/topic/45167-help-in-project-urgent/</link><description><![CDATA[<div style="color:#ffffff;font-size:14px;padding:0px;">
	<i style="padding:0px;">I want help in my project where i need to  rotate all my six cards in circular motion on arc along with blue dot when scrolling</i>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	 
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	 
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ff006a;padding:0px;">import</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#eeffff;padding:0px;">React</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff006a;padding:0px;">from</span><span style="color:#ffffff;padding:0px;"><span> </span>"</span><span style="color:#eeff00;padding:0px;">react</span><span style="color:#ffffff;padding:0px;">";</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ff006a;padding:0px;">import</span><span style="color:#ffffff;padding:0px;"><span> </span>"</span><span style="color:#eeff00;padding:0px;">./PhaseSection.css</span><span style="color:#ffffff;padding:0px;">";</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ff006a;padding:0px;">import</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#eeffff;padding:0px;">meetingImg</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff006a;padding:0px;">from</span><span style="color:#ffffff;padding:0px;"><span> </span>"</span><span style="color:#eeff00;padding:0px;">../../assets/phase1.svg</span><span style="color:#ffffff;padding:0px;">";<span> </span></span><span style="color:#838383;padding:0px;">// replace with your image</span>
</div>

<p>
	<span style="background-color:#00002c;color:#ffffff;font-size:14px;"> </span>
</p>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ff006a;padding:0px;">export</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff006a;padding:0px;">default</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff0062;padding:0px;">function</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00ffff;padding:0px;">PhaseSection</span><span style="color:#ffffff;padding:0px;">() {</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;"> <span> </span></span><span style="color:#ff006a;padding:0px;">return</span><span style="color:#ffffff;padding:0px;"><span> </span>(</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">   <span> </span></span><span style="color:#ffffff;padding:0px;">&lt;</span><span style="color:#ff0077;padding:0px;">section</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">className</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">phase-section</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">      &lt;</span><span style="color:#ff0077;padding:0px;">div</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">className</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">phase-inner</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">        &lt;</span><span style="color:#ff0077;padding:0px;">div</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">className</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">phase-image</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">          &lt;</span><span style="color:#ff0077;padding:0px;">img</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">src</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">{</span><span style="color:#f07178;padding:0px;">meetingImg</span><span style="color:#ffffff;padding:0px;">}<span> </span></span><span style="color:#00fff2;padding:0px;">alt</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">Discovery Call</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ffffff;padding:0px;">/&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">        &lt;/</span><span style="color:#ff0077;padding:0px;">div</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<p>
	<span style="background-color:#00002c;color:#ffffff;font-size:14px;"> </span>
</p>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">        &lt;</span><span style="color:#ff0077;padding:0px;">h2</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">className</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">phase-title</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">          Kickoff with Clarity &lt;</span><span style="color:#ff0077;padding:0px;">br</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ffffff;padding:0px;">/&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">          &lt;</span><span style="color:#ff0077;padding:0px;">em</span><span style="color:#ffffff;padding:0px;">&gt;(Discovery Call)&lt;/</span><span style="color:#ff0077;padding:0px;">em</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">        &lt;/</span><span style="color:#ff0077;padding:0px;">h2</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<p>
	<span style="background-color:#00002c;color:#ffffff;font-size:14px;"> </span>
</p>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">        &lt;</span><span style="color:#ff0077;padding:0px;">p</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">className</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">phase-desc</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">          We begin by understanding your vision, goals, and audience.</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">          This discovery call helps align expectations, define your story,</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">          and set a clear creative direction.</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">        &lt;/</span><span style="color:#ff0077;padding:0px;">p</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<p>
	<span style="background-color:#00002c;color:#ffffff;font-size:14px;"> </span>
</p>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">        &lt;</span><span style="color:#ff0077;padding:0px;">button</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">className</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">phase-btn</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">&gt;Phase 1&lt;/</span><span style="color:#ff0077;padding:0px;">button</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">      &lt;/</span><span style="color:#ff0077;padding:0px;">div</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<p>
	<span style="background-color:#00002c;color:#ffffff;font-size:14px;"> </span>
</p>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">      {</span><span style="color:#838383;padding:0px;">/* curved arc and center dot */</span><span style="color:#ffffff;padding:0px;">}</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">      &lt;</span><span style="color:#ff0077;padding:0px;">div</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">className</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">phase-arc-wrap</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">        &lt;</span><span style="color:#ff0077;padding:0px;">svg</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">className</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">phase-arc</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">viewBox</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">0 0 1200 400</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">fill</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">none</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">  &lt;</span><span style="color:#ff0077;padding:0px;">path</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">   <span> </span></span><span style="color:#00fff2;padding:0px;">d</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">M0,400 Q600,-100 1200,400</span><span style="color:#ffffff;padding:0px;">"</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">   <span> </span></span><span style="color:#00fff2;padding:0px;">stroke</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">#E5E7EB</span><span style="color:#ffffff;padding:0px;">"</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">   <span> </span></span><span style="color:#00fff2;padding:0px;">strokeWidth</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">1.5</span><span style="color:#ffffff;padding:0px;">"</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;"> <span> </span></span><span style="color:#ffffff;padding:0px;">/&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">&lt;/</span><span style="color:#ff0077;padding:0px;">svg</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<p>
	<span style="background-color:#00002c;color:#ffffff;font-size:14px;"> </span>
</p>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">        &lt;</span><span style="color:#ff0077;padding:0px;">div</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00fff2;padding:0px;">className</span><span style="color:#ff0062;padding:0px;">=</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">phase-dot</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">&gt;&lt;/</span><span style="color:#ff0077;padding:0px;">div</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">      &lt;/</span><span style="color:#ff0077;padding:0px;">div</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">    &lt;/</span><span style="color:#ff0077;padding:0px;">section</span><span style="color:#ffffff;padding:0px;">&gt;</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<span style="color:#ffffff;padding:0px;">  );</span>
</div>

<div style="color:#ffffff;font-size:14px;padding:0px;">
	<p style="color:#bbbaa6;padding:0px;">
		<span style="color:#ffffff;padding:0px;">}</span><br style="padding:0px;" />
		<br style="padding:0px;" />
		 
	</p>

	<p style="color:#bbbaa6;padding:0px;">
		 
	</p>

	<p style="color:#bbbaa6;padding:0px;">
		 
	</p>

	<p style="color:#bbbaa6;padding:0px;">
		 
	</p>

	<p style="color:#bbbaa6;padding:0px;">
		 
	</p>

	<p style="color:#bbbaa6;padding:0px;">
		 
	</p>

	<div style="background-color:#00002c;color:#ffffff;font-size:14px;padding:0px;">
		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">@</span><span style="color:#ff006a;padding:0px;">import</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00ffff;padding:0px;">url</span><span style="color:#ffffff;padding:0px;">('</span><span style="color:#eeff00;padding:0px;"><a href="https://fonts.googleapis.com/css2?family=Playfair%2BDisplay:ital,wght@1,700&amp;display=swap" rel="external nofollow">https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700&amp;display=swap</a></span><span style="color:#ffffff;padding:0px;">');</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-section</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  position:<span> </span></span><span style="color:#ff7e34;padding:0px;">relative</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  background: #f5f5f5;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  text-align:<span> </span></span><span style="color:#ff7e34;padding:0px;">center</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  padding:<span> </span></span><span style="color:#ff7e34;padding:0px;">100</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">20</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">160</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  overflow:<span> </span></span><span style="color:#ff7e34;padding:0px;">hidden</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#838383;padding:0px;">/* --- Content --- */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-inner</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  position:<span> </span></span><span style="color:#ff7e34;padding:0px;">relative</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  z-index:<span> </span></span><span style="color:#ff7e34;padding:0px;">2</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  max-width:<span> </span></span><span style="color:#ff7e34;padding:0px;">480</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  margin:<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">auto</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-image</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  width:<span> </span></span><span style="color:#ff7e34;padding:0px;">377</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  height:<span> </span></span><span style="color:#ff7e34;padding:0px;">217</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  margin:<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">auto</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">28</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  border-radius:<span> </span></span><span style="color:#ff7e34;padding:0px;">1</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  overflow:<span> </span></span><span style="color:#ff7e34;padding:0px;">hidden</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  box-shadow:<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">8</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">20</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00ffff;padding:0px;">rgba</span><span style="color:#ffffff;padding:0px;">(</span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ff7e34;padding:0px;">0.06</span><span style="color:#ffffff;padding:0px;">);</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-image</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff0077;padding:0px;">img</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  width:<span> </span></span><span style="color:#ff7e34;padding:0px;">100</span><span style="color:#82fbff;padding:0px;">%</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;"> <span> </span></span><span style="color:#838383;padding:0px;">/* position: relative; */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  display:<span> </span></span><span style="color:#ff7e34;padding:0px;">block</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-title</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-family:<span> </span></span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">Inter Display</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">Inter</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ff7e34;padding:0px;">sans-serif</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-weight:<span> </span></span><span style="color:#ff7e34;padding:0px;">600</span><span style="color:#ffffff;padding:0px;">;            </span><span style="color:#838383;padding:0px;">/* SemiBold */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-style:<span> </span></span><span style="color:#ff7e34;padding:0px;">normal</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-size:<span> </span></span><span style="color:#ff7e34;padding:0px;">38</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  line-height:<span> </span></span><span style="color:#ff7e34;padding:0px;">46.2</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  letter-spacing:<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  color: #111;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  text-align:<span> </span></span><span style="color:#ff7e34;padding:0px;">center</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  margin-bottom:<span> </span></span><span style="color:#ff7e34;padding:0px;">8</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-title</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff0077;padding:0px;">em</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  display:<span> </span></span><span style="color:#ff7e34;padding:0px;">block</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-family:<span> </span></span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">Playfair Display</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ff7e34;padding:0px;">serif</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-weight:<span> </span></span><span style="color:#ff7e34;padding:0px;">600</span><span style="color:#ffffff;padding:0px;">;        <span> </span></span><span style="color:#838383;padding:0px;">/* slightly bolder for visibility */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-style:<span> </span></span><span style="color:#ff7e34;padding:0px;">italic</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-size:<span> </span></span><span style="color:#ff7e34;padding:0px;">28</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;          </span><span style="color:#838383;padding:0px;">/* more balanced under 38px heading */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  line-height:<span> </span></span><span style="color:#ff7e34;padding:0px;">38</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  color: #2563eb;          <span> </span></span><span style="color:#838383;padding:0px;">/* your brand blue */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  margin-top:<span> </span></span><span style="color:#ff7e34;padding:0px;">6</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;          </span><span style="color:#838383;padding:0px;">/* gentle spacing */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  letter-spacing:<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  text-align:<span> </span></span><span style="color:#ff7e34;padding:0px;">center</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-desc</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-family:<span> </span></span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">Inter Display</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">Inter</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ff7e34;padding:0px;">sans-serif</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-weight:<span> </span></span><span style="color:#ff7e34;padding:0px;">500</span><span style="color:#ffffff;padding:0px;">;          </span><span style="color:#838383;padding:0px;">/* Medium weight */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-style:<span> </span></span><span style="color:#ff7e34;padding:0px;">normal</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-size:<span> </span></span><span style="color:#ff7e34;padding:0px;">14</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  line-height:<span> </span></span><span style="color:#ff7e34;padding:0px;">19.6</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;      <span> </span></span><span style="color:#838383;padding:0px;">/* matches Figma line-height */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  letter-spacing:<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  color: #444;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  text-align:<span> </span></span><span style="color:#ff7e34;padding:0px;">center</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  margin:<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">auto</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">24</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  max-width:<span> </span></span><span style="color:#ff7e34;padding:0px;">360</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-btn</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  width:<span> </span></span><span style="color:#ff7e34;padding:0px;">78</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  height:<span> </span></span><span style="color:#ff7e34;padding:0px;">39</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  display:<span> </span></span><span style="color:#ff7e34;padding:0px;">inline-flex</span><span style="color:#ffffff;padding:0px;">;                </span><span style="color:#838383;padding:0px;">/* keeps text centered */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  align-items:<span> </span></span><span style="color:#ff7e34;padding:0px;">center</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  justify-content:<span> </span></span><span style="color:#ff7e34;padding:0px;">center</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  gap:<span> </span></span><span style="color:#ff7e34;padding:0px;">8</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  background: #ffffff;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  border:<span> </span></span><span style="color:#ff7e34;padding:0px;">1</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">solid</span><span style="color:#ffffff;padding:0px;"><span> </span>#e5e7eb;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  border-radius:<span> </span></span><span style="color:#ff7e34;padding:0px;">56</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  padding:<span> </span></span><span style="color:#ff7e34;padding:0px;">8</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">12</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;                  </span><span style="color:#838383;padding:0px;">/* from your Figma spec */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-family:<span> </span></span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">Inter Display</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#eeff00;padding:0px;">Inter</span><span style="color:#ffffff;padding:0px;">"</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ff7e34;padding:0px;">sans-serif</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-weight:<span> </span></span><span style="color:#ff7e34;padding:0px;">500</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  font-size:<span> </span></span><span style="color:#ff7e34;padding:0px;">13</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  line-height:<span> </span></span><span style="color:#ff7e34;padding:0px;">16</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  color: #8C8C8C;</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  opacity:<span> </span></span><span style="color:#ff7e34;padding:0px;">1</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  box-shadow:<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">1</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#ff7e34;padding:0px;">2</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;"><span> </span></span><span style="color:#00ffff;padding:0px;">rgba</span><span style="color:#ffffff;padding:0px;">(</span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ff7e34;padding:0px;">0</span><span style="color:#ffffff;padding:0px;">,<span> </span></span><span style="color:#ff7e34;padding:0px;">0.05</span><span style="color:#ffffff;padding:0px;">);</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  cursor:<span> </span></span><span style="color:#ff7e34;padding:0px;">default</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#838383;padding:0px;">/* --- ARC + DOT --- */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-arc-wrap</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  position:<span> </span></span><span style="color:#ff7e34;padding:0px;">relative</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  width:<span> </span></span><span style="color:#ff7e34;padding:0px;">100</span><span style="color:#82fbff;padding:0px;">%</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  margin-top:<span> </span></span><span style="color:#ff7e34;padding:0px;">60</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  display:<span> </span></span><span style="color:#ff7e34;padding:0px;">flex</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  justify-content:<span> </span></span><span style="color:#ff7e34;padding:0px;">center</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  align-items:<span> </span></span><span style="color:#ff7e34;padding:0px;">center</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-arc</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  margin-top:<span> </span></span><span style="color:#ff7e34;padding:0px;">-280</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  max-width:<span> </span></span><span style="color:#ff7e34;padding:0px;">1920</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;"> <span> </span></span><span style="color:#838383;padding:0px;">/* height: 300px; */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
		 

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">.</span><span style="color:#ffcb6b;padding:0px;">phase-dot</span><span style="color:#ffffff;padding:0px;"><span> </span>{</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  position:<span> </span></span><span style="color:#ff7e34;padding:0px;">absolute</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  top:<span> </span></span><span style="color:#ff7e34;padding:0px;">-52</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;<span> </span></span><span style="color:#838383;padding:0px;">/* aligns the dot right at top of the curve */</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  width:<span> </span></span><span style="color:#ff7e34;padding:0px;">10</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  height:<span> </span></span><span style="color:#ff7e34;padding:0px;">10</span><span style="color:#82fbff;padding:0px;">px</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  background: #2563eb;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">  border-radius:<span> </span></span><span style="color:#ff7e34;padding:0px;">50</span><span style="color:#82fbff;padding:0px;">%</span><span style="color:#ffffff;padding:0px;">;</span>
		</div>

		<div style="padding:0px;">
			<span style="color:#ffffff;padding:0px;">}</span>
		</div>
	</div>
</div>

<p>
	<a class="ipsAttachLink ipsAttachLink_image" href="https://gsap.com/community/uploads/monthly_2025_11/Screenshot2025-11-06120307.png.a9156d98a875df715b9787c3c2d3f92c.png" data-fileid="14699" data-fileext="png" rel=""><img alt="Screenshot 2025-11-06 120307.png" class="ipsImage ipsImage_thumbnailed" data-fileid="14699" data-ratio="65.79" width="991" src="https://gsap.com/community/uploads/monthly_2025_11/Screenshot2025-11-06120307.png.a9156d98a875df715b9787c3c2d3f92c.png" /></a>
</p>
]]></description><guid isPermaLink="false">45167</guid><pubDate>Thu, 06 Nov 2025 09:04:09 +0000</pubDate></item><item><title>Deleted</title><link>https://gsap.com/community/forums/topic/45055-deleted/</link><description><![CDATA[<p>
	Deleted
</p>
]]></description><guid isPermaLink="false">45055</guid><pubDate>Thu, 25 Sep 2025 15:22:01 +0000</pubDate></item><item><title>[COMPLETED]Scroll Trigger that updates menu colors and animation for 3 sections on a page</title><link>https://gsap.com/community/forums/topic/44455-completedscroll-trigger-that-updates-menu-colors-and-animation-for-3-sections-on-a-page/</link><description><![CDATA[<p>
	We're looking for a GSAP profession to complete a section of our client's website.
</p>

<p>
	 
</p>

<p>
	As the user scrolls down the page, they will hit a 3 sections, each with their own background color, copy and animation.
</p>

<p>
	 
</p>

<p>
	The background determines the change to the copy color and the menu colors.
</p>

<p>
	The animation will be triggered to play.
</p>

<p>
	An explanation of requirements will be fully provided during an online meeting and review of the design templates.
</p>

<p>
	 
</p>

<p>
	Timing 2-4 weeks
</p>

<p>
	Budget: scope to be provided after meeting with potential Freelancers
</p>

<p>
	 
</p>

<p>
	Please send examples of your work.
</p>
]]></description><guid isPermaLink="false">44455</guid><pubDate>Thu, 17 Apr 2025 18:32:03 +0000</pubDate></item><item><title>Seeking GSAP Developer for Multiple Landing Page Projects</title><link>https://gsap.com/community/forums/topic/44433-seeking-gsap-developer-for-multiple-landing-page-projects/</link><description><![CDATA[<p>
	Hi ,
</p>

<p>
	We're looking for an experienced freelance GSAP developer for several upcoming landing page projects.
</p>

<p>
	<strong>Project Overview:</strong>
</p>

<ul>
	<li>
		Develop multiple landing pages based on provided design mockups (Figma).
	</li>
	<li>
		Implement engaging, scroll-triggered animations using GSAP (especially ScrollTrigger).
	</li>
	<li>
		The desired <strong>animation style and quality</strong> are similar to effects seen on sites like <code><a href="https://www.dojovape.com" rel="external nofollow">https://www.dojovape.com</a></code> (e.g., smooth reveals, dynamic transitions driven by scroll).
	</li>
	<li>
		Focus on smooth performance and responsiveness across devices.
	</li>
</ul>

<p>
	<strong>Requirements:</strong>
</p>

<ul>
	<li>
		Proven experience with GSAP (ScrollTrigger is key).
	</li>
	<li>
		Strong skills in HTML, CSS, JavaScript.
	</li>
	<li>
		Ability to translate design mockups accurately into functional, animated pages.
	</li>
</ul>

<p>
	<strong>Timeline:</strong>
</p>

<ul>
	<li>
		We aim to start the first project within the next month. This involves multiple sequential projects.
	</li>
</ul>

<p>
	<strong>How to Apply:</strong> If you are interested and have a strong portfolio showcasing relevant GSAP work, please email your portfolio and examples directly to: <code>lzk990128@gmail.com</code>
</p>

<p>
	Thanks!
</p>
]]></description><guid isPermaLink="false">44433</guid><pubDate>Sat, 12 Apr 2025 14:59:26 +0000</pubDate></item><item><title>GSAP Animation Expert for React-Based Fintech Website</title><link>https://gsap.com/community/forums/topic/44418-gsap-animation-expert-for-react-based-fintech-website/</link><description><![CDATA[<p>
	<span style="font-size:20px;">We are seeking a highly skilled GSAP (GreenSock Animation Platform) expert to join our team and enhance the visual experience of our existing React-based payment gateway website. The ideal candidate will have a strong portfolio demonstrating high-quality, performant web animations, particularly for SaaS or fintech platforms.</span>
</p>

<p>
	 
</p>

<p>
	<span style="font-size:20px;">Your primary responsibility will be to design and implement smooth, interactive animations and transitions that match the level of refinement seen on sites like <a href="https://stripe.com/" rel="external nofollow"><span style="color:#0000ee;font-size:20px;">Stripe.com</span></a>, especially for product showcases, scroll-based interactions, and section transitions.</span>
</p>

<p>
	 
</p>

<p>
	 
</p>

<p>
	<span style="font-size:21px;">Technical Requirements</span>
</p>

<p>
	 
</p>

<p>
	 
</p>

<ul>
	<li>
		<span style="font-size:20px;">Proven expertise with GSAP (GSAP3) and modern animation techniques</span>
	</li>
	<li>
		<span style="font-size:20px;">Proficient in React.js and component-based architecture</span>
	</li>
	<li>
		<span style="font-size:20px;">Strong CSS3, HTML5, and JavaScript skills</span>
	</li>
	<li>
		<span style="font-size:20px;">Experience implementing scroll-based animations (e.g., ScrollTrigger)</span>
	</li>
	<li>
		<span style="font-size:20px;">Familiarity with performance optimization for animations on web</span>
	</li>
	<li>
		<span style="font-size:20px;">Ability to work within a design system and integrate seamlessly with existing components</span>
	</li>
</ul>

<p>
	 
</p>

<p>
	 
</p>

<p>
	<span style="font-size:20px;">Nice to Have:</span>
</p>

<p>
	 
</p>

<ul>
	<li>
		<span style="font-size:20px;">Familiarity with Tailwind CSS (our current design stack)</span>
	</li>
	<li>
		<span style="font-size:20px;">Experience with WebGL, Three.js, or Lottie for enhanced visuals</span>
	</li>
	<li>
		<span style="font-size:20px;">Experience collaborating via Figma or other design tools</span>
	</li>
</ul>

<p>
	 
</p>

<p>
	 
</p>

<p>
	 
</p>

<p>
	<span style="font-size:21px;">Examples / References</span>
</p>

<p>
	 
</p>

<p>
	 
</p>

<p>
	<span style="font-size:20px;">To better understand the level of animations we’re aiming for, refer to:</span>
</p>

<p>
	 
</p>

<ul>
	<li style="color:#0000ee;">
		<span style="font-size:20px;"><a href="https://stripe.com/" rel="external nofollow">Stripe’s Product Pages</a></span>
	</li>
	<li style="color:#0000ee;">
		<span style="font-size:20px;"><a href="https://www.apple.com/macbook-pro/" rel="external nofollow">Apple Product Reveals</a></span>
	</li>
	<li style="color:#0000ee;">
		<span style="font-size:20px;"><a href="https://framer.com/" rel="external nofollow">Framer’s Site</a></span>
	</li>
</ul>

<p>
	 
</p>

<p>
	 
</p>

<p>
	<span style="font-size:20px;">These examples showcase the smooth, polished interaction flow and refined micro-animations we’d like to achieve.</span>
</p>

<p>
	 
</p>

<p>
	 
</p>

<p>
	<span style="font-size:21px;">Timeline</span>
</p>

<p>
	 
</p>

<p>
	 
</p>

<ul>
	<li>
		<span style="font-size:20px;">Start Date: As soon as possible</span>
	</li>
	<li>
		<span style="font-size:20px;">Duration: Approximately 4 weeks, or until project milestones are met</span>
	</li>
</ul>

<p>
	 
</p>

<p>
	 
</p>

<p>
	 
</p>

<p>
	<span style="font-size:21px;">Compensation</span>
</p>

<p>
	 
</p>

<p>
	 
</p>

<ul>
	<li>
		<span style="font-size:20px;">Rate: $40/hour</span>
	</li>
	<li>
		<span style="font-size:20px;">Hours: Up to 40 hours/week</span>
	</li>
</ul>

<p>
	 
</p>

<p>
	 
</p>

<p>
	<span style="font-size:20px;">This is a contract-based remote role with flexibility in working hours as long as deliverables are met.</span>
</p>

<p>
	 
</p>

<p style="color:#808080;">
	 
</p>

<p>
	 
</p>

<p>
	<span style="font-size:20px;">If you’re a creative developer who enjoys bringing interfaces to life and can match the animation standards of top-tier fintech platforms, we’d love to hear from you. Please include your portfolio or specific examples showcasing your GSAP animation work.</span>
</p>
]]></description><guid isPermaLink="false">44418</guid><pubDate>Mon, 07 Apr 2025 22:52:15 +0000</pubDate></item></channel></rss>
