Jump to content

OSUblake last won the day on November 19 2022

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by OSUblake

  1. Hi Michael,


    Have you seen the new Observer plugin? You can simply some of your event handling with it. 😉




    As far as the rotation goes, you'd have to do some math to get it to work correctly, kind of like what is shown in this post for making a generic directionalRotation plugin. The code in that pen that is inside the if statement for short is what you would need to do.



    Or just use the built-in directional rotation, but you'd need to use a regular tween.


    gsap.to(this.elRotation, {
      rotation: `${degree}_short`,
      overwrite: true


    See the Pen mdpZQEZ by GreenSock (@GreenSock) on CodePen


    • Like 3
  2. 12 hours ago, robs said:

    So far it works well. However I still have one question: how can I determine that the div is autoRotating without flipping the div upside down? Like this:


    I'm not sure what you mean by this. It will autoRotate if you set it to autoRotate.

    gsap.to(div, {
        path: "#path",
        align: "#path",
        autoRotate: true, // it's rotating
        curviness: 1.5,
        alignOrigin: [0.5, 0.5]


    If you need to check the actual rotation value, you can use gsap.getProperty() at any time.



    • Like 1
  3. Welcome to the forums @travisf


    3 minutes ago, travisf said:

    target SVG does not show up


    That might be a good place to start. Remove GSAP from the equation, and get the SVG to display first. I'm also not familiar with svelta, but I'd imagine that it probably have some type of "ref" like other libraries like React and Vue. It's usually best to use a ref the library provides instead of a string selector like '.path'.


    • Like 1
  4. Welcome to the forums @holy-script


    I'm not sure what exactly is happening, but changing around the DOM like that in a library is supposed to manage the DOM is probably not a good idea. It's going to create similar issues to React.



    And another issue is  probably due to the fact that you are Flipping the same element you are animating to frames for, meaning both might have a x animation at the same time. You should Flip a container intsead of the same element you are changing the frames on. 


    • Like 1
  5. A web component connection is going to be similar to an iframe, so you should use the pinSpacer property. It looks like you were on to the right idea, but it's not a boolean.



    Element - normally ScrollTrigger creates a <div> internally to wrap around pinned elements but in the extremely rare scenario where you're loading an iframe into the pinned element, it can cause the iframe to refresh when ScrollTrigger refreshes (like on window resize), so this feature allows you to specify an element that should be used as the spacer instead of the internally-created one. That way, ScrollTrigger won't remove/add it during its refresh, keeping iframe content intact.


    See the Pen rNpgdwZ by GreenSock (@GreenSock) on CodePen


    • Like 3
    • Thanks 1
  6. Welcome to the forums @AliDemir


    I'm not seeing any shaking, but even if it is, it's nothing GSAP is doing. GSAP is just changing the property. The browser is doing the rendering. Animating a transform property like scale instead of a layout properties like height can result in smoother animations, but it might require some creativity to look right.


  7. What do you mean by a custom element, like a web component? 


    I can't recall anyone ever bring up an issue like this before, so it's really hard to offer any advice without see issue in context. The key to getting question answered on this forum in a timely and accurate way is to provide a minimal demo. The smaller and more focused the demo, the better. 

    • Like 1
    • Thanks 1
  8. 6 hours ago, ryjohnson said:

    I'm able to get the Observer to initiate on pin, but I don't see anything in the docs about programmatically disabling the Observer and unpinning the ScrollTrigger once the animation is complete. Is there something I might be missing, or an example you could point me towards?


    Both plugins have disable/enable methods, but you really can't programmatically unpin a ScrollTrigger. It unpins when it's reached it's end bar position according to the actual scroll position.


    I tried making a simple demo using Jack's second idea, and it does not work well in browsers that have a smooth scrolling effect, like Edge on Windows. It was possible to blow partially past the pinning if you scroll fast, so it may not possible using that technique without a lot of work. 


    I would definitely try Jack's first suggestion of just using a container that is fixed.