Cassie last won the day on
Cassie had the most liked content!
Cassie
Administrators-
Posts
4,905 -
Joined
-
Last visited
-
Days Won
174
Cassie last won the day on
Cassie had the most liked content!
About Cassie
Contact Methods
- Personal Website
- CodePen
Recent Profile Visitors
23,643 profile views
Cassie's Achievements
-
Cassie started following How to have an easing equivalent to css ease-in-out and 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.
-
It's pretty similar in this test. https://codepen.io/GreenSock/pen/PogVJNe
-
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.