darkus

More updates, I have solved the square to circle issue, with some CSS changes, and the animation stays. YAY! Some outstanding questions: 1. Is it possible to have the flip be part of the scrub as the user scrolls the wheel? Right now if the user is scrolling slowly, then the flip happens very fast and goes beyond the screen until the user catches up to the position. This problem is exacerbated when the user goes backwards up the screen, as the flip animation only happens when back at the top of the area 2. Flip seems to add some noticable lag to the screen, can all this be done without flip in order to improve performance? https://codepen.io/darkuss/pen/wvYLVWv

Actually, ok I made a fork of yours and got it much closer! It was because my old may of moving was still there, so I removed that part and now the flip seems to properly move it! However, whats interesting is that in converting the image to a circle with the GSAP animation, it goes back to a square with the flip. If I made the green target box into a border-radius:50% with overflow:hidden then it hides the entire flip animation, any ideas? PS. Adding flip seems to make the entire page very laggy, is that soemthing to deal with for now? https://codepen.io/darkuss/pen/wvYLVWv

WOW. I've learned alot already from this post--- but yet much more to learn. One thing is that, the way the fork appears on my screen, the image sits at the bottom of the pinned area (yellow box) and doesn't go into the grey area. But when the grey area sticks the image is in the right spot ultimatly, but it does not actually animate there. It just appears there later. Is that the way you are seeing it too?

I am by far no expert and only learning GSAP myself for the last week or so, but heres what I came up with which works, but be careful as it may have problems. In my eye, you were not actually seleccting the number within each section, so I added those parts into the sections.forEach https://codepen.io/darkuss/pen/poxXXvY

Is it possible to show the HTML?

So what Im trying to do is take an image from an initial content area, have it change its shape and move to overlap a second content area, specifically the location of a #finalTarget div. I do this by pinning the image while it changes shape (from a square to a circle) and then determining the coordinates of the final destination div (#finalTarget). The problem I'm having is that it seems to be moving my div only witin the intiial pin area, and will not move beyond the pin area (first content area) into the second content area to overlap. Maybe its not actually possible to move an object from one containing div to another? Hopefully my codepen does a better job explaining then my words, but here is the expected sequence of events 1. Yellow box content area should pin and then "Some cool text" and image should reveal --- Success! 2. Image should then change size and become a circle as the user scrolls while staying on screen, ideally sort of center screen-ish --- Success-ish! (the image moves down very quickly and does not center, but that might be an issue with the timing and I can play with that) 3. Image should also move to a final destination which is going to be wherever #finalTarget is (could be different location depending on screen size) --- FAILURE 4. The Grey background content area should pin --- Success 5. The letters 'C o D I N G !' should appear (the o is formed by the circular image) --- FAILURE A second problem has to do with #5. The letter inside the grey box never appear for some reason. I can sort of fix it by adding 'immediateRender:false'. The problem with that is that on the first cycle the letters are visible, and you have to scroll through it once and then it will properly dissapear and appear. Not sure what that is about, but that is a secondary problem. Main problem is trying to get the image to overlap the green square Is this even possible?

Out-freaking-standing. Thanks again!

Oh yes, that would work and would be great! Secondary question: Looking at some other threads, it looked like I have to install some kind of key file on the server itself, is that true? I don't unfortunately have access to the server to do any kind of installation like that. All I can do is upload JS/html/php files Thanks!

So im in love with GSAP right now. Game changer. I've seen some demos for SmoothScroller and it seems to take things to yet another level. I really want to use it for my site. My problem is that I have an allergy to subscriptions of any kind I'm not at all against paying for hard work when its deserved (its much so in this case), but Id rather just pay once and not have to worry about yet another subscription floating around. So is there any way I could purchase it as a one time purchase? It would not go into any kind of commercial product dealing with websites or anything like that. It will be for a website used for an office, but only for that single website and not redistributed Thanks!

Ok nevermind, I've answered my own question. Conceptually what I was doing was WRONG. I had to do all those workarounds because I had set a pinnedContainer and set the pin itself to a defined container. By simply chaning pin to true, then everything is lining up correctly and problems are solved

This is a conceptual question, so hopefully the lack of sample code is OK here. So far I've been using GSAP for 2 days and its SLICK and a game changer, I've got most everything working as I wanted and its beautiful. Setting most of my page up was an absolute breeze. HOWEVER, I've run into a snag and was wondering if I'm approaching the problem in a correct or incorrect way. I've pinned a div section, and within that pin section I have alot of animations going on within nested divs. After the pin releases (after 1500px), then I continue to scroll down where there are more gsap animations happening. The problem is the start points of all these subsequent animations are way off (about 1500px) because of the aformentioned pin. So conceptually, what I came up with a solution is 1. I created a variable `var pinAmount = 1500` 2. In all subsequent animations, I add my pinAmount to whatever the original setting was: `start:pinAmount+300+" 75%",` This is working, but as I add more and more animations below the pin, the code/timing is getting ever mode complex and its really hard to keep track of where everything is. I'm now spending alot of time debugging the start and end positions for everything below the pin. GSAP setup for everything above the pin was an absolute breeze, because I could base everything off the relative start and end of a container. Adding a second pin will be a complete nightmare at this point. The ultimate question is: Am I doing this correctly? Am I supposed to just keep track of pin heights programmatically and then account for them in subsequent GSAP animations, or is there a much smarter way where GSAP can realize where everything is relative to the pin-releasepin? I'm hoping there is a smarter way...