Specifying the point-of-origin for scale and rotate

Animations
1

Hi there,

I am attempting to scale a shape (a line) from left to right on scroll, but using the built in scale feature, it’s looking like my only option is to scale from the middle.

Is there any way to specify the point-or-origin or “scale from” similar to regX and regY properties? If not, when faced with these kinds of scenarios, do you recommend a workaround (such as including GSAP in the project or animating an svg somehow?

Thanks in advance for any help

2

hey,
i would try to hide one side of the line with a shape as a workaround.

otherwise you could use lottiefiles and build your line in AE and export it with bodymovin. but this seems a bit to much for a simple line.

3

Thanks for the reply - much appreciated! Nice suggestions as well. I thought maybe I could use video for it and just make it trigger to start playing when I reached it, but even that seems like quite an effort. Maybe targeting the div and adding a CSS animation?

I’ve been hitting these walls with some pretty basic stuff in ReadyMag (this is my first project). I spent yesterday trying to import GSAP and/or other libraries in an attempt to bypass some of the problems, but even with that, I have yet to be able to successful target a div with anything (and cannot add a custom id to widgets).

Really at an impass - and for a simple line!