OSUblake

Eases are just functions now.
var easedValue = Power2.easeIn( value );  
Note that you can use use gsap.parseEase() to get the ease function from a string.
var power2In = gsap.parseEase("power2.in"); var easedValue = power2In( value );  

Just try one that looks good to you. They are all going to be pretty close except for back, bounce, and elastic.

Hi tracta,
 
Do this work for you? I just added will-change: transform; to the CSS.
 

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

Welcome to the forums @Konnan933
 
stagger isn't going to work for a single element, so you could do something like this. 
 

See the Pen MWQjByJ by GreenSock (@GreenSock) on CodePen
 
More info about staggers...
 
https://greensock.com/docs/v3/Staggers
 

The first thing you need to do for React is to make sure React 18 isn't going create any issues. You need to make sure it doesn't create something twice.
 
 
You also need to create that smooth scrollbar thing before creating your ScrollTriggers. Code in a child component will run before their parent, so that means your smooth scrollbar is being created last.
 
 

Your effect did not have an empty array at the end. 
 
 
Please, just go through the React guide. 
 

I think you just need to get rid of the pointer type.
 

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

Hi Sam,
 
You don't need that load event listener as ScrollTrigger refreshes on load.
 

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

You can use the MotionPathPlugin.
https://greensock.com/docs/v3/Plugins/MotionPathPlugin
 
 
Percentage based transforms are based on the width/height of the element. It does not work the same as say left: "50%". However, you can use other relative units, like vw.
 

You can check for that condition and then disable the observer.
https://greensock.com/docs/v3/Plugins/Observer/disable()
 
But I would advise against trying combine normal scrolling with the Observer as it can get overly complicated. That is something you will need to figure out on your own.
 

Hi Ramzdam, 
 
 
Please don't do that. You do not need React.
 
If you're using modules, then you should do the import thing, otherwise just a <script> tag.
 
https://greensock.com/docs/v3/Installation?checked=core,observer
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/Observer.min.js"></script>  

Hi GGQa,
 
You just need to loop through every item based on the column, kind of like a 2D array. And you can replace that .set() call with gsap.quickSetter.
 

See the Pen ExQVrJr by GreenSock (@GreenSock) on CodePen
 
Also, you can use our new Observer plugin to handle most of your events.
 
https://greensock.com/docs/v3/Plugins/Observer
 

Thanks for demo. Like I was saying earlier, you can use a Timeline's position parameter to control that.
 

See the Pen XWZmKrG by GreenSock (@GreenSock) on CodePen
 
Also, if you are going to animate the same element more than once, you may want to consider use fromTo animations instead so that you don't create from logic issues.
 
 

Hi Shaun,
 
I would keep everything scoped inside a function, kind of like this. And I would also use fromTo animations just to make sure you don't into any from logic issues.
 

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

Welcome to the forums @macl
 
That's all possible, but you can't target a number itself. You can animate any object, for example, in some WebGl libraries you would animate the object that has the uniforms on it.
 
gsap.to(myObject.uniforms, { someProperty: 1, ease: "bounce" });  
But it's hard to answer what you should target without seeing some code. 
 

Hi BC, 
 
That seems a little odd so I'll need to investigate that some more, but here's a work around for now.
 

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

I'm not sure what you mean, but you really shouldn't have that set if you're doing anything remotely related to scrolling with JavaScript.
 
 
Also, I'm not sure what mean here. What breaks? 
 
I was nudging you towards the first solution in that thread because I know more people have had success with that solution, but I don't know what issues you are experiencing.
 
 

Hi tractaNZ,
 
I'm a little unclear about what you're asking here. This really isn't the best place to ask about barba's API, but I would assume that if you transitioned to a new page, then you would need to create your ScrollTriggers again. It's whole a new set elements, so even if your previous ScrollTrigger instances were stored in memory, refreshing isn't going to do anything as those elements don't exist anymore.
 
And you don't need to include a function inside the same file to call it. Assuming you didn't nest scrollFunction inside another function, it should be global. If not, you can always make it global.
 
window.foo = () => { console.log("hello"); }; // in another file foo(); // hello // or window.foo();  
 

Hi Julien, 
 
Have you checked out the Helper Functions page? There are some functions in there for getting the scroll position.
 
https://greensock.com/docs/v3/HelperFunctions#getScrollPosition
 

Yes, it makes sense. We get questions like this all the time, and they almost always end up with a very convoluted solution. To me it doesn't make sense to use ScrollTrigger or ScrollSmoother if you can't freely scroll around the page. Stuff tends to end up glitching, just like that site you linked to.
 
https://gyazo.com/b2735d1e2be31a22482345465f27a742
 
I would recommend checking out the Observer docs and that demo. ScrollSmoother is just translating the smooth-content section up and down. You can do the same with the Observer by animating some container and even trigger custom animations when it animates into position.
 

I think you might need to use the data thing if you want full TS support without going through a bunch of hoops. This is the exact issue, but there is no good solution as the type will always be any and you have to use $options.
https://github.com/vuejs/docs/issues/694
 
Unless you add some custom types...
https://github.com/vuejs/docs/issues/721
 
But, I can't believe I didn't see what the initial problem was. This is not setting the type. It's setting myDraggable to the actual class.
myDraggable: Draggable  
To get it to work, we actually need to define the type for the data object that is return by the function call. No errors here.
export default defineComponent({ name: 'App', data(): { myDraggable?: Draggable } { return { myDraggable: undefined, } }, mounted() { this.init(); }, methods: { init() { let proxy = document.createElement("div"); this.myDraggable = new Draggable(proxy, { trigger: ".wrapper", type: "x" }); }, disableDraggable() { this.myDraggable?.disable(); } } });  
If anyone knows a cleaner way to do this in Vue 3 without having to use data, please do share 🙏
 

Is this the same question/issue you were asking here?
 
 
 

You just need to set overflow: visible on your SVG. 😉

Welcome to the forums @navug
 
 
There is no right way. That's something you'll figure out over time as every situation is unique. What works well in one case may not work that well in another. 😉
 
And your code looks fine. If you wanted, you could shorten it a bit with GSAP's toArray utility.
https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray()
 
function createTimeline() { const tl = gsap.timeline(); gsap.utils.toArray("img").forEach(element => { tl.add(createTween(element)) }); return tl; }  

There is definitely something horribly wrong with how SvelteKit and or Vite handles imports. In production is not even importing ScrollTrigger. What's strange is that it works when importing the minified version. 🤷‍♂️
 
// works import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.min.js';  
What's even stranger is that it's mixing imports. It's definitely importing the ES Module version of gsap, but importing the ES Module versions of the plugins doesn't work, which is why you have to import the UMD files from the dist folder, but it should not be like that.
 
I'm still investigating how to fix this. Not sure if it's something we need to add to our package.json, or it's something that can be resolved with Svelte or Vite configuration.
 
In the meantime, here's a workaround that seems to work, and is actually what I recommend for any project that uses modules. Create a file to import gsap and all the plugins you are going to use and register the plugins in that file. That will save you from having to write multiple imports in your files and registering the plugins over and over again.
 
 
issue.zip