Leaderboard

Hey! Just parachuting in here, but maybe we're focusing on the solution you've attempted instead of the problem you're trying to solve? This made me remember something that may be useful? Without using a motion path, another common animation pattern for curved motion is to animate the x and y values with different eases to get a curve. Check out this demo - https://codepen.io/snorkltv/pen/dyoxXaQ This is useful because it's not trying to animate the element through set coordinates, it's more dynamic. There's a start and end and it's the ease that's handling time rather than position to make the path curved I needed to do a curved flip animation a while back and found out that you can separate out x and y and animate them individually with customProps. (undocumented right now because animating the properties in a flip animation is quite a rare need due to it's dynamic/transitionary nature) but if you want a curved path - it allows you to separate out the properties in the flip animation and ease them individually. https://codepen.io/GreenSock/pen/bGjXGeX/cc6a1577ab5d5ea8ab0722dc407a7929?editors=0010 Maybe that will achieve the "scenic taxi route" for you?

Thanks for the image. That's a great way to try to keep track of the points. Sorry, for any confusion, but in my haste I actually had the "bar3" values duplicated in my clipPath code which is why you were seeing extra points. Thanks for catching that. I removed the extra row of values. As for the from values, you can use those point objects for each bar to come up with a totally custom starting position using a set(). In the demo below I removed the animation to hopefully make it easier to understand how each bar now has a custom y starting value https://codepen.io/snorkltv/pen/qBwMPMw For what it's worth, keeping track of all those points in the clipPath string is pretty tricky for me too, so don't feel bad if it feels like a lot ot take in. As for using svg, the post @mvaneijgen linked to is quite comprehenisve. However, below is a demo from one of my svg lessons if it helps https://codepen.io/snorkltv/pen/rNKVrYx there are now 10 clipping and masking video lessons in SVG Animation with GreenSock if you want to dive deeper.

If you're not changing the x value all you could just add another tween to animate that? https://codepen.io/GreenSock/pen/WNWgdZV?editors=0010 The box was invisible becasue there wasn't a background color defined, the previous codepen used an external stylesheet. How did you 'clone' it? If you just pressed 'fork' at the bottom it should have just copied everything exactly. This video shows where the fork button is

Thanks @GreenSock It helps a lot. As for the reason I do not precalculate, I guess it's because I rely on getVelocity() in other parts of my code where the sampling is good enough for those other purposes and I didn't even think about using something else, that's my obsessive tendencies I guess 🙂

Amazing. Thank you, Cassie. What you said makes sense. I'll spend some time dissecting your JS to better understand how you actually did that. Once again, thank you. The community behind GSAP is fantastic; it helps so much with learning.

Yep! You just need to work out how far you want it to move. Just numbers. So that's the furthest point, minus the width of the last box and the offset amount. I find sketching stuff down and drawing out the measurements I need helpful sometimes. https://codepen.io/GreenSock/pen/RwOYLeP?editors=0010

Hiya - you just need a little math adjustment here. https://codepen.io/GreenSock/pen/mdgGBPN?editors=0011 Your 'getMaxWidth' fuction was adding the width of all of the sections in that row, but it wasn't accounting for any of the space between them. Hope this new route helps.

GSAP is smart and will calculate all the end positions (or start) on page load and then when things need to animate it can purely focus on animating, this makes it blazingly fast! But this means that if you want to animate the same thing twice, they both calculate their respective starting values on page load, but in your case you want the second animation (ScrollTrigger) to get its values when the first one is done, right? To do this I would create the whole timeline/ScrollTrigger combo in enableScroll() and not half (timeline) already, and then the other half (ScrollTrigger) on complete. Also when working with a timeline/ScrollTrigger combo it is best to view it as one and I find it much easier to create the ScrollTrigger inside the timeline, so there can't be any confusion when coming back to the project in a year what controls what. When wanting to fix FOUC https://gsap.com/resources/fouc/ all you need is visibility: hidden; and autoAlpha: 1. I would not also set display: none; the browser does a lot of things different when setting display: none; and it is also not a property that you can animate, it's either one value or the other, there is no in between. Now I'm only not sure what your last animation should be doing, but I hope this already gets you in the right direction. Happy tweening! https://codepen.io/mvaneijgen/pen/MWRqvgg?editors=0010

Here's the Webflow install video too ✨

Hi @pirrex welcome to the forum! Personally I would keep working in codepen and fork the base version you want to work on and then try to tweak the animation to what you want to happen. When that is working try adding the auto next section and try and get that to work and keep forking it until you are fully confident it is working like you want and when that is done try implementing it in your framework of choice. This way you only have to battle one change at a time and this will make it so much easier to implement. I see you had removed some logic from the original demo, which I feel is fairly importing for this effect to work. I've forked the original version and removed some of the animations that you don't seem to want. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Again my advise keep working in codepen until you've fully done with the animation/logic and then port it to your framework. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOydmJN?editors=0010

Yes, I kind of figured that that would be your response. And that's fine. That is why my entire post is an idea/request for consideration. So regardless of any other issues that you mention, at the end of the day, I kind of have to say, yes but please consider allowing my request to work! Haha As my last attempt to summarize my request in a clear and concise manner, I will use a real-life analogy to more correctly convey my thought process of how FLIP/MotionPath integration would work: I take a taxi to go from Point A to point B (that is the FLIP animation). I don't know how to get there myself, so I tell the driver to get me there however it takes but let's take a scenery detour, or pass by Walmart on the way there, etc (that is the motionPath). My job is to deliver my use case/idea in a cohesive and understandable manner... which I hope I have now delivered, even if it wasn't in the most efficient of ways. Your job is to make that 4% into a 140% or discard my idea altogether if it is invalid. It sounds to me like you're leaning towards the latter for now, and that's fine, sad, but fine, you're the expert! But that won't stop me from pretending that my idea is praised as revolutionary in an alternate dimension! Lol Thanks for your time! Great job on keeping the plugin smooth and performant!

Yeah, a fundamental problem is that your target element is inside a position: fixed element, and the Flip.fit() does calculations based on the normal document flow. Flip.fit() would indeed work correctly BUT you're wiring that up to scroll position. The element you're fitting it to is affected by scrolling, but the target element isn't because it's position: fixed. So, for example, let's say that the element you're fitting it into is 500px directly below it - Flip.fit() would basically say "move 500px down and you'll be on top of that element." but you're wiring it to scroll which effectively MOVES the fit position. When you scroll 500px, the spot it's supposed to fit to is now 500px higher. If the target is position: fixed and it animates 500px down while scrolling, it would of course end up where that original fitting element was BEFORE scrolling. It probably is possible to figure out all the calculations, but this well beyond the scope of help we can provide in these free forums. If you need more help, you could post in the Jobs & Freelance forum or contact us for paid consulting services. I wish there was a super simple solution to offer.

You can set the stroke-dasharray and animate the stroke-dashoffset with CSS, but I'd recommend using drawSVG as it solves a lot of browser inconsistencies. Happy tweening.

Thanks for providing the demo, it made my approach much easier than starting completely from scratch. This is a cool effect and as stated earlier, I'd probably try to use SVG for this 99% of the time. However, I was intrigued about making a more flexible clipPath approach. In the demo below I animate the y value of each bar independently using a stagger. https://codepen.io/snorkltv/pen/rNbrEra?editors=0010 In the onUpdate I glue all the values together into a giant clipPath string. Using this technique you can animate the bars from center, start, or end adjust the stagger's each amount adjust the distribution of start times with an ease (in the stagger object)

Hi, this is a very very old thread. The correct way to do this now is using our flip plugin. https://codepen.io/GreenSock/pen/zYqLjre Hope this helps!

Hi there! This is very layout-y so it's exactly the sort of challenge I'd use FLIP for. https://gsap.com/docs/v3/Plugins/Flip/ However it's made a little more complex by the fact that you're controlling it with a scrubbed scrolltrigger as scrub relies on precalculated values and flip is more dynamic, so you'll need to update those values when the screen resizes. https://codepen.io/GreenSock/pen/WNWKPZO?editors=0110