Not really... without having the actual device it's really hard to tell what it's actually going to do. The original SE is probably a good baseline for a lower-powered device these days. Just make sure you are following best practices (animating properties that can be hardware accelerated, etc).
onComplete should be doing the same thing... To note you'll want to do onComplete: functionName, not onComplete: functionName() as this will run the function immediately. More info on the callbacks here:https://greensock.com/docs/v3/GSAP/Timeline/eventCallback()
That site is animating the clip-path property. You could probably just do something like gsap.fromTo(img, { clipPath: 'inset(0, 0, 100%, 0') }, { clipPath: 'inset(0, 0, 0, 0') });
So animating height isn't very performant.
You may have better luck setting the progress bar to height: 100vh; with a transform-origin: top center; then animating the scaleY from 0 gsap.from(progressBar, { scaleY: 0, scrollTrigger: { ... }}
This way you wont need to calculate the window's size on refresh.
Where are those scripts defined (Wordpress can be funny about this sort of thing if you have scripts specific to being logged in, etc)? Are you sure that script is running, and those elements are available to be animated when the script runs?
It's not a baked in feature, but it's possible: You'll need to use draggable's callbacks to get current dragged position/coordinates and then re-map those coordinates with a little math to the preview box.
If you use a chrome-based browser you can download the extension to see just how many sites are using GSAP (It's a lot) https://chrome.google.com/webstore/detail/official-gsap-sniffer/dbcjaehchnikgdjjcehagpcikmlpjefh