Cassie

One bit of advice would be to scale the video up to the large size with css and then scale down with GSAP. But if it's working with ScrollTrigger in codepen and not on your own site that's a clue that something else (not GSAP) is the problem. Maybe you're trying to run too much JS at the same time, maybe your images or video files are too large. There could be many reasons.

It's pretty similar in this test. https://codepen.io/GreenSock/pen/PogVJNe

Hi there. I assume you're talking about embedding the GSAP site? If so - I'm afraid that's been added as a security measure to stop clickjacking https://www.keycdn.com/blog/x-frame-options

https://codepen.io/GreenSock/pen/MWRPXMr?editors=0011

Ok, I get what you're after, sorry that took a while. I got confused because you're talking about referencing a parent, which isn't really what's happening. At least not *just* directly referencing a parent. By not scoping your useGSAP hook your selectors are global. So they'll grab anything that's available to them in the DOM. Not just the parent. Literally anything that matches that selector that React has already rendered. Use at your own risk I guess. It's fine if you feel you've got a reliable idea of what's been rendered at the point that GSAP code runs, and if you're using selectors wisely, but it's not really the correct "React" way of doing things. (which is not a discussion to get into here 😂) It's more "reacty" to keep your GSAP code in a parent and use a scope so that your selectors aren't global. Then you can drop your components anywhere without worry, which is kinda the point of React. Encapsulation. But you do you really. If you want to take the guardrails off and just make all your selectors global you can!

I feel like Rodrigo attempted to address that. It's not really about scope at that point. Communicating UP the React tree is into ref land/passing callbacks and stuff. Unless I'm misunderstanding the question. Very possible, React makes my brain hurt. I think that's what he meant by this It's not a skill level callout, just advice on what to look into to find a solution Have you seen the component communication sections in the docs? Maybe there's something there that can help? https://gsap.com/resources/react-advanced#component-communication

Hey Nick! Yesterday was a particularly busy day in the forums, so sorry if this came across as blunt. I'm pretty Rodrigo meant nothing by it. We struggle quite a bit over here with users asking for support with React related issues. React themselves don't have a forum, despite being so widely used and funded by facebook 🫠 Go figure. So it often falls on our very small team to try and help. We're not really React experts, but as it's so prevalent we've tried to learn so that we can help. We've pretty much outlined ALL of our knowledge in these guides https://gsap.com/resources/React/ We've also created the hook to try and help. We'll happily answer questions about how the hook works, or how cleanup works, or even about the GSAP API itself. But architectural questions about the best way to structure things in a particular framework involve a lot of domain knowledge, understanding of the codebase in question and a lot of higher level thinking. It's really not GSAP related at that point. That's why we suggest the reactiflux community in our react guide. That's a good place to have discussions about structure. https://www.reactiflux.com/ As Rodrigo said earlier on That sums it up really. We advise keeping it simple and if you can't it may be a good idea to talk to some React experts about how best to structure things. Sorry for coming off as rude, and sorry we can't help more here!

The xy problem is a very common issue in support forums, both from the perspective of someone answering and someone asking. It's been very helpful for me to step back and ask, is this asking about the solution or the core goal. I just thought it would be helpful for you too. I don't know where you're seeing insulting or shaming. It's just a handy way to view phrasing questions. You may be reading between the lines a bit here. Anyway, have a nice day and I'm glad we found a solution.

It's not a criticism, no need to defend yourself. Just an observation. The title of this post and your question focused on the issues you were facing with your attempted solution rather than the goal - so everyone got hyper focused in on the technicalities of trying to integrate motionPath with Flip, rather than the actual goal of curving the animation. I'm glad we got there, sometimes the most simple route is the right one.

I think this was a classic xy problem https://sketchplanations.com/the-xy-problem "How do I add a curve to this flip animation" was the core question? (Also ChatGPT is very clever, but oh so dumb sometimes, loves overcomplicating stuff)

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

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.

Heya, did you solve this? The pen looks like it's doing what you described.

Heya! Is this replicable on stackblitz at all? It would be good to see it in context, nothing wrong with the code that I can see.

Here's the Webflow install video too ✨

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?

Glad we got somewhere. I think it's all down to creating things in the right order and not accidentally nesting pinned elements ✨ Definitely a fiddly one.

This video is showing completely different functionality though. There's no layered panels here. In the video, the panel that the tree is in doesn't reveal the panel beneath it or get revealed by the panel above. It's just a normal scrolling page, then the tree gets pinned for a while. It feels like you're trying to mash together two very different things here. I'm not really sure how you're aiming to combine them? Maybe something like this is closer? https://codepen.io/GreenSock/pen/VwNBOQZ?editors=1010

Lets hold off on stackblitz and refresh and React questions until this is actually working. So in order for each of the panel 'reveal' to work, each panel needs this setup in the scrollTrigger. trigger: panel, end: `top+=${window.innerHeight}`, pin: true, pinSpacing: false, If you change one of the panels to use the box as a trigger - like this, you're changing the functionality of the panels. trigger: ".box", //<= this is a change as i want to trigger it on itself, or at least not to the top of the panel scrub: true, start: `top+=${window.innerHeight} center`, pin: true, pinSpacing: false, You also got rid of the if/else statement so as you say, you're adding nested pins to the panel with the box element now. Maybe this helps? You can't do nested pinning, but you can animate elements within a pinned container and use nested elements as the trigger, as long as you state that they're within a pinned container... https://codepen.io/GreenSock/pen/MWRBdJr?editors=1010

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

Hi there, am I correct that the white space only appears during the resize? If so that's just the browser recalculating and adjusting the layout. I wouldn't see that as an issue. The only people that really resize browser windows are developers anyway! From years of bug testing websites and watching user journeys, the average user doesn't resize the browser, and if they do, they certainly don't care what the website looks like during resize. As long as the layout settles and is useable you're a ok.

You haven't linked a demo here so it's hard for me to help I'm afraid. What have you tried?