Guest Babak20 Posted October 5, 2021 Share Posted October 5, 2021 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 Link to comment Share on other sites More sharing options...
elegantseagulls Posted October 5, 2021 Share Posted October 5, 2021 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 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now