Nomili

Hello all, I'm working on a function that adds or removes a CSS class to the body element when the page scrolls. The trigger elements have a custom attribute tr-pagecolor-element='trigger', and I am using GSAP's ScrollTrigger to monitor the scroll state. my original design was for one element to have the attribute tr-pagecolor-class and the next not. so always alternating. Now my design has changed and I have two elements in a row that have tr-pagecolor-class. so far so good, but when you scroll, the tr-pagecolor-class is removed before it is directly added again. that looks pretty ugly. How can I adjust the code so that if the following element also contains tr-pagecolor-class, the class is not removed from the body? // Dark mode window.addEventListener("DOMContentLoaded", (event) => { function attr(defaultVal, attrVal) { const defaultValType = typeof defaultVal; if (typeof attrVal !== "string" || attrVal.trim() === "") return defaultVal; if (attrVal === "true" && defaultValType === "boolean") return true; if (attrVal === "false" && defaultValType === "boolean") return false; if (isNaN(attrVal) && defaultValType === "string") return attrVal; if (!isNaN(attrVal) && defaultValType === "number") return +attrVal; return defaultVal; } $("[tr-pagecolor-element='trigger']").each(function (index) { let triggerEl = $(this), targetEl = $("body"); let classSetting = attr("mode-2", triggerEl.attr("tr-pagecolor-class")); ScrollTrigger.create({ trigger: triggerEl, start: "top center", end: "bottom center", onToggle: ({ self, isActive }) => { if (isActive) { targetEl.addClass(classSetting); } else { targetEl.removeClass(classSetting); } } }); }); });

Thank you @Rodrigo for your help so far. After a few days of experimenting, I have figured out how to solve the animation (without the batch function). So far great, only one last thing I can't solve. How do I get the height of the .card to change only downwards and not upwards? Currently it is proportionally the same and the .card changes height in both directions. https://codepen.io/msadak/pen/KKbVjRR

Thanks for your help @Rodrigo What it does is open the accordion-copy class while scrolling. If you stop halfway, the accordion-copy is only halfway open. My goal is that, as in your example, the trigger for accordion-copy starts, the .accordion-copy opens completely, and when the next .accordion-copy is reached, the top one closes completely and the next one opens completely. So it doesn't determine the height of the .accordion-copy based on how far I just scrolled. Just like in the webflow example

i create a demo version of my idea in webflow. so no use of gsap. Just for better understanding what i mean https://ttttt-8f61bb.webflow.io/

thank you for the tip @Rodrigo. i have adapted the code and completely dispensed with jquery, so that the animation works completely with gsap. So far everything is great, but I'm trying to solve the whole thing without the pin: true. If I set it to false, the animation trigger no longer seems to work properly and the individual cards do not animate correctly. I would like to get rid of this "sticky" effect. https://codepen.io/msadak/pen/gOZpEQe

Here is another approach I tried to get the whole thing to work. Instead of working with display:none and block, I went the way of max-height and gave the individual .card divs additional classes to identify them better. But here too there are only problems. https://codepen.io/msadak/pen/MWZwBrd

Hello all, I have built an element that consists of 3 rows. My goal is that when a certain position of the individual rows is reached, the respective card animates. First the height should animate and then the text and the image. So far it seems to work, but I am at the end of my knowledge how to determine exactly the position when the respective card animates and the others close. Also, they all open at the same time and there is a strangely large gap at the end of the image. I also think that the animation could be a bit more "elegant", but I'm not getting anywhere there either. In the picture I have marked when the animation of the individual lines should begin approximately.

I went back to it last night and adjusted the function moveToNext() { to create the effect. I also removed the interpolate value to define a fixed colour for the maps using css. So far so good, but somehow the scaling and the movement still don't seem round. What exactly am I doing wrong here? Sidenote: i was now able to capture the glitch i was referring to in the previous post via screenshot. The black map moves to the end again and overlaps the grey map. this also happens with the other maps. not always, but often. https://codepen.io/msadak/pen/NWeWbyz

No, that's not what I mean. I think it's because the front card moves backwards through the other cards. I tried to capture this with a screenshot. You can see in the picture what I mean. The second to last card, which is just before the last card, moves through all the cards, so I think you get the feeling that it looks funny. I think that's why linktree has taken the approach of fading the first map slightly downwards and displaying it again at the back.

i just wanted to write you at the same time, that i made it :). i am so grateful for your help and advice. One more thing. Am I mistaken or is the front card pushing through the back ones? Looks like a glitch somehow

Your hint with the helper funciton Seamlessly loop elements along the x-axis, has been very helpful. Have a look at my updated codepen. The maps are now repeating, but I can't get the animation to work. But it is an important step in the right direction.

@mvaneijgen wow, i'm speechless. i've been working on the animation for 2 days and you've done it in no time. Thank you for your detailed description. It is important for me to understand how the code works in detail. How do you define the loop? My goal is to create 5 cards that have different content and are basically repeated. The approach I took was to hide the first card and then move it to the back and show it again. Elegant is different. Also, thanks for the tip about CSS. I will definitely keep that in mind for the future.

hey @mvaneijgen thx for your feedback. I updated my post with a minimal codepen. As i said, i'm new in gsap and that's far away from the linktree solution.

I am new to gsap and am just learning some techniques. I came across this stacked card animation from Linktree and wanted to ask if it is possible to build something like this with gsap. I have already tried to realise it, but have already failed with the proper positioning of the cards. When I search the internet for something like this, I find a lot of hits, but they are all horizontal or vertical. not diagonal like in the example. I couldn't find anything about this anywhere. Has anyone of you ever built something like this?

@Rodrigo you are truly a lifesaver. Thank you so much