OSUblake

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/

Thanks. We're looking into the problem, but can you tell me what browser and OS you are seeing this issue with?

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));

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
})

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

Welcome to the forums @Tokilab

It's usually best to create a new topic. Are you seeing the same problem as in this thread?

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.

Looks good! Thanks for sharing.

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 });

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.

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

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, {
  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()

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

We're looking into it.

We're looking it.

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. 

Yeah, it's just an oversite, and I'll add a window to the DOMTarget for the next release.

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.

Quote

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

Welcome to the forums @muradgm

You should really go through our React guides first. Every animation should be created inside an effect.

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.

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

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.

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. 

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

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())

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. 

I'm not sure I understand the issue. Can you make a minimal demo that shows the problem?

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.