Web Bae Posted February 10, 2023 Share Posted February 10, 2023 Hello Powerful People! I'm curious why my pen doesn't behave like I would expect - I was hoping that the red element would track the position of the blue text span on window resize. It works great on load but not on the window resize event. I could easily solve this by nesting the red element as a child of the blue span, but it doesn't work for the animation I'm working on. I'm trying to reverse engineer the text animation in second section of latest showreel addition: https://www.epic.net/ - from what I can tell the codepen is pretty similar to their setup but I can't get the responsiveness to work. On another note I set the whole thing up (very responsively) with GSAP Flip but then wasn't able to control the paths - the elements would just straight line it for their destination state. A side question to this one - is there a way to control the path traveled during a flip animation? (i.e. similar to how Carl achieves curved motion with combined eases in this pen: See the Pen dyoxXaQ by snorkltv (@snorkltv) on CodePen ) Thank you! See the Pen RwBzexQ by learyjk (@learyjk) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted February 10, 2023 Share Posted February 10, 2023 Heya mate! Sorry could you give this another go at explaining? What are you trying to do with the red dot? Position it over the blue word? (I can't find the animation in the link you added) --- In terms of a curved path though, TIL! I didn't know you could pass in different eases with FLIP! But you can, look at this! See the Pen cc6a1577ab5d5ea8ab0722dc407a7929 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Web Bae Posted February 10, 2023 Author Share Posted February 10, 2023 Howdy 🤠 Let me have another go at explaining myself 😅 - and thanks for having a look. I'm trying to recreate the text animation seen in second section (About) on https://www.epic.net/ I've gotten really far with it! You can find my version here: https://epic-agency-text.webflow.io/ The problem I'm having is that the text that animates doesn't track its proper position when I resize the browser. If I could fix that one thing then everything would be gravy! 🦃 The codepen below is my attempt at a minimum example - I'm trying to get the red text to track the position of the blue text on browser resize event. Works great on initial load but not on resize. Something about when the text "reflows" gets the positioning all messed up. Thanks! Link to comment Share on other sites More sharing options...
Cassie Posted February 10, 2023 Share Posted February 10, 2023 Ah ok gotcha! I don't have time to dig into this now but maybe someone else will, that's a clearer explanation, thanks! If no one helps I'll jump back in when I'm back at my desk 1 Link to comment Share on other sites More sharing options...
Cassie Posted February 10, 2023 Share Posted February 10, 2023 Maybe? https://greensock.com/docs/v3/Plugins/Flip/static.fit() Link to comment Share on other sites More sharing options...
akapowl Posted February 10, 2023 Share Posted February 10, 2023 Hi there. If all you want is for the position of the red text to fit the position of the blue text, in you case you might be better off with offsetLeft/offsetTop instead of getBoundingClientRect(). See the Pen qByedvj by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 10, 2023 Solution Share Posted February 10, 2023 Cool effect! Here's one other option that uses transforms instead of top/left (I just always prefer transforms since they don't affect layout/reflow and they can handle sub-pixel rendering): See the Pen ZEjgbRy?editors=0110 by GreenSock (@GreenSock) on CodePen But in this case it probably doesn't matter much if you use top/left. Note that I had to switch the display to inline-block instead of inline because browsers won't render transforms on inline elements. No need to do two different .set() calls either Does that help? 3 Link to comment Share on other sites More sharing options...
GreenSock Posted February 10, 2023 Share Posted February 10, 2023 Also, Cassie's suggestion makes it even simpler: See the Pen poZMjOR?editors=0010 by GreenSock (@GreenSock) on CodePen But if you don't really need Flip plugin elsewhere, you can save yourself the kb and just go with one of the manual solutions above. 3 Link to comment Share on other sites More sharing options...
Web Bae Posted February 10, 2023 Author Share Posted February 10, 2023 Outstanding - you guys are the best. Can I mark each one as solution??? Thank you again so much! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted February 10, 2023 Share Posted February 10, 2023 Happy to help! No way to mark all as solutions - you must pick a favorite and disappoint 2 of us Kidding - you don't need to mark any as the solution. What matters is that you got some good answers to run with. Have fun! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now