Jump to content
Search Community

OSUblake last won the day on September 16 2023

OSUblake had the most liked content!

OSUblake

Moderators
  • Posts

    9,196
  • Joined

  • Last visited

  • Days Won

    708

Everything posted by OSUblake

  1. Welcome to the forums @kingcrimson You can probably find an expert by posting our Jobs & Freelance forum... https://greensock.com/forums/forum/15-jobs-freelance/
  2. Thanks. We're looking into the problem, but can you tell me what browser and OS you are seeing this issue with?
  3. Also, the y component for atan2 goes first. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2#syntax const radians = Math.atan2(e.clientY - this.center_y, e.clientX - this.center_x); const degree = (radians * (180 / Math.PI));
  4. Hi Michael, Have you seen the new Observer plugin? You can simply some of your event handling with it. ? https://greensock.com/docs/v3/Plugins/Observer 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 }) A Pen by GreenSock (codepen.io)
  5. Welcome to the forums @Tokilab It's usually best to create a new topic. Are you seeing the same problem as in this thread?
  6. Can you send me a reduced version of your project, like a repo or zip? It's really hard trying to answer a question without seeing the problem first hand. You can DM me if you don't want to share publicly in the forum.
  7. Hi JJJ, You can use gsap.set(). And you don't need to make your values a string. https://greensock.com/docs/v3/GSAP/gsap.set() gsap.set(".dot", { y: 0 });
  8. Hi kaii299, That sounds more like a question to take up with smooth-scrollbar support. We really try to keep these forums focused on GSAP-specific questions.
  9. Hi @Michał Zagojski If gsap is undefined you're not importing it correctly. It's impossible to say what the issue from a screenshot. And how did you get the bonus plugins? I don't see a membership attached to your name? If you just to test drive the plugins, you can use gsap-trial. https://www.npmjs.com/package/gsap-trial
  10. I'm not sure what you mean by this. It will autoRotate if you set it to autoRotate. gsap.to(div, { motionPath:{ 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. https://greensock.com/docs/v3/GSAP/gsap.getProperty()
  11. Welcome to the forums @travisf 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'.
  12. 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.
  13. Yeah, it's just an oversite, and I'll add a window to the DOMTarget for the next release.
  14. 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. GSAP Starter Template (codepen.io)
  15. Welcome to the forums @muradgm You should really go through our React guides first. Every animation should be created inside an effect.
  16. Welcome to the forums @floop I didn't check your math, but I think you just need to add the rotation into the from part. Also, you should never animate transform directly. It's better to use GSAP's built in transform properties like x, y, xPercent, yPercent, scale, scaleX, scaleY, skewX, skewY, rotation, etc. GSAP Starter Template (codepen.io)
  17. 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.
  18. Yeah, that sounds like the correct behavior. There's really no way to normalize that, so you would have to manually listen for events and do the scrolling yourself. You could definitely leverage the new Observer plugin to help out. Just a quicky demo showing how. Modal with scrolling text 90 rotated (codepen.io)
  19. One thing to keep in mind for effects is that they are just ScrollTrigger instances, so would need to kill the old ones off in your media query listener. // do this first smoother.effects().forEach(t => t.kill())
  20. 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.
  21. I'm not sure I understand the issue. Can you make a minimal demo that shows the problem?
  22. 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.
×
×
  • Create New...