Dipscom

Erm... This is looking quite a soup... It is still quite hard to conceptualise what is going on, from what I can see on these screenshots, you're inside a Wordpress installation, running a Gulp task, processing TypeScript. What is your Gulp task trying to do? I have very little experience with Wordpress, it's been a while since I used Gulp and Typescript is notorious for being pedantic. Do you think you can setup a smaller project where you mimic what you are trying to achieve without it being dozens of packages and a full wordpress installation? A tiny, simplified version of your Gulp task? Because I have a feeling your issue is not with GSAP, it's more like how all of those tools are working together.

It's because it's written using Smarter Animation Code™️

I made one too. ? https://codepen.io/dipscom/pen/NWdENmr

Hi Adeliosparis, Welcome to the forums. Are you able to give more context? It will be very hard to assist you without any context. What is your setup? How are you importing the bonus plugins? How are you referring to them? Can we see an example or the code you are using? Have you checked the docs page with the information about the bonus plugin and installation? https://greensock.com/docs/v3/Installation

Hi, thanks for the demo. It does help. Nothing is jumping out at me right now, I don't see any glaring issues with your code or the context in which is written. It could be that I am just not seeing the actual issue but I would say you should definitely wait until the DOMContentLoaded has fired before running splitText - what might be happening is your content is shifting at the same time that SplitText is setting up and it might be messing the DOM structure. On this last screenshot you have sent, it looks like every word is displaying as a block. As much as I refresh here, I don't see the issue you are reporting. Now I have to ask you to not link to a copy of SplitText as you have done in the CodePen. SplitText is part of the Club Greensock, it shouldn't be shared around and it shouldn't be posted on the open web. You can use all Club Greensock's plugins on CodePen for free anyway. Please remove that link and replace it with the one available on CodePen. You should also try to use GSAP's new syntax, it's more concise and full of other goodies.

Hi medamis, Welcome to the forums! Is it possible for you to create a minimal code example? I can see your screenshot, I can see your code but I cannot guess on what context what you are reporting happens. It really helps us to help you to have an example we can tinker with. Thank you.

Here: this is what you'll be needing to do, bind a variable to the instance of the component. https://svelte.dev/docs#bind_component

Well, I stand corrected. Everything I said so far in this thread has been proven wrong. As for the new question. You should target the instance of the component, I'm not able to work out which is the correct syntax as I'm messaging from a phone but, it should be something along the lines of "$el".

Yeah, that's very confusing, I agree. The catch here is that the example is tweening TO an autoAlpha of 1. It is not tweening FROM an autoAlpha of 0. .from() tweens have some quirks most people get caught on. You're just the newest victim. Because you are using a .from() tween, GSAP records the natural state of the element and uses it as the resulting effect of the animation. In your case, it includes the "visibility:hidden" which makes it not show. If you were tweening .to() an autoAlpha of 1, as the example in the docs show, GSAP will assume, because of the "visibility:hidden" that the opacity rule should be zero. So, it toggles the visibility to "visible" and sets the opacity to zero then, it tweens it to one. Does that clear your confusion?

Hello! You see in your CSS where you set visibilty to "hidden"? You're declaring the element's natural state to be hidden. Doing a ".from" tween will animate your element from the GSAP-declared values to the elements natural state. In order for you to achieve what you want, you need to not have the "visibility:hidden" set in your CSS or use the other tween methods that you have already noticed achieve your desired result.

There are a few different ways, it boils down to what you are supporting and how your project is setup. The "modern" way of prevent the parse-blocking is to add `defer` to the <script> tag (or the `async` one). <script defer src="blah.js"></script> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script The old skool way is to have only a tiny, tiny script at the bottom of your body tag that runs only after the `DOMContentLoaded` and the `load` events have fired. This tiny script then adds all other <script> tags to the <head> dynamically.

Hey Jakob, Syncing video and GSAP is tricky business. My implementation is full of holes as I mentioned and have never gone back to try and fix those. I have found cases where the video and the animation get out of sync so, be careful. An alternative solution that might prove a bit more resilient but requires more work is to to load the video file into a canvas element, render the video frame-by-frame there while controlling it with GSAP. If you need video controls and full screen you will have to implement that manually, though.

Glad to hear you managed to sort it out in the end Jacob. Well done.

From experience with other US-based companies, for the people who are not US residents, could you clarify if this position is open to one anywhere in the world?

Quite a few by the looks of it, I am afraid. But besides there being many of them, they have behaved well here.

Hello mindthegap, This was definitely a bunch of little things that together culminated on the issue you are reporting. First, is the fact that something in codepen is not right. It doesn't like the self-closing component you have: "<dragcomp [...] />" - I got it to work by changing it to being a normal open and close tag: "<dragcomp [...]></dragcomp>". Then, in my broswer (Firefox) the image does not appear if I am inside CodePen's editor but it does if I am in the debug view - no codepen editor at all. Which means, there's something funky there. Probably a security or CORS issue with iFrames. Then, and this was the biggest tripper I found, is the fact that you are setting the draggable bounds to be "svg". So, the second image is being constrained inside the first SVG because that's the first "svg" node GSAP finds. Join that the default behaviour of an SVG overflow property to be "hidden", your image cannot be seen but you can inspect it and see the bounding box being inside the first SVG. To solve this issue, you should add a $ref to the SVG itself and refer to that when instantiating Draggable. You should also add specific $refs to the other elements you want to target directly instead of using query selectors, there isn't much of a benefit to doing the this.$ref[this.classname].querySelector('.class') if you can simply do this.$ref['someId' + this.classname] I hope that helps.

Hey VOLTARII_MATTI, Again, welcome to the forums! You got your CSS rules mixed up. If you want the canvas element to scroll up when scrollTrigger unpins it, you cannot have it with a position:fixed in CSS, else, it will stay fixed. You need to use position:absolute. As for your question on the OBJ, Zach is the law here when he says the forums are focused on GSAP but we are allowed to give away pointers towards more information and/or solutions. You can have textures mapped into an OBJ file yes. But, if you are asking that, you probably want to learn how to do that. I would suggest you do a quick look up on exporting files from Blender, there will be tutorials out there showing how to export assets and their textures for the web.

This seems to be a popular thread by the number of people looking at it right now..

Canvas, probably with WebGL. It could have been Three.JS, Babylon or even hand-coded without a library.

Hi Zehra, We would love to help but, having two screenshots of tiny sections of you code does not help us to help you. The only thing I can glean from your screenshots is that if you already have played the animation once you need to rewind it back to its start before you can play it again or you need to put a zero in your play command - zeroToOne.play(0) - in order for it to play from the start on further calls. GSAP "just works"™️ so, it's likely that there is an error on your logic somewhere and for us to be able to identify, we would need to see the context in which this code is running. Having said that, we cannot debug your entire codebase to try and figure out. The best thing to do is to create a minimal example that mimics what you are trying to do and also shows the error you are encountering. You can use any online code editor of your choice, does not need to be CodePen, just somewhere we can see the context and are able to make changes if necessary.

Glad you've made it work. With the active varible set to always be false, the code inside the cursor() method will always be executed. Which means, the position is always updated, regardless of the dragging going on or the mouse moving. So, yes, that certainly helps. And, you probably can get rid of the active variable and all references to it, then.

You're already half doing it. const mouse = { x: pos.x, y: pos.y }; // this is your mouse object. [...] window.addEventListener("mousemove", e => { mouse.x = e.x; // this is you storing the values on mouse move mouse.y = e.y; }); [...] $carousel.on( 'dragMove.flickity', function(mousemove, pointer, moveVector) { mouseX = mousemove.clientX; // this is where it is going wrong. it should be mouse.x and mouse.y mouseY = mousemove.clientY; console.log(mouseX) gsap.to({}, 0.0, { onUpdate: function() { gsap.set(ball, { x: mouseX, y: mouseY }) } }) active = true; }); $carousel.on( 'dragEnd.flickity', function() { active = false; // and here you should also get the mouse coordinates and update your mouse.x and mouse.y });

You alreay have everything set up for what you need. The issue is that when you're updating the ball's position inside your 'dragMove.flickity' you're storing the values in "mouseX" and "mouseY", which are not shared anywhere. The values should be stored in your mouse object. Also, during your dragEnd.flickity event, you sholud also get the mouse coordinates and store the x and y in your mouse object, otherwise, it is likely that your circle will not stop where you expect it to.

I can't comment on what you did or not. I can only say that, on the repo you have linked, looking at the package.json file, I see no reference to GSAP as a dependency. Whenever you try to run this project if you have an import statement that refers to GSAP in the node_modules as in: import { gsap } from 'gsap'; it will fail, throwing errors given that there going to be no GSAP found. I have zero experience with React and will not be able to help you with that, however, I am happy to assist you as best as I can. I'll watch this tutorial you have linked later on so you and I can be on the same page. But, do update your package.json to inlcude GSAP as a devependency or you will not get rid of your errors.

Looking at your `package.json` I don't see GSAP being listed as a dependency - That's probably the root cause of your "Can't resolve gsap" error. What is this tutorial that you are following? Does it use GSAP as the animation engine or is it a totally unrelated tutorial that you are trying to implement adding GSAP to it?