GSAP ScrollTrigger animation for Upwork Client Demo

Md. Faridul Hassan — Mon, 25 Nov 2024 04:03:11 +0000

Recently, I have made this cool web animation for an Upwork client with GSAP ScrollTrigger.

It was a challenging task to calculate the target positions dynamically and make it working for Desktop, Tablet and Mobile including browser resize events.

𝗜 𝗵𝗮𝘃𝗲 𝘂𝘁𝗶𝗹𝗶𝘀𝗲𝗱 𝗴𝗲𝘁𝗕𝗼𝘂𝗻𝗱𝗶𝗻𝗴𝗖𝗹𝗶𝗲𝗻𝘁𝗥𝗲𝗰𝘁 𝘁𝗼 𝗴𝗲𝘁 𝗼𝗳𝗳𝘀𝗲𝘁 𝘁𝗼𝗽, 𝗹𝗲𝗳𝘁, 𝘄𝗶𝗱𝘁𝗵, 𝗵𝗲𝗶𝗴𝗵𝘁 𝗲𝘁𝗰. 𝗮𝗻𝗱 𝗳𝗶𝗻𝗱 𝘁𝗵𝗲 𝘁𝗮𝗿𝗴𝗲𝘁 𝗽𝗼𝘀𝗶𝘁𝗶𝗼𝗻𝘀 𝗱𝘆𝗻𝗮𝗺𝗶𝗰𝗮𝗹𝗹𝘆.

It was implemented in client’s Elementor WordPress Site which also works like Single Page Application (SPA). So, I also had to use Elementor’s page transitions events and apply the animation calls and cleaning accordingly.

Video Link: https://youtu.be/5pLg4o0FKBM

If you need some cool web animations, you can hire me on Upwork.

https://www.upwork.com/freelancers/~0166c25fe6338aa8c3

Upwork #GSAP #ScrollTrigger #Freelancing #WebAnimation #Animation #WordPress #Elementor

Cliet-side WebM/MP4 export from React.js Canavs Animation using ffmpeg.wasm for an Upwork client

Md. Faridul Hassan — Tue, 24 Sep 2024 13:21:56 +0000

Recently, I have worked for an Upwork client to export WebM and MP4 video from their HTML5 Canvas Animation based react.js web application in browser (runtime) and also fix the blur and black-white issue on that.
And they used Konva.js canvas library for the application.

I have used so many available libraries (canvas-record.js, CCapture.js, record-canvas.js, ffmpeg.wasm etc. ) to make the solution, but every time there were issues like very long processing timing, freezing the application and so many.
But finally I reverted back to ffmpeg.wasm and used its multi-thread options. But to use multi-thread, I had to enable JavaScript SharedArrayBuffer api by setting ‘Cross-Origin-Embedder-Policy': 'require-corp', 'Cross-Origin-Opener-Policy': 'same-origin’ in server header request.
After that it worked on localhost without https and to make it live - I also needed to host the site on “https” enabled server. Otherwise ffmpeg.wasm multi-thread won’t work.

And finally I successfully reduced the runtime processing timing on browser. It exports instantly for WebM video and for a 20 second animation, it took around 1-1.5 minutes ( it might very based on other settings and user’s device ).
In this way, I saved the server request and video quality is also good and small in sizes.

Youtube Demo: https://youtu.be/9vCNP5aQGlY
My Upwork Profile: https://www.upwork.com/freelancers/~0166c25fe6338aa8c3

#upwork #html5canvas #React #ffmpeg #konva.js #freelancing

DEV Community: Md. Faridul Hassan

GSAP ScrollTrigger animation for Upwork Client Demo

Upwork #GSAP #ScrollTrigger #Freelancing #WebAnimation #Animation #WordPress #Elementor

Cliet-side WebM/MP4 export from React.js Canavs Animation using ffmpeg.wasm for an Upwork client