Making a double style transition color with greensock (gsap) and react

[southamericanbear]

I everyone is there any gsap expert in the room? Let me introduce to problem.

I was asked to build and spinner that render like the video 

My choose to achieve this is the library gsap(greensock) that it's really awesome. What I was available to build was this: https://codesandbox.io/s/loving-roentgen-od405r?file=/src/App.js:59-63 It's very close to what I was ask to build but there is an issue with the change of color of the V.

Is there any change to achieve that? It's there any way in css or gsap to render two different colors in a letter?

 

 

[Cassie]

Hi there, welcome to the GSAP forums.

That figma link just hangs for me I'm afraid. But without seeing the link - GSAP doesn't do any rendering, it just animates properties, so you'd need to look for a CSS or potentially SVG/canvas solution.

Have you got a screengrab of what you're trying to do? Maybe someone can help.

[southamericanbear]

14 minutes ago, Cassie said:

Hi there, welcome to the GSAP forums.

That figma link just hangs for me I'm afraid. But without seeing the link - GSAP doesn't do any rendering, it just animates properties, so you'd need to look for a CSS or potentially SVG/canvas solution.

Have you got a screengrab of what you're trying to do? Maybe someone can help.

Hello Cassie I change the figma for a video proof, the topic is painting the V in two different colors, like in the top left side mid green and the rest white

[Cassie]

This definitely looks like an SVG task.

Do you have access to an SVG of the logo? If so that will help you a lot. 

Here's a little example of the sort of setup you'll need.

 

See the Pen OJQEopY?editors=1000 by cassie-codes (@cassie-codes) on CodePen

 

This article isn't explaining the exact effect that you're after but it's the same technique, give the article a read and pop back if you have questions. It'll be extra helpful for us if you get hold of the logo!

https://www.motiontricks.com/invert-svg-text-with-a-mask/

[southamericanbear]

@Cassie Hi Cassie, hope you have a nice start of the week, I'm already reviewed the links and the codepen you gave me I have a better gasp of what it's the best practice to achieve this.

 But I found a problem where I don't know why is not working with the svg of my project, if you can take a look https://codesandbox.io/s/trusting-matan-cpsily?file=/src/App.js

It's some kind of weird bc it's exactly the same as the melon example and also I repreduce the melon example in react too and works fine

[SteveS]

@southamericanbear Your SVG does not have green in the example you linked. This is an issue with your SVG. Maybe I'm not understanding the issue.

[southamericanbear]

@Cassie

 

I think I achieve the goal https://codesandbox.io/s/trusting-matan-cpsily?file=/src/App.js thank you so so much

[Cassie]

Good job pal!! 🥳 Nicely done!