amit95

On my page, I have two ScrollTriggers: .pinnedBGText which pins .formBanner which changes BG colour when the element is in view Currently, on my local site, the start marker for .formBanner is off (it's higher than it should be). So, I started investigating and thought maybe images loading in are throwing the marker positions off on load. To test, I remove all images on the page and created a minimal page which contains just 3 modules: .pinnedBGText A spacer module Then the .formBanner module This way, I could test if anything was effecting the start position, and it was still occurring. To see this issue in effect, please see the GIF. In the GIF, you will see that the 3rd module (the .formBanner) already has a yellow BG, which it shouldn't until it's in view. In the GIF you will also see that the start marker is off (I'm hovering over it at the end of the GIF). When I remove the following line pin: container from my .pinnedBGText ScrollTrigger, the start markers are correct. However, to test it further, I created a codepen to emulate the issue. But, to my surprise, the markers were all correct. See demo below: https://cdpn.io/pen/debug/bGMvRam?authentication_hash=VJrxxRpWObWr The JS in the Pen and local is the same so unsure why there's a difference in performance. I've tried to refresh ScrollTrigger when the .formBanner is in view, but the start markers appear before the module is in view, so it's practically useless. I've also tried playing around with the end parameter to see what works / any differences, but couldn't get the triggers to work correctly. Any ideas on what could be causing this issue? Edit, forgot to add GIF:

I came across a demo from Greensock which showcased a fixed header which disappears on scroll down, but appears again on scroll up. Expanding on that demo, I have added a class on scroll which I want to appear on the header when scrolling up. However, as you will see in the demo, the fixed class is applied when scrolling down initially, making the black background visible momentarily before disappearing. Are there parameters I could pass to the toggleClass object to add the class on scroll up only? Although, I cannot see anything of the sorts in the documentation. Only other avenue I can think of is using ScrollTrigger's callback methods, but unsure on if this is the best way to go about it?

I have posted a previous topic regarding this animation before (which can be found here). The original question was resolved, and now I'm looking for solutions on how to make it dynamic (hence the new question). In short, I have an animation which pins, then fades in new text items, whilst at the same time, fading out and translating up the first text item in view. In the demo, you can see the section unpins when there is two text items still visible, which is correct. At the start and end of the animation, two text items should always be visible. Now, I've got the same module on another page, but this time, it only has 3 text items. In the below demo, it unpins when there's only one (the last) text item visible. I can see why it's happening (line 86 onwards in the JS), but, if I tamper with that code, it'll break the section which has 4 text items in them. Is there a way I can make it so that in all instances of item count, it will always show 2 text items on entry and 2 on exit? https://codepen.io/amit_rai95/pen/MWGENqP

Ah, that's exactly what I was after. Cheers for assist guys

@Rodrigo - Having looked at my animation again, is it easy enough to inverse the direction of the animation? For example, on entry, the tiles load from the left. But on exit, I would want them to start hiding from the right. transformOrigin: "bottom right" doesn't seem to be doing the trick?

@Rodrigo - Haha yup. But at least you know now that "tile animation" is a reference to that ? I've also added the exit animation in for anyone who finds it useful. Feel free to comment on how to optimise the codebase https://codepen.io/amit_rai95/pen/KKRmxZj

Hi @Rodrigo Just updating (and in case anyone else wonders about this animation in the future), I think I've solved it! Just working on doing the reverse on exit, but this was essentially what I was after: https://codepen.io/amit_rai95/pen/KKRmxZj

@Rodrigo - I should have bookmarked the demo when I saw it. Can't never seem to find things when you need them ? Thanks for your insight. To clarify, you're saying: Set the parent (in my case .popup) to position: fixed Set all .popup__tile elements to height: 0 and give them a negative z-index via CSS Set the content that I want to fade in after the tiles cover the screen (.popup__content) to position: relative via CSS Then via GSAP, give the tiles a height of 100vh and also set their z-index to positive? Is the above all correct? If so, I've tried two approaches currently. One which works with height, and another with scaleY, both with do nothing right now. I think I've not followed one of your instructions? Can you point me in the right direction? https://codepen.io/amit_rai95/pen/KKRmxZj

