Tracking Position of a Text Span with Javascript

[Web Bae]

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

[Cassie]

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

[Web Bae]

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!

 

 

[Cassie]

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

[Cassie]

Maybe? https://greensock.com/docs/v3/Plugins/Flip/static.fit()

[akapowl]

 

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

[GreenSock]

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? 

[GreenSock]

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. 

[Web Bae]

Outstanding - you guys are the best.

Can I mark each one as solution???

 

Thank you again so much!

[GreenSock]

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!