A H

Hey everyone- I am trying to have a set of items fade into a modal (of sorts). It kind of worked at one point when I had multiple timelines and flips but I was hoping to use a master timeline and add the tweens to it. Now it is leaving styles and sometimes the toggleClass in place at the end of the animation. I'm using tl.reverse() on close instead of having to manage multiple timelines. What am I missing that would make everything jump and leave the styles/classes? I know clearProps exists but it doesn't seem right for this instance. Any help is greatly appreciated. Thank you.

Hey Jack- Your bulleted list and commented code really helps. I knew I was missing something that was super close. What I was struggling with the most is that I have three elements that "move as one" (but not really) within outer container. So i'm using the viewport to tell them to stick at the center but needing the whole container to move when it reaches the bottom. I didn't know you could nest a scrollTrigger inside a scrollTrigger. I had been focused on the viewport and using the scroller property to try and do it which just kept giving me weird results like completely losing one of the items or looking at independent triggers and the batch() function to somehow do it. Making the end property a function, I never knew you could get the properties of another scrollTrigger and pass them like that. This is really cool learning and actually may make some of the other triggers simpler (famous last words I know). The note on margin collapse is great. I don't know for certain the margin is needed since the items are scrolling, might be worth putting them in a prefers reduced motion query so that when i turn off scrolling it applies them and they just appear as a flat set of spaced divs. Thank you for taking a look. I'm pushing for our organization to join Club GreenSock. MorphSVG and the MotionPathHelper alone look worth the price it's just not a decision I get to make. Take care.

I appreciate the time and I understand what you're saying. I feel that by putting that message up it shuts down anyone else from attempting to assist. People look at the question and see "the person has been told to figure it out" (the post history tells the story when each post is 1-3 replies and the post dies). It's easier to accept "no one has time, knows how to assist, or they don't understand what you are saying, therefore no one has replied" rather than being told your question is invalid and you can pay someone if you want. Forums are organic and community driven, right? There is no need for you to look at it later or a rush even. It's appreciated but the question isn't to stress anyone. Just looking for if I'm misusing something or close but need to look at something specific. I have spent weeks in the examples and documentation creating fun work with GSAP but this has me stumped. Thank you for the reply and understanding my frustration, Jack.

There are hundreds of examples on this forum of people asking for help and having people attempt to troubleshoot. I have gone through the examples as I said but they don't discuss doing anything where items stack and move together. I'm not asking anyone to do it for me, just asking for direction using your product to solve a specific problem so I detail it out. This is the second time posting and the second non-answer. What's the issue? Why do some people get help and others are told to pay someone else to use your product?

Hey everyone- I have an interesting mockup from my designers and I have racked my brain for weeks on how to accomplish it. The idea is that there are three sections., Each scrolls into the viewport and locks in the middle of the screen. The next section scrolls into view and then locks at the same position basically overlapping the other div until all items are in the center of the viewport and then scrub up together. I have been trying to use Pin and potentially the scroller properties on ScrollTrigger but have hit a wall. Does anyone have advice on how to make this happen? The current problems are that the pinned item begins to move as you continue to scroll which I believe is an issue with my "end" property value or the way I have the parent container setup (sadly I have to use bootstrap on this). The next issue is that the sections text below the boxes move up into the scrolling boxes as you move down the page. I have attached a codepen that i hope illustrates the current state of things. The code was so easy to setup but has been so difficult to get right. Any assistance is appreciated. Thank you!

I don't find this answer super helpful. The problem seems like something people would encounter all the time. Using the dynamic nature of GSAP doesn't stop the issues with clicking and hovering on and off. Wouldn't that exacerbate it? If the hover animation is halfway done and you call kill(), wouldn't it return to the initial state? Wouldn't making the timelines dynamic in the functions like expand(), collapse() and cross() lose any concept of state with the animation meaning if it's expanded, made into an X, in-motion in or out, etc? It feels like they are isolated as much as I can to still illustrate the issue occurring. Thanks

Hello! I’ve spent a long time combing the forums looking for an answer but haven’t been able to find something that I think fits the problem. I have a navbar with a custom hamburger button that has some animation for hover and click. I am having trouble understanding having two timelines that must operate in sequence. Some detail: 1. When the user tabs to the button or hovers, the bars should slide to a full-width hamburger. 2. When the user clicks or hits enter/space to activate the button, it should finish the hover animation regardless of its position and then activate the click timeline which slides out a nav (in the simple demo it just changes a box color and text for ease). 3. When the user clicks the X, it should reverse the animation. 4. When the user mouses out or blurs, the hover should reverse. I feel I am close but continue to get odd results. Hover animations firing when exiting but only going halfway, quick bounces on mouseout, etc. I know with the version upgrade to 3, class manipulation was removed, but I was trying to use .set() or functions to manipulate classes. Is there a smarter way to do these kind of multiple interactions? Conditionals in lifecycle methods like onComplete()? Should they be one timeline that only goes halfway on hover and then continues on click? .progress()? Any assistance would be great. Thank you!