@mvaneijgen Everything needs to be dynamic nowadays ? With your above advice, I believe I'm on the right track. Is this newest codepen what you were referring to? https://codepen.io/amit_rai95/pen/ExLWvRX Additionally, consider the following snippet: tl.to(texts[i+1], { opacity: 1, duration: duration, }, "<"); In the above, what's the purpose of "<" ?

I'm almost certain I've seen a demo regarding this on the forums or somewhere on Codepen, but cannot seem to find it anywhere. This may also be because I don't know the correct name for the animation. I'm simply referring to it as "tile reveal". Could I get some assistance locating this demo please? In short, this is the way the animation works: User clicks a link 5 .popup__tile elements then grow from the bottom of the page, one by one (i.e. tile 1 will be larger in height before tile 2 starts to grow) until it has filled the screen. Then the content fade in If the above is hard to visualise, I have created a pen showcasing the markup I recall the demo showcasing. If anyone can direct me to a demo for this, or what the correct name for this animation is, that'll be helpful. Thanks

Hi @mvaneijgen, Many thanks for the demo. I've had a play around with the animation and have tested it with ScrollTrigger - All works well so far. As you've mentioned, it needs to be dynamic (for example, more than the demoed 4 .pinnedBgText__text elements may exist). I can see that in your demo, you're accessing the array index numerically, changing 2 text elements to make the animation work (i.e. texts[0] and texts[1] to make the first two text items work accordingly. As such, I can't do something like: var i = 0; texts.forEach((text) => { tl.to(texts[i], { }); }); Because they'll hold the same value for each loop. Could you provide me with a hint on how I can make this dynamic? Here's the latest demo: https://codepen.io/amit_rai95/pen/ExLWvRX

I have a section which contains some cards. For each card, after you scroll past them, it will "reveal" that card, one by one. However, currently, when you go past the first card, the animation plays and all the cards will start to reveal, rather than when they're scrolled past. How can I trigger them to play one by one?

Hi @Rodrigo It's sort of what I'm after. This is on me for not clarifying in my original question, but at most, only two text items will be shown at one time. Here's a walkthrough of the flow I'm after: User scrolls to .pinnedBgText, at which point the section pins. At this point, the first text item will be opacity: 1, whilst the other text item will be opacity: 0.5, like in the image in my first post. Then, the user scrolls down, making the second item (which was opacity 0.5) to opacity: 1 (showcasing that this text is now the "active" text). The first text item then becomes opacity: 0.5. The user scrolls down further which makes the first text item translate off screen, and then the third text item will translate up, below the second item (as only two text items should be present on screen). This item will then be opacity: 1 and so on... Hopefully the above made sense? I believe what may be required to achieve something like this would be a nested pinned container, for the text elements?

I'm seeking guidance on how to achieve what I'm after, as I'm stumped on the next steps at the moments. This pinned section which contains 4 text elements. By default 2/4 text elements are shown. Then, on scroll one more will show, then the last (and then unpin). I have added an image on its default view for reference. Is the best way around this to do something like :nth-child(n+2){ opacity: 0; } and then to made the proceeding items opacity 1 and translate in? On the "active" text element, I want to add a class to it to make its opacity 1 (as it is set to 50% via css). I'm aware that toggleClass exists, but unsure on how I can target $(this) or the current element? Unless the solution is to use something like the below? onEnter: () => $(this).addClass('pinnedBgText__text--active'), onLeave: () => $(this).removeClass('pinnedBgText__text--active'), Image for default state reference: Please view pen in full screen.

I came across a global parallax demo in this thread which I decided to experiment with. Upon implementing, I found that when you scroll down the page, the element with the [data-speed] attribute, it also moves down (when it should move up, opposite to the scroll direction). Naturally, it's the y parameter which is causing this, it's like -y would do the trick, but that is invalid syntax. Any way around this?

Ah, typo on my end, got to love them ? But, that did the trick, many thanks!

