[Scroll Animation is Laggy]

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.

[How to have an easing equivalent to css ease-in-out]

It's pretty similar in this test.

See the Pen PogVJNe by GreenSock (@GreenSock) on CodePen

[Refused to display 'https://gsap.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.]

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

 

 

["Get GSAP" button hover effect]

See the Pen MWRPXMr?editors=0011 by GreenSock (@GreenSock) on CodePen

[How important is scoping?]

Quote

I'd thought I was just asking about having a child component's gsap animation reference a parent - which may not work in React without passing refs, but it *does* work with Gsap, React and Astro.

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 😂)
 

Quote

Just as a takeaway from this: Is it fair then to say that ScrollTrigger animations must be placed at *at least* the level of the component that contains the trigger?

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!

[How important is scoping?]

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.

Quote

Instead of that just have everything inside that Section component and create the ScrollTrigger instance inside that component. Creating the instance in the child component, while needing or using a selector from a parent component is a far more complex setup that you should avoid if possible, instead of having the code in the Box component have the code in the Section component.

I think that's what he meant by this

Quote

You should get more knowledge on react components, components communication and state management, all react features that fall outside the scope of these free forums. 

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

[How important is scoping?]

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

Quote

If I was you I'd avoid this setup and keep everything inside the same component in order to make your life easier. If you can't then this is more related to how these type of situations are handled in React rather than a GSAP related issue or even a scoping issue TBH.

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!

[MotionPath inside FLIP doesn't use initial state positioning]

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.
 

[MotionPath inside FLIP doesn't use initial state positioning]

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.

[MotionPath inside FLIP doesn't use initial state positioning]

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)

[MotionPath inside FLIP doesn't use initial state positioning]

If you're not changing the x value all you could just add another tween to animate that?

See the Pen WNWgdZV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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
 

[ScrollTrigger pinned horizontal scroll end point]

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.

See the Pen RwOYLeP?editors=0010 by GreenSock (@GreenSock) on CodePen

[ScrollTrigger pinned horizontal scroll end point]

Hiya - you just need a little math adjustment here.

See the Pen mdgGBPN?editors=0011 by GreenSock (@GreenSock) on CodePen

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.

[ScrollTrigger to pin and X transform images (pin height issue)]

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

[Typing ContextSafe]

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.

[Club Greensock [business] Does token supports 2 devices for 1 dev?]

Here's the Webflow install video too ✨

 

[MotionPath inside FLIP doesn't use initial state positioning]

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?

Quote

You appear to be thinking of a motionPath more like an ease (style of movement; a matter of pacing/timing which could be applied to any interpolation) rather than an actual set of coordinates. 

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 -

 

See the Pen dyoxXaQ by snorkltv (@snorkltv) on CodePen

 

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.

 

See the Pen cc6a1577ab5d5ea8ab0722dc407a7929?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Maybe that will achieve the "scenic taxi route" for you?

 

[Layered pinning from bottom (variation) with pinned video scrub]

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.

[Layered pinning from bottom (variation) with pinned video scrub]

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?

See the Pen VwNBOQZ?editors=1010 by GreenSock (@GreenSock) on CodePen

[Layered pinning from bottom (variation) with pinned video scrub]

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...

See the Pen MWRBdJr?editors=1010 by GreenSock (@GreenSock) on CodePen

[How to manipulate flex values?]

Hi, this is a very very old thread.

 

The correct way to do this now is using our flip plugin.

See the Pen zYqLjre by GreenSock (@GreenSock) on CodePen

Hope this helps!

[Trouble with grid]

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.

See the Pen WNWKPZO?editors=0110 by GreenSock (@GreenSock) on CodePen

[scrollTrigger delay responsive (cause white space appear) when resizing browser]

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.

[Layered pinning from bottom (variation) with pinned video scrub]

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

What have you tried?

[Split Screen Pinning]

There's a demos page in the docs too

https://gsap.com/demos/?page=1

 

We're going to add more demos there soon.