Dipscom

You're close, almost there. Now are just typos and missing functions. - There's an extra "}" in line 14. - You still have "dispatchEventType" in your onCompleteParams that doesn't exist. - Although it works, you don't need the "this" in front of handleDabComplete and in onCompleteScope

That's fine James, places like CodePen just make it easier for us to actually see the code in context. It's not that GSAP is affiliated with CodePen or anything of the sort, you can use any online code editor of your choice as long as there's a way for us to see the code and tweak it live. It makes a world of difference when trying to figure out what is going on. For your example pen, you have a few issues. You need to include any libraries you intend to use. To do that: Click on the button that says "Settings" on the top right of the screen, to add JavaScript libraries, click on the "JavaScript" tab, there's a search bar, type the name of the library and pick from the results. I'm guessing you will be wanting GSAP and jQuery from what I saw in your code. After that, you have some unconventional setup that I am not familiar with. I am not sure what you expect $("anim") to return but I am pretty sure it won't be an object that you can access with "this.anim.scale". So, you might need some refactoring there. Also, you are setting an onCompleteParams with a "dispatchEventType" that doesn't exist - this will throw errors and cause your JavaScript to break. Finnaly you have a onCompleteScope set to "this" that looks redundant to me. I've made the bellow for you as an example, see if it helps: https://codepen.io/dipscom/pen/78011deb148a2f61e48f377f2921f525?editors=0011

Although we can't offer help on full site/application builds, we are more than happy to help with anything GSAP related so, if you find yourself stuck, let us know and I am sure there will always be someone around to lend a hand.

Hi @james.davies, Welcome to the Forums! Your callback should be onComplete: handleYoyoComplete - without the "()". It should fire at the end of the Tween, after it has repeated. I can't see what is wrong or why you are not seeing the result as expected. Could you provide a reduced case example? CodePen has supports TypeScript, you should be able to get it running there without any issues.

You're not missing anything. Looking at the entry now I see the text is not explicit enough. It implies the default value as being false but it should be clearer. It will be amended in due course. Thanks for pointing that out. Welcome to the Club. You will see life's greener now.

