amit95

I have a simple universal animation bound to the class .fadeInUp, which, as you can tell, makes content fade in up. The issue you'll see from my demo is that, the markers for .text do not pass the start marker, yet both content for the .hero and .text fade in up. Then, when you finally do scroll past section.text, the animations for both re-trigger. The markers are correct, but it seems like all animations with the same class with re-trigger when you scroll past any element with that class?

Hi @Rodrigo - Applying opacity: 0 via CSS worked for me. But out of curiosity, would you know why applying the opacity within from() doesn't work?

I have some cards to which I've applied a clip-path via css in order to hide them. Idea is that on scroll, these cards will reveal. However, with my current implementation, the cards do not appear once past the markers. Upon inspect, the opacity of the cards still remain as 0. I've had a play around with toggleActions, but nothing I've implemented changes anything. I can't see any logic issues with my to() and from() either?

@GreenSock - I assumed it was a GSAP related question, i.e. maybe something along the lines of gsap.set(".cursor", {scale: 0 }); (which didn't work for me). However, that's fine, appreciate the help anyway ?

Hi @GSAP Helper, My above list isn't a list of requirements I'm looking for solutions to per se (not expecting someone to build it out for me). That was just a pseudo map of how I'm trying to get my animation to work. I've provided two minimal demos in the question. The first Codepen showcases my existing approach to how I'm showing two elements at a time (by translating them up and out). I put this demo in as I'm trying to explore making 2 text elements animate in together (like in the video I've posted above) rather than animating them up separately, as it is currently. I thought there may be something simple I can tweak in this demo to make it work as it does in the video. My second demo showcases the use of batch to stagger the elements. But my question in relation to this was that the animation starts before the section has pinned and the demo showcases this.

@GreenSock - Wasn't aware of of quickSetter(), thanks for mentioning them. In regards to your demo, the cursor only scales to 1 on mouseenter . This does resolve the issue of the cursor not appearing when the page is refreshed and the users mouse is outside of the window. But, let's assume a user clicks refresh, then immediately moves there mouse into the window. The custom cursor would be scale: 0 because the mouseenter didn't technically happen. If the user then moves there mouse out of the window, then back in, then the cursor appears as it should.

I have a simple custom cursor which I don't want displaying until the users mouse is within the window. In my demo: If you run the pen (and are outside of the demo window), you will see my custom cursor appear in the top left of the window. Then, when you bring the mouse into the window, the custom cursor works fine When you take the cursor out of the window, the cursor scales down correctly also I have tried setting gsap.set(".cursor", {scale: 0 }); but this doesn't work. How can I get the cursor to not display on page refresh, until the cursor is within the window?

I have an animation which should work like this: .pinnedBgText is hidden by default. When the section is in view, the clip-path ScrollTrigger starts. The clip-path animation finishes as the .pinnedBgText pins The batch stagger animation for .pinnedBgText__text starts when .pinnedBgText has pinned Only 2 .pinnedBgText__text items should show at one time. Then on scroll, show the next 2 (2 text items should always be visible). I'm trying to achieve a reveal animation like this: https://imgur.com/AjyZt8V Currently: My batch animation begins when the section hasn't pinned yet. I have tried start: "bottom", but this breaks the animation. I'm unsure on how I should approach item 4 in the above list. In a previous demo, I have each text element translating up. However, now I'm looking for 2 items to reveal, then on scroll, two more animate up (like in the video above). https://codepen.io/amit_rai95/pen/BaxXBwg Suggestions on how I can go about this?

This is a bit of an experimental question, as I haven't seen any questions like this on the forum before (and this is the only sub-forum I thought it's best posting on, as the other is in relation to banner ads). I'm looking for inspiration on alternative ways I can go about doing this sort of animation. In short, below is a demo on how my animation is currently working. It showcases two text elements, and on scroll reveals another (whilst hiding the top text item, so only two text items are visible at the same time). I'm not a fan of the way this works and wondering if anyone has any ideas on how I can "jazz" it up a bit more, as it seems a bit static to me currently. I was initially thinking along the lines of scrolling to that section, and having the text element zoom in, but unsure on how that would would with two text elements. Any ideas would be appreciated / apologies in advance if these types of questions are not permitted / the purpose of this forum. Edit: Another possible approach would be so load 2 text items in a set. Something like this: https://i.imgur.com/AjyZt8V.mp4 Is there a demo or something similar to this anywhere? Couldn't see anything similar in the ScrollTrigger demos, or the codepen libraries.

Hi @Rodrigo, I may have explained it poorly in my question, so apologies in advance. After the yellow logo has animated in, I'm trying to reverse that animation on exit and then fade the white logo back in. So to clarify (as I missed mentioning these details previously): User lands on page and wait 5 seconds The white logo fades out and the animation for the yellow logo animation starts The yellow logo remains visible for 3 seconds The yellow logo animates out the opposite way it animated in (logoTl.reverse()) The white logo fade back in 5 second timer resets Back to step 2 Repeat

I have a simple logo animation which executes every 5 seconds (for demo purposes). Here's how I'm trying to make the animation work: Wait 5 seconds White logo fades out and yellow logo animation executes Then the white logo fade back in 5 second timer resets Back to step 2 Repeat I'm essentially after something equivalent to reverse()

I have an animation which works based on data attributes, allowing it for global use (I believe I saw this demo somewhere in the docs, but can't find it). Nonetheless, I have in my demo applied these attributes to 4 sections. The parallax looks to be working on the first element, however, they move outside of the element on subsequent elements. The issue seems to stem from the y positioning: y: (i, el) => -(1 - parseFloat(el.getAttribute("data-speed"))) * ScrollTrigger.maxScroll(window) Consider the first section the demo that looks to be working. For that section: -(1 - parseFloat(el.getAttribute("data-speed"))) is equal to -0.2 ScrollTrigger.maxScroll(window) is equal to 1167 -0.2 * 1167 = -233.4 However, upon inspecting the element, it doesn't look like it's translating anywhere near that value. All I'm trying to achieve is a global script, where I can apply attributes and achieve a parallax effect where items move up subtly. Unsure why the elements move outside of its parent?

@Rodrigo - I was going crazy looking at the JS and alternative approaches for days ? Always good to get another pair of eyes on blockers. Much appreciated. Can confirm, adding the display property resolved the issue.

I have a simple section which contains extra large text. Two of these sections exist, one which is right aligned, and one which is left aligned. On scroll, I want the right aligned header to move left (which works in my demo, so all good here). The left aligned text however, I want moving right on scroll. This in my demo however doesn't work. The xPercent is negative for the right aligned header, which allows it to move left. By that logic, I've got a positive xPercent value for the left header, however, it doesn't make any movements?

I have an animation where on mouseenter, a logo animation plays. The way I'm trying to get this to work is: primaryLogo is visible by default Users mouse enters primaryLogo primaryLogo fades out secondaryLogo animates Users mouse leaves secondaryLogo secondaryLogo animates out (reverses) primaryLogo fades back in If a users mouse enters the default logo and then exits before the animation is finished, I still want the animation to play, reverse and go back to its initial state. Meaning once the animation plays, it needs to finish before restoring to original state. To achieve this, I've tried: tl.reversed() ? tl.play(0) : tl.reverse(); However, the animation then doesn't trigger. A visual of the animation can be seen on mouseenter on the demo.