Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

SVG animation for character

Recommended Posts


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.


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

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.