is it possible to transformOrigin of opacity?

[dr34mo]

hey sorry  if this is a very basic question but i could not find a way to change the opacity of an object or a text from a specific origin, 

i have tried autoalpha, alpha, setting the opacity on the h1 and setting it on box div, it wont work , im starting to think maybe setting origin for opacity is not possible,

im trying to reach a fade in effect from the bottom left corner for text,

thanks

 

i am really new to GSAP and i have been loving this tool, i would like to thank this amazing community and also thank creative coding club for introducing me to this tool, 

 

BTW marry Christmas everyone

See the Pen YzGEBBz by alisa-khodadadi (@alisa-khodadadi) on CodePen

[PointC]

Hi @dr34mo 

 

Welcome to the forum.

 

You'd probably want to use a mask for that effect. Here is a version I made for another forum question using a SVG. It should give you some ideas.

See the Pen EqmxZV by PointC (@PointC) on CodePen

 

Happy tweening,

 

[akapowl]

 

Hey, welcome to the forums @dr34mo

 

Changing the opacity from a specific origin is not possible, so you'd have to find a workaround to achieve what you want.

 

What you could do besides using SVG as @PointC hinted to, is tween on an image/div with a gradient, that initially covers your content.

 

Maybe something like in this example.

 

See the Pen 0f05a4134f2711f347612c8fb9f6fead by akapowl (@akapowl) on CodePen

 

[dr34mo]

thank you guys for ur awesome answers , I will definitely play around with this new knowledge 😍