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.

I have a simple reveal animation which reveals text. I'm using a library called Splitting.js to segment out each of the characters in the element in order to stagger them. Sometimes, my animation works as intended, and in order instances, it doesn't. But it's never consistent. Here is how it animates with the library active. On refresh, you can see that the titles opacity is still visible as it animates in. Now, I'm aware that there's limited support here for queries involving third parties. As such, I've commented out all things to do with Splitting JS and ran the test again, with just the GSAP timeline, and this is how it performs: The codepen shows how the animation should run. Title is hidden completely on load, then each character staggers in one by one. However, as mentioned, I have the exact same JS on my build and it sometimes works when you change page, sometimes it doesn't.

Hi @Rodrigo, Appreciate the demo, the effect is what I'm after. However, when their are multiple cards present, the mask also reveals that area on another card. See demo below. I assume this is because of the if (overImage) {} conditional statement is not targeting that specific .card__image-mask element / a scoping issue? Additionally, when you hover over the card initially, and then scroll down or up, the cursor and circle that is opacity that is completely visible is off? https://codepen.io/amit_rai95/pen/MWGXMVP

But that is the problem. The primaryLogo should appear and is what triggers the secondaryLogo to appear. The flow is: primaryLogo is visible Users mouse enters primaryLogo primaryLogo fades out secondaryLogo animates Users mouse leaves secondaryLogo secondaryLogo animates out (reverses) primaryLogo fades back in

I have a logo SVG which displays be default (this is the white logo .header-primaryLogo). On mouseenter of this logo, I'm looking to: Fade the default logo out then play the tl animation (which then showcases the secondary logo .header-secondaryLogo) If you uncomment out line 15 from the CodePen (position: absolute from .header__logo) and then hover over the white logo, you can see the animation is somewhat playing. What's not happing is that the default logo isn't fading out. Naturally I'm looking for the reverse on mouseleave. Any ideas why the animation isn't triggering completely on mouseenter?

I'm trying to go for an effect where an image has an opacity of less than 1. Then, when my custom cursor hovers over the image, that part of the image (that is visible via the custom cursor, as it has a transparent background), becomes fully visible. In addition to this, when the mouse enters and exists the card, it has a very jaggy entry and the on exit it almost blinks. I have the transitional conditions in the CSS, but it doesn't work as smoothly as you would expect. Is this a JS issue?

@GreenSock - Of course The preview was more to showcase the issue in web form (rather than just a GIF). Will continue trying to emulate into a codepen. In relation to GSAP versions, I did previously upgrade to 3.11.2 via npm, but encountered bugs (such as the one I posted about here). I know you have fixes in place for 3.11.3 beta, but naturally this isn't available via npm yet, and I do not want to use 3.11.2 because of the bugs. So, I'm essentially waiting for version 3.11.3 to officially be released so I can upgrade locally, via npm. Would you know when the official release would be?

Hi @GreenSock, Believe me, I've been trying to recreate the issue in Codepen for a while, first time I cannot recreate an issue that is happening locally ? I can confirm, I'm not loading anything dynamically, it's just a simple pin. I can also confirm the issue still persists on the new beta version. The best way I can describe the issue, is that the markers for .formBanner ScrollTrigger moves before the .pinnedBGtext section has unpinned. It's like the height of the invisible elements in the pinned module are causing the calculations to be off? Having said that, I have completely removed the text animation snippet from the pinned module, and the issue still persisted. I will continue trying to get a pen up that shows the actual issue. However, in the meantime, if you'd like to see the issue on a webpage, please see here. On the above page, you'll be able to see that the "start" marker has already moved up before the section has unpinned. The start marker should be on the .formBanner element. The JS on the webpage is the same as in the codepen demo (which is why I'm stumped on its mixed results).

Hi @GreenSock, I can confirm it's all working for me in beta version 3.11.3 ? Would you have any timeline on this versions official release?

Hi @Rodrigo, I haven't looked into devtools yet, but will do. I couldn't find many threads on the matter (besides this), so assumed there must be something glaring I've missed / incorrect logic. Although, I have tried Scrolltrigger.refresh() on page load to see if it fixed it (it didn't) Good spot on the GSAP version. I was locally running version3.11.0, but have an older CDN version in my pen. I have now upgraded to 3.11.2 and can confirm the issue still persists. Regarding the conditional statements, they've always been in. These are part of modules / components and all of the JS compiles into one single js file. So, to avoid gsap element not found warnings, I'm checking if the element exists beforehand. Regarding anticipatePin and endTrigger, I followed this approach from this thread. Though, the anticipatePin property definitely doesn't make sense now that I see it. No need to apologise, appreciate any advise given. I know the demo isn't helpful to showcase the issue, was more to gauge avenues as to why it isn't operating correctly on other envs.

I recently upgraded my npm package as I was running on version 3.9.1. Upon upgrading to version 3.11.2, my header animation doesn't work as it use to. My 3.9.1 demo shows it in working order, where the header hides on scroll down, but shows on scroll up. In the 3.11.2 demo, you will see that the header translates up immediately on load. The animation triggers on page load. Is this a bug or am I missing something here? https://codepen.io/amit_rai95/pen/ExLWzoR https://codepen.io/amit_rai95/pen/gOzzYxP