Jump to content
GreenSock

marquizzo

Members
  • Posts

    5
  • Joined

  • Last visited

Posts posted by marquizzo

  1. Have you looked at the ScrollTrigger video? If you skip to section 3 (at the 2:50 mark), it talks about toggleActions and how to trigger an animation when an element enters the viewport. Then section 4 (at the 5:10 mark)  talks about the start attribute, I think the problem is that you're using "top center", which waits until the image reaches the center before starting the animation. You probably should be using "top bottom".

    • Like 2
  2. I have 2 identical <svg> hearts.

    • The left heart scales up via CSS transform from translateX(2px) scale(0); to translateX(2px) scale(1);
    • The right heart scales up via GSAP from {x: 20, scale: 0} to {x: 20, scale: 1}

     

    As you can see in the CodePen demo below, the left CSS heart grows smoothly to the center of the container, but the right GSAP heart goes haywire and flies almost entirely off-screen because it uses a transform matrix of matrix(1, 0, 0, 1, 20, -19.977) with a y-value of -19.97?. Additionally, it overrides my transform-origin to 0px 0px 0px. The transform origin was initially set via CSS to `8px 20px` so it's at the bottom tip of each heart, so why try to override it?

     

    whyOverride.jpg.bc7ae4b3515c7059e5cfcca54acc8fcf.jpg

     

    There are probably many workarounds to fix this, but can I simply tell GSAP to stop using transform matrix(), and not override my transform-origins? I just want a simple tween from translateX(2px) scale(0); to translateX(2px) scale(1); without anything fancy under the hood.

    See the Pen GRxWPGE by marquizzo (@marquizzo) on CodePen

  3. I've been a Shockingly Green member through work for about a year now. I noticed that on previous projects, we had

    "gsap": "npm:@gsap/shockingly@3.7.0"

    package.json file and the SplitText plugin was included in the node_modules/gsap folder as expected. Here's a screenshot of our /gsap/all.js file on version 3.7.0: 

    shockingly-3-7.jpg.77757f8b29822c31958eb02aeaededfd.jpg

     

    However, I've upgraded to version 3.8.0 on our latest project, and all the bonus exports are commented out. The corresponding JS files are completely missing, so I cannot use `SplitText` plugin anymore:

    "gsap": "npm:@gsap/shockingly@3.8.0"

    shockingly-3-8.jpg.263ac3da4199e0c58cdf075a0162b29b.jpg

     

    Why are they unavailable on version 3.8+? Is this by mistake?

×