Assign a unique item number to a text element within each CMS item.
// repeats for each .work-cms-item on the page
$(".work-cms-item").each(function (index) {
// select only the text element inside this current item
let childText = $(this).find(".child-text");
// set its text to the current index + 1
childText.text(index + 1);
});
This each loop runs for each work-cms-item on the page.
Inside the loop, $(this) refers to the item we're currently looping through instead of every cms item.
index starts at zero. Each time the loop runs, index increases by 1.
For item 1, index equals 0.
For item 2, index equals 1.
For item 3, index equals 2.
Multiple instances of the same section
When we have multiple instances of the same section type on a page, this each loop ensures that elements within a section only impact other elements within that same section.
// repeats for each cta-section on the page
$(".cta-section").each(function (index) {
// selects only the heading & button inside this current section
let currentHeading = $(this).find(".cta-heading");
let currentButton = $(this).find(".cta-button");
// on mouseenter of this section's button
currentButton.on("mouseenter", function () {
// add class to this section's heading
currentHeading.addClass("is-large");
});
// on mouseleave of this section's button
currentButton.on("mouseleave", function () {
// remove class from this section's heading
currentHeading.removeClass("is-large");
});
});
Connecting two collection lists
When we hover over a cms-trigger-item, we want to show only the matching target item and hide all other target items.
// repeats for each .cms-section on our page
$(".cms-section").each(function () {
// find the trigger & target items inside this section
let triggerItems = $(this).find(".cms-trigger-item");
let targetItems = $(this).find(".cms-target-item");
// pass any number into the function to make that item active
function makeItemsActive(index) {
// removes is-active from all triggers & targets inside this section
triggerItems.add(targetItems).removeClass("is-active");
// adds is-active to the trigger at the selected index
let currentTrigger = triggerItems.eq(index).addClass("is-active");
// adds is-active to the target at the selected index
let currentTarget = targetItems.eq(index).addClass("is-active");
}
makeItemsActive(0); // makes the first item active on page load
// on hover of any trigger items within this section
triggerItems.on("mouseenter", function () {
// get the index of this item
let itemIndex = $(this).index();
// make it active
makeItemsActive(itemIndex);
});
});
Animating only the currently active and previously active items
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script>
$(".cms-section").each(function () {
let triggerItems = $(this).find(".cms-trigger-item");
let targetItems = $(this).find(".cms-target-item");
let prevTriggerItem;
let prevTargetItem;
function makeItemsActive(index) {
// get the current active items
let currentTriggerItem = triggerItems.eq(index);
let currentTargetItem = targetItems.eq(index);
// animate text
gsap.to(prevTriggerItem, { opacity: 0.4, color: "white" });
gsap.fromTo(currentTriggerItem, { opacity: 0.4, color: "white" }, { opacity: 1, color: "yellow" });
// animate images
gsap.to(prevTargetItem, { opacity: 0, scale: 0.8 });
gsap.fromTo(currentTargetItem, { opacity: 0, scale: 0.8 }, { opacity: 1, scale: 1 });
// store previously active items for next time function runs
prevTriggerItem = currentTriggerItem;
prevTargetItem = currentTargetItem;
}
makeItemsActive(0);
triggerItems.on("mouseenter", function () {
if (!$(this).is(prevTriggerItem)) {
let itemIndex = $(this).index();
makeItemsActive(itemIndex);
}
});
});
</script>
