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!

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

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)

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!

@Rodrigo Oh sorry ! I didn't see I called the Flip method twice. Rectified it

Hello everyone! So, basically what the title says. I would like the pink dot to expand as I scroll until it covers the screen completely, and then while I keep scrolling it "reduces" until it gets to the size and position of the yellow block. I have the first part of the animation (the dot expanding) thanks to this forum (^^), but I'm stuck for the second part. Is it possible to use two Flip animations one after the other, and if so, how? Do I need to use a timeline? I've tried making a new Flip animation, but the results were... not good. I don't think I've fully grasped how Flip works, which is why I'm asking for help ^^. Thank you very much for your help!

Thank you @Rodrigo! It solved the problem. But I have to agree with @Cassie, z-index is kind of a b-word. In fact, setting z-index on high was the first thing I tried - and that's why I went here when that didn't work. Thank you both!

Hello everyone! So, I'm trying to do this animation with two sections side by side, and upon scrolling one of them scrolls normally (here it's the right one) while the other stays put/pinned until the end of the animation. I've applied this logic: this logic except vertically instead of horizontally and it works like a charm. My only issue is that the left panel (the pinned one), upon reaching the end, "jumps" onto the following section and stays there (I know it doesn't look like much in the codepen due to its low height, but it is much more obvious in my full-screen page. Imagine that this little jump the left panel does when you start scrolling goes way lower.). I think the issue lies in the "end" part of my scrollTrigger, but I've tried messing with it, like using values other than 1000 (still happens) or using "bottom bottom" (the right panel goes way too fast). Does anyone have an idea of what I'm doing wrong? Thank you very much!

Hello! Thank you for your answer, and sorry for the delay. I must admit, I'm kind of stumped. I just don't see why it doesn't work. I tried messing with the z-index like you said but to no avail. I'm sorry to post here, as it probably doesn't have anything to do with gsap (the reason why I posted here in the first place is because I've noticed this custom cursor disappear when it hovers over gsap animations, since it shows over the header, but it's probably unrelated). I made a codepen anyway, and I would be really grateful if someone saw something wrong with my code. Thanks! https://codepen.io/Dhandelyon/pen/XWxLwNo (P.S: move the mouse after the pink section, otherwise if you just scroll the cursor is still visible.)

Hello everyone! I'm in a bit of a pickle. I've noticed that when I use gsap animations, my custom cursor doesn't show on the screen anymore. I have tried setting the z-index on high, but it doesn't do anything. It's as if gsap created a layer over everything, if that makes sense. Is that normal? What can I do to change this? Thank you very much!

Hello everyone! My problem probably has a very simple solution, but I can't find it. I have some sort of banner that would start out at like 90deg, and would rotate back to an horizontal position as I scroll. My problem is, it starts out at one position and sort of jumps to another when the animation is triggered (the second position is actually the one I would like the banner to be from the start). Does anyone might know what's causing this issue? Thank you very much!

Thank you for your answer! I'll admit, I have a little trouble understanding everything though. So the problem was that I had scrollTrigger inside my timeline, or that I had two scrollTriggers? Also, is there a way to scale a div down from full screen to a specific width (in this case, this would be .project-overlay)? I've seen tutoriels and answered topics on this forum, but all of them are about how to scale the element up. Thank you again for your answer!

Hello everyone! I'm having issues with scaling. I've looked a lot, but I can't find the answers to my questions. See, I have my header where the dot becomes increasingly larger when you scroll, to the point it takes up the full screen, then the div overlayed on my next section will shrink until it takes the width of about 35% of the page (it will be stuck to the left, and the height will remain 100%. Also, I put the overlay in yellow to differentiate it but it will be pink like the dot, as to give the effect that it's the same div that expand and shrink). I have two issues: 1. Is there a way to make the scaling of the dot always take full size of the screen, no matter the device? I'm concerned because with scaling, you can't use units like percentages or viewport, it has to be a fixed number. 2. I can't manage to make my overlay scale down. Everything I've seen show how to scale up, but nothing on how to scale down to a certain width. It works if I just set the width to 35%, but then I don't have that effect of the overlay gradually reducing to the desired width. Instead it just jumps to 35%. I would be really grateful if someone could help me! Thanks!

It's what I did. I used CSS variables (--colorArrow), but it doesn't work.

Hello everyone! I was wondering if you could help me. I've shuffled around in my code so it would work in codepen, but the gist is, I want to use scrollTrigger to have the color pass (travel?) through the title and land on the arrow (so the arrow would stay pink once the animation is complete). My problem is, I can't get that damn arrow to change color. I think the problem is 1) the arrow uses a pseudo-element (:before) to show and 2) the "filling" (background? content?) of the arrow is not transparent like the letters, but white. I couldn't make the background of the arrow transparent or else it doesn't show at all. I've tried to cheat by having the arrow background change color once the letters' animation is done. I've used a variable for it, as shown in this tutorial but it doesn't work. I've tried everything with my gsap code (with a timeline, without, use scrollTrigger, don't use scrollTrigger), but nothing works. Does anyone have any idea of what I could do? Thank you very much! (P.S: Sorry if it doesn't work, it works decently in codepen, I don't know why it won't here...)