SVG animation for character

[Guest Babak20]

Hello,

I'm sorry if my question is easy, I'm a newbie to this library.  

I need to implement an SVG character with animation, the character has an image inside and it's not simply a text so I didn't go for TextPlugin, on the other hand, it should reveal the character from one start point to an end point, it's like scrubbing but since my SVG file has one "path" I think it's not possible.

So I tried to implement it via timeline with an effect that may help me to develop what I want, but still, I stuck since it will reveal the whole image at one point and I don't want it.

They asked me for some effect like this website https://www.nurturedigital.com/ (if you try scrolling you can see a single character with video in the background, but in my case, it doesn't have video.

I will be happy if you can help me to find the best solution for this scenario.

I have attached my Codepen and the SVG file.

r.svg

See the Pen rNwEJmQ by babak20 (@babak20) on CodePen

[elegantseagulls]

Really not sure what you're asking... The example site seems to be down, and your explanation is quite confusing. I'm thinking maybe you are looking to keep the background image a fixed size while you scale the foreground? You could do that a few ways, but I'd suggest starting as a clipping path instead of the mask, and targeting that path specifically instead of the entire SVG... You could also scale the image inversely to the svg scale, something similar to:

See the Pen yLgMVpG by elegantseagulls (@elegantseagulls) on CodePen