Does GSAP remove elements from the document's flow?

[clhomme]

Hello everyone! I have kind of a theoretical question about GSAP and Flip.

 

I have an animation, which consists of a little box growing bigger and bigger as I scroll, until it takes the whole page. I don't have an issue with that, people were kind enough to help me here =). My problem is, I would like align the dot and the title ("PROJECTS") on the same baseline, as well as get the dot closer to the title (it doesn't look like it in codepen, but in my page the dot is quite far apart from the title, I want it to be right next to it). But the dot has seemingly a mind of its own, it's never at the same place every time I open the page and I cannot touch it with css. I know this isn't a css problem, because I tried removing the gsap animation and it was looking exactly like I wanted.

 

Is gsap somehow messing with the flow of the document? It's as if the dot was outside the reach of css, it's very bizarre. I would be very grateful if someone could explain it to me!

See the Pen XWxLwNo by Dhandelyon (@Dhandelyon) on CodePen

[mvaneijgen]

To what should it line up? I've forked your pen and removed all he GSAP, from your description the dot should line up to the bottom left corner of the "P", but that isn't the case even with no JS.

1. There is a   before the word projects in your demo.  
2.  -webkit-text-stroke: 2px black; probably puts the stroke on the outside of the letters, so if you line everything up it still would be off by 2px
3. Text always gets a line-height set based on the font size. I've given the text a background color of orange

 

See the Pen wvRwrdj?editors=1100 by mvaneijgen (@mvaneijgen) on CodePen

[clhomme]

Sorry, I used an old codepen so it wasn't up to date. Basically, the bottom of the pink square should align with the bottom of the title, as if they were written on the same line. I rectified it, so now it looks like it should.

 

Unfortunately, it looks very good in codepen but not so much in my website. Therefore I took a screenshot of it to show the problem. I outlined the different elements in red.

 

(The double stroke on the text is a whole another problem lol, dunno what causes it)

 

[Rodrigo]

Hi,

 

This is mostly about your CSS and HTML. Your title has a non breaking space in it and a margin  left of 2rem. Any particular reason for those? If you remove them you get this:

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

 

Hopefully this helps.

Happy Tweening!

[clhomme]

It's not a matter of HTML/CSS. I don't know why I left the non-breaking space, it doesn't serve anything - I removed it and it did nothing. The margin is there so the square isn't glued to the text.

 

Trust me, I tried everything with HTML/CSS. When the GSAP animation is commented, everything is where it should be. But as soon as I uncomment it, everything is messed up (hence why I'm coming here).

[mvaneijgen]

You've updated this pen  an to me it looks perfect. If you're saying "it is not working in my 'real' project", then something is interfering. Because if it was an issue with GSAP we would also see it in the codepen. 

[GreenSock]

2 hours ago, clhomme said:

Trust me, I tried everything with HTML/CSS. When the GSAP animation is commented, everything is where it should be. But as soon as I uncomment it, everything is messed up (hence why I'm coming here).

If you'd like some help, please make sure you provide a minimal demo that clearly shows the issue where commenting out GSAP causes the layout to look correct, and enabling GSAP seems to break it. We really need to see something that shows that in order to troubleshoot. We're eager to help solve any problems GSAP might be causing. I highly doubt that GSAP is the real problem here; once we see a clear demo we can know for sure though. 

[clhomme]

I already made the demo - I promise it's the same code as in my website!

 

Anyway, I ended up removing the ".dot hidden" and it seemed to do the trick. Don't know why,  don't know how it works but it does so I'm happy. Thank you for trying to help though!