GSAP – Greensock to WordPress (Logo) – Upwork

Hi,
I’m looking for support for someone helping me to integrate GSAP animated logos into WordPress, as logo.

Tasks:
– Review GSAP code, optimize where needed + feedback
– Take deliverables and integrate in WordPress;
  . SVG code should be integrated as site logo/ site identity (html code)
  . Integrate GSAP Library (CDN)
  . Integrate GSAP Animation (.js)
  . Integrate CSS code (.css)
  . Alter functions.php of Child Theme
.- Optional: If there is no child theme active at clients’ site, it should be created, and integration should take place on that level. Charge + 5.-

It would be like this:
I deliver the animation, you integrate it into the site, making sure it looks and acts the same as the one-pager i present to the customer.

Note:
The svg should be integrated via the ‘inline svg’ method, simply by copying the svg code into WordPress.

Objective:
This svg animation should serve as the logo and be placed in de Site Identity / ‘.branding’ class in WP.
And be an href to ‘Home’, as normal.
The svg would also contain a restart button to view the animation again.

A
With ‘inline’ integration I mean:
The svg has added:
role="img" aria-labelledby="uniqueTitleID uniqueDescID"
This is added manually, after export of .svg
(I integrate the svg manually to begin with)

B
Also used:
defs
          mask id="theMask"
              g id="masker"

That is the Mask-method I’m using.
Also this is added after export, because that will not export properly from Illustrator.

Conclusion:
These manual alterations force the ‘inline’ integration, because there simply is no .svg to upload, just code instead…

The ‘inline’ method entails:
Either:
Through placing an HTML element in the ‘logo space’ ( .branding) in WP
And copy the svg code from index.html in there.

And/ Or altering the functions.php of the child theme.
(If there is no child theme active on the customers’ website, pls create one)

Tasks:
– Review GSAP code, optimize where needed + feedback
– Take deliverables and integrate in WordPress;
  . SVG code should be integrated as site logo/ site identity (html code)
  . Integrate GSAP Library (CDN)
  . Integrate GSAP Animation (.js)
  . Integrate CSS code (.css)
  . Alter functions.php of Child Theme
.- Optional: If there is no child theme active at clients’ site, it should be created, and integration should take place on that level. Charge + 5.-

GSAP animations tasks may follow, so if you have a portfolio: Show it!

This will be a returning task, for every new client, same procedure.

Thanks

Budget: $25

Posted On: November 13, 2021 00:26 UTC
Category: Front-End Development
Skills:JavaScript, HTML5, CSS 3, Animation, GSAP, WordPress, Web Design, Web Programming, Node.js, Website, HTML, CSS, GreenSock

Country: Netherlands

click to apply
Read More
All jobs | upwork.com

Scroll to Top