[How to use different background colors in mixed blend mode multiply to achieve knockout text effect successfully]

12 hours ago, GreenSock said:

It sounds like you need masking or clipping, not a mix-blend-mode. 

out of curiosity how would i go about achieving this?

[How to use different background colors in mixed blend mode multiply to achieve knockout text effect successfully]

Hi! 

 

I have a quick question for a small project I am building and that has some GSAP animations. The knockout text effect created in the code pen above uses mixed blend mode: multiply to achieve the desired knockout effect. For this to work, the parent div (.text) needs to have a background color of black and the actual text needs to have a color of white to create the knockout effect. I am looking to implement a yellow background color but mixed blend mode multiply requires black and white to work; are there any solution to achieve my goal of having a yellow background color? All help will be greatly appreciated!

See the Pen eYMjLxP by justjoinednow (@justjoinednow) on CodePen

[How to Dynamically update GSAP Scale values in a FromTo based on screen resize]

43 minutes ago, GreenSock said:

I would highly recommend checking out the new matchMedia() functionality in 3.11: 
https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

Also, it’s far better to use the transform shortcuts like scale, x, y, rotation, etc. than using “transform” strings like that. Faster and more accurate. 

And yeah, you could have a tween and then in a “resize” event just record the progress of that tween, kill() it, create a new one to the new destination value and set its progress to that recorded value. 

Hi Jack, thank you killing the tween and creating a new one solved the issue.

[How to Dynamically update GSAP Scale values in a FromTo based on screen resize]

Hello!

 

Im having trouble dynamically updating the value of the endScale, currently it is 0.2; but i am after an effect where the scale updates and changes based on window resize function(). I have tried implementing this but unfortunately having a few troubles.

See the Pen eYMjLxP by justjoinednow (@justjoinednow) on CodePen

[Scaling down knockout text using GSAP]

1 hour ago, mvaneijgen said:

You can play with the transformOrigin: "50% 60%" property to animate it from a specific point. See the MDN docs for more detailed explanation https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin 

 

 

Hi, appreciate your response, a colleague of mine suggested a javascript fix; which one do you think is more suitable in this approach? Do you think it makes sense, it ends up with the text being in the center rather than you using transformOrigin directly? 

See the Pen eYMjLxP by justjoinednow (@justjoinednow) on CodePen

 

 

1 hour ago, mvaneijgen said:

 

 

 

 

[Scaling down knockout text using GSAP]

Hi Everyone!,

 

I am trying to accomplish an effect using GSAP where the scale of the letters (SPECTER) goes from 40 to 0.2. I want the scale to occur from the letter 'C' so we see the whole video at first and then the scale goes down to reveal the words 'Specter'. I am having an issue calculating so the effect starts from the C exactly. As you can see above I have added a calculation for the transform so its (transform: 'calc(50% - 18px), 50%) 50% being the middle and 18px being the distance between both points in C. I would like some guidance on how this can be achieved using GSAP.  It is very similar to this other codepen (

See the Pen MWVBQZg by justjoinednow (@justjoinednow) on CodePen

)

 

Thank you 

See the Pen MWVBGqX by justjoinednow (@justjoinednow) on CodePen