I was looking at this thread and waiting to see if you reported anything back after Jack's comment. To me, it sounds like an issue with onTouchEnd and onClick being fired by the iPad. I can't confirm as I do not have access to an iPad currently and cannot replicate. iPads have (or used to have, I haven't checked in a while) a slight delay before firing a click event. So, your event listener might be picking up the onTouchEnd as soon as you stop touching the screen and, after the 300ms, the click event is fired.

Let me point one thing out regarding this comment. The ClubGreensock and this forums are not related. Whether you have a membership to the club or not has no influence whatsoever on how you are treated in the forums or what type of answers your get or don't get. Everyone is treated equally, with the same courtesy and amount of effort to help. It might not be obvious to many but everyone here is giving away time for free. The money paid to be a member of the club goes to the development of GSAP tools, not for online support at the forums. The least one asking questions should do is: give as much context as possible, as simple an example as possible and make it as easy as possible for whoever is willing to help, help.

It's because you're setting the 0.5 in the default "stagger" place. Have a look at the docs for a full listing of the properties. // Instead of this .staggerFromTo(second.children, 0.7, { opacity: 0, yPercent: 50 }, { opacity: 1, yPercent: 0, ease: Sine.easeOut, stagger: 0.1 }, 0.5) // You want this .staggerFromTo(second.children, 0.7, { opacity: 0, yPercent: 50 }, { opacity: 1, yPercent: 0, ease: Sine.easeOut, stagger: 0.1 }, null, 0.5)

... providing one can afford the bill for the hire.

What is happening is that on the resize event you are telling the element to scale .from() a particular amount. But, because you already set that scale on load, there's no visible animation. You should be using .fromTo() instead of .from(). Quick show: //default scale: 1 // onLoad trigger scale: from(1.25) > to(1) // note that the current scale of the element is now 1.25 // resize event scale: from(1.25) > to(1.25) // no visible change when scrolling

What you are asking is a rather tall order. I very much doubt many people will have the time to get time to write the code necessary (happy to be proven wrong, though). As for pointers, the way I would do it is storing the size of the container element somewhere, working out the total area, then, every time a new item is dropped, you subtract it (plus all other items already in) from the total area available. When the total area is zero or less, you turn off the ability to drop new items into the container. You also wanting different size squares and rectangles will add even more complexity to it, by the way. I would suggest you first get a proof of concept going with squares of the same size before attempting to make it work with shapes of different sizes.

#whippedTogether

Alright, I understand now. Not that I can do much about this... ? @GreenSock himself will have to take this apart to see what's going on. It's above my paygrade. Just hang on there for a bit until he can get to the bottom of this. Thanks.

This is so beyond me I don't even think I understand what's going on... But, I do know we will need some way to see the issue. I understand it's something to do with Joomla, not GSAP itself but, do you think you can get a minimal installation somewhere that highlights the issue? Also, what is the issue? I'm not sure I follow what went wrong.

Animating grid-gap is not yet supported. It's on the horizon but hasn't arrived yet.

The boxes are moving out of position because (in Mikel's example) the Tween is set to be relative { y:"-=50" } so, whenever the intersection observer triggers, GSAP will tell the box to move from wherever it is plus another 50 units. Use absolute to stop that. Another thing to consider is to check if the box is already animating before creating the tween. The intersection observer fires when the element is entering the viewport and exiting so, depending on the speed of your scrolling or size of your viewport you might fire the call before the animation is finished. And, remember that you are moving the very same element that you are observing so, if you are observing when it enters or leaves viewport and you move it as it enters or leaves the viewport, there is room for triggering more events than you intend to if the movement brings/removes the element from the view.

Ikai, look at Mikel's post - That's the answer to your struggle.

I've said it before and I am not ashamed to say it again. I am scared of StackOverflow... You can add a Polyfill to cover the rest of the browsers (erm... IE) that do not support it. It's pretty good from what I have worked with. There are several. Bellow are a couple of discussions I can remember from the top of my head:

Oh wow. So simples, so nice. I is *totally* jealous. Be ready to be ripped off without warning.

Hello Ikai, Welcome to (the non-lurking side of) the forums! To me, it sounds like you should just look into the Intersection Observer API - with it you will be able to have each box fire a call to animate itself when it comes into view fairly easily.

Deon, did you see my update on my first response? It turns out there is no need to make a copy of the path, you can tween straight away.

Hi again Ronnys, I have no idea myself. @GreenSock will be able to answer that when he shows up.

To elaborate on what Mikel is pointing to: You need to be a member of Club GreenSock to use the premium plugins outside CodePen. You can try all that GSAP has to offer in CodePen but you cannot use the premium plugins available in CodePen outside it. It's also worth noting that you are not purchacing anything. You're joining a club, with that you have access to plugins not available to the general public. You won't own the plugins or anything like that if you join the club.

Happy to help.

You're in for a world of pain, I'd say. The kink you have in your concept is that GSAP needs to know the starting path and the ending path. Right out of the bat you will have to figure out a way to create a brand new path right at the start of this scrollEvent that is based on this in-between state path that you are describing. I don't know from the top of my head how to do it and can't really spend the time to research it. The good news is that would be the hardest thing. Once you have this new path you create a new tween to go from it to your path 'c' as the user continues to scroll. What happens next will dictate how much more pain you'll subject yourself to. If nothing else happens once the scroll is done. Fine, you're in the clear. If it needs to animate into another shape, get your logic hat on and plenty of coffee. My suggestion to you is to read on how you can generate a path based on a path. It really could be as simple as duplicating a node. Actually it does sound like that's all you need to do. Hum.... Just pause the looping animation and fire out a new morphing tween with the desired target path. Trigger those events like Craig described above. Proof of concept: https://codepen.io/dipscom/pen/ac616f5a247c7442a883b1ea9a4de9a5?editors=1010