Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by MexicoNewZealand

  1. 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

    • Like 1
  2. 43 minutes ago, GreenSock said:

    I would highly recommend checking out the new matchMedia() functionality in 3.11: 

    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.

    • Like 1
  3. 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:





  4. 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