I'm trying to create a text reveal effect which is similar to the hero section on this website. I'm using Splitting.js to segment out the characters and then want to use GSAP to animate the characters up. However, the animation doesn't do anything? I've tried two different approaches in my pen, but neither trigger any animation. Upon inspecting my code, I can see that Splitting JS is successfully segmenting out the characters, but GSAP is doing nothing with it?

I have seen many similar questions on the forum regarding this topic. However, I haven't seen it implemented in the manner I'm after. The way I'm looking for this animation to work is: .whoWeAre starts off with a black BG colour (as defined by the html style) User scrolls down until half of .whoWeAre is in view, at which point, start changing the background colour to yellow (by this time, when .whoWeAre is in complete view, the background will be yellow). When a user scrolls back up, I want it to revert to having a black BG In my demo, the issues I am having are: The background starts to transition when the "scroller start" marker is in the middle of .whoWeAre. When making this transition from black to yellow, it has a darker yellow in-between, which I do not want. Is there a way to speed up the colour change? My active class is being applied as soon as soon as the "start" position is passed (which is fine). However, at that point, the background is still black. Meaning, there's black text on a black background. If I set the the start parameter to start: "top top", the animation triggers way too late. Any advice would be appreciated.

I have an element called .listing__nav which I want to pin upon scroll. When the .listing__nav touches the top of the window, I want it to become fixed and to unpin only when the banner element comes into view. To achieve this, I've tried the following codepen: https://codepen.io/amitr95/pen/dyJMawR As you can see, the .listing__nav doesn't pin where intended instead pinning at the bottom of the window, giving it glitchy behaviour.

@OSUblake Are you saying the CSS is part of the issue (if so, are you saying to remove it)? And is there a way to prevent resize on mobile? And do you see any issues with doing so?

@OSUblake - You're correct, that's what I'm referring to. I've removed anticipatePin and refreshPriority before and have done so again. After clearing cache, this issue still remains, still jumps. Note: I've added both properties back in so that it doesn't effect desktop.

@OSUblake - I've seen the issue happen on iPhone 6/7/8 (Safari) and also on Android (Chrome) on my OnePlus 5T. If you open this page on mobile and scroll past the horizontal scroller and then stop scrolling, you will see the jump.

Hi @OSUblake Yes that's correct. Even when I remove everything and have just the below, it still jumps (and that's testing after clearing cache). let container = document.querySelector(".horizontalScroller__items"); gsap.to(container, { ease: "none", scrollTrigger: { trigger: ".horizontalScroller", pin: ".horizontalScroller", anticipatePin: 1, scrub: 0.2, invalidateOnRefresh: true, refreshPriority: 1, end: '+=450%', } }); In regards to containerAnimation, I actually tried this approach a few weeks back, but couldn't get it to work. I then reached out for guidance on Stack Overflow and there they told me that "Pinning and snapping won't work on ScrollTriggers with a containerAnimation" (reference)

I have what looks to be a rare bug with my pinned section. When viewing a page which contains this pinned section, on mobile, it will automatically start jumping up and down. Here are visual of my issue: Video (notice the automatic jump 13s in) In the above visual, it is automatically jumping up and down (I'm not scrolling near the end). In my demo, I've stripped back all of my JS to test what may be causing this. However, the issue persisted. It only works if I comment out pin: ".horizontalScroller", which I cannot, as it's pivotal. It works fine on desktop, no jumping, but when viewing on a mobile device, it starts to jump. I can only assume calculations with .pin-spacer are messing up, because once I'm passed that section, it almost jumps up to pin again., then realises it shouldn't do that so goes back down, when the element isn't even in view. See sandbox here (again, the effect I'm having is on mobile) Any ideas?

I realized that part of my issue in the above demo was that I was applying .animate to the path element, which already had an inline transform property set. I resolved this by grouping the path in a g tag and applying the .animate class on that instead (so the transforms do not conflict). V3 can be seen below, still working on a solution, but in case it helps further debugging: https://codepen.io/amit_rai95/pen/mdqVRgG?editors=1010