AntonioNB4

@Rodrigo look at my codepen, how can manage your animation with the animation play on hover? i need the animation on scroll and this is ok, and at the same time the hover animation for change background color and color of menu item when the header is not sticky. As you can see togheter create some bugs, some animation not reverse https://codepen.io/Antonio-Nocella/pen/XWQRdzQ

Ok i will follow your words. How can i start to change color bacground when scroll ?

so you give the class with the scroll trigger and then manage everything in css or always within the scroll trigger? For example background color etc

Hi Cassie ty for response. Considering that there are two different systems, I tried to reproduce all the conditions, trying to get close to a probable issue. I created the CodePen. In the CodePen, I apply a class to the scroll event on the header named .sticky. While in WordPress, the class on the header is applied on scroll by the settings of the module named .elementor-sticky--effects. As you'll notice in the CodePen, when the header is sticky, I change the color of 'a' elements, forcing it with !important. This is because in WordPress, I'm forced to override the module's rule in order to change the color of the menu items on sticky. The CSS on the website is as follows: .header_container.elementor-sticky--effects .myMenu .menu-item a { color: #0C2638 !important; transition: all 0.3s; } As you'll notice from the CodePen, when I interact with the menu items while the header is sticky and then return to the top of the page, the color of 'a' elements doesn't reset but remains red. This is probably because the CSS rule is taking precedence ? So, I wonder why the rule resets when I don't interact ? How can I avoid this problem considering that I must have the CSS rule with !important? https://codepen.io/Antonio-Nocella/pen/XWQRdzQ

Guys, I'm here, unfortunately not with a demo on CodePen but with a website developed in WordPress. I've created a sort of mega dropdown menu using GSAP. Below is the code, which I would describe as spaghetti (and I welcome any advice on how to improve it). But let's get to the problem. When I hover over the "Group" menu item, the mega menu appears, and at the same time, with GSAP, I change the background of the header and the menu items to blue. When the header becomes sticky, I change the menu items' color using CSS by targeting the auto-generated class ".elementor-sticky--effects" from the module I'm using. The issue arises when the header becomes sticky without interacting first with the menu. While it's sticky, if I hover over the "Group" menu item and then scroll back to the top of the page, the menu items remain blue instead of resetting to the default white color. It's as if the reverse of GSAP goes in tilt. What could I do? Is there a way with GSAP to detect when the menu has that specific class (.elementor-sticky-effects) and change the menu color with GSAP while it's sticky? This is the dev website: https://devmanelli.ioslab.it/ This is the full code:/*mega menu gruppo*/ let menu = document.querySelector(".gruppo_menu"); let menu_item = [".other"]; let element = document.querySelector(menu_item); let drop = document.querySelector(".menu_content"); let col = document.querySelector(".elementor-location-header"); let col_menu = [".menu", ".pre-menu", ".post-menu"]; let element2 = document.querySelector(col_menu); let line = document.querySelector(".menu-item .elementor-item-active"); let container_logo = document.querySelector(".container-logo"); let animation = gsap.timeline({ paused: true }); animation.set(drop, { y: -20, zIndex: 1,}, 0); animation.to(drop, { display: "block", opacity: 1, duration: 0.3, delay: 0.2, ease: "power3.out", y: 0, }, 0); menu.addEventListener("mouseenter", () => animation.play()); element.addEventListener("mouseenter", () => animation.reverse()); element2.addEventListener("mouseenter", () => animation.reverse()); container_logo.addEventListener("mouseenter", () => animation.reverse()); col.addEventListener("mouseleave", () => animation.reverse()); document.body.addEventListener("click", () => animation.reverse()); /*mega menu progetti*/ const voice_progetti = document.querySelector(".progetti"); let drop_progetti = document.querySelector(".progetti_content"); let animation_progetti = gsap.timeline({ paused: true}); animation_progetti.set(drop_progetti, { y: -20, zIndex: 1,}, 0); animation_progetti.to(drop_progetti, { display: "block", opacity: 1, duration: 0.3, delay: 0.2, ease: "power3.out", y: 0, }, 0); voice_progetti.addEventListener("mouseenter", () => animation_progetti.play()); voice_progetti.addEventListener("mouseenter", () => animation.reverse()); voice_progetti.addEventListener("mouseenter", () => animation2.play()); col.addEventListener("mouseleave", () => animation_progetti.reverse()); element.addEventListener("mouseenter", () => animation_progetti.reverse()); /*change color header and menu*/ let header = document.querySelector(".myHeader"); let header_gradient = document.querySelector(".myHeader.elementor-sticky--effects"); let li = document.querySelectorAll(".myMenu .menu-item a:not(.custom-icon .sub-menu li a)"); let chevron = document.querySelectorAll(".custom-icon .elementor-item"); let logo = document.querySelector("#logo img"); let overlay = document.querySelector(".overlay"); let animation2 = gsap.timeline({ paused: true }); animation2.to(header, { background: "#fff", delay: 0.2, duration: 0, ease: "power2.inOut", borderBottom: "1px solid #80c5c2" }, 0); animation2.to(logo, { duration: 0.1, delay: 0.2, attr: { src: "/wp-content/uploads/2024/03/logo-manelli-mobile-blue.svg" } }, 0); animation2.to(overlay, { opacity: 0.6, display: 'block', duration: 0, }); animation2.to(li, { color: "#0C2638", duration: 0, delay: 0.2, }, 0); animation2.to(chevron, { fill: "#0C2638", duration: 0, delay: 0.2, }, 0); animation2.to(line, { '--e-global-color-d35985e': "#0C2638", duration: 0, delay: 0.2, }, 0); menu.addEventListener("mouseenter", () => animation2.play()); overlay.addEventListener("mouseenter", () => animation2.reverse()); element.addEventListener("mouseenter", () => animation2.reverse()); element2.addEventListener("mouseenter", () => animation2.reverse()); container_logo.addEventListener("mouseenter", () => animation2.reverse()); col.addEventListener("mouseleave", () => animation2.reverse()); document.body.addEventListener("click", () => animation2.reverse()); /////// This is the css that i used to color menu item on scroll effects: .header_container.elementor-sticky--effects .myMenu .menu-item a { color: #0C2638 !important; transition: all 0.3s; } A thank you to anyone willing to help me.

Hi, @GreenSock what if I wanted to keep the first element already active?

@PointC If i want to do this , but infinite without an end ?

I'm sorry, I've modified the CSS, and now with the background, the effect is much more understandable. I'm trying different values, but if I set it to +=100%, the scroll is too fast. If I increase the value to give it the right speed, the scroll ends too late after the last card. So I was wondering what value I could use to make the scroll stop at the last card. https://codepen.io/Antonio-Nocella/pen/dyLbKVR @mvaneijgen

Hello community, how can I make the scroll stop at the last card? I'm trying different values, but if I set it to +=100%, the scroll is too fast. If I increase the value to give it the right speed, the scroll ends too late after the last card. So I was wondering what value I could use to make the scroll stop at the last card. Best regards. Antonio https://codepen.io/Antonio-Nocella/pen/dyLbKVR

I know how scrollTrigger works.... In my CodePen, the texts right after the first one don't trigger unless they already have the default blur effect. This happens on the first scroll when the page is loaded. However, if you go back, activating the toggle action, this doesn't happen, and everything is perfect. Maybe there's some modification needed on the toggle action? Or do I need to set the default blur myself with .set? https://codepen.io/Antonio-Nocella/pen/BabeVvj

Great! It works.... I noticed that the blur effect on text doesn't kick in on the first scroll (on the initial page load), but it activates if you scroll back and then scroll down again. What could be the reason for this?

I think yes :)) is there the possibility to exclude the first text from blur ?

Hi community, Hello community, is there a possibility to intercept the text in the second column by assigning a class to the text not in the center of the viewport, to give it a blur effect, perhaps by adding a class once intercepted? https://codepen.io/Antonio-Nocella/pen/YzgbeLg

Yes ! Now i see it . Thank you for help.

@Rodrigo https://codepen.io/Antonio-Nocella/pen/jOdXOKQ ok rodrigo forgive me. I will try to be precise. If you see the video I attached. When the clipath moves upward on the Y axis, the video inside it looks free from the movement of the container itself. As if it were in absolute position. I need something like that in the video.

@Rodrigo OK now it's clear. Instead, if I wanted to move the mask from the bottom to the middle and then activate the clip-path polygon that expand himself?

Hi guys im trying to recreate this effects like in the video but is still hard to do. Any suggestion ? WhatsApp Video 2023-12-04 at 17.03.58.mp4

Thank you guys for all suggestions. 🙂

Hi guys, in this animation, what i need to disable for not repeat the animation by first slide but continue in navigation ?

A few weeks ago I asked for help with this preloader and thanks to the fantastic @mvaneijgen for found a solution. If you notice the logo in the center it is already visible before the animation even starts. I tried playing with opacity but with 0 results. I would like the logo to appear with the animation reaching the center as it already does and then moving upwards. As it is now, the logo is already visible before the animation. This is annoying.

It works 🤩 Easy things but for me the parallax is so difficult

It's probably a stupid question, but I can't give the parallax effect to the background. I'm looking at all the old topics or on codepen, but it's not working as it should work. Can anyone help me on this simple request?

Astonishing!!! Ty so much. what if I wanted to have the logo not active already upon loading, perhaps with an opacity? @mvaneijgen

I will want something like this. I don't understand why my logo not appear from bottom at first time https://codepen.io/nicofonseca/pen/yLXYawz I create this

I found the solution in other topic gsap.utils.toArray(".cb-tagreel-row2").forEach((line, i) => { const speed = 1; // (in pixels per second) const links = line.querySelectorAll(".cb-tagreel-item2"), tl = horizontalLoop(links, { speed: speed, repeat: -1 }); links.forEach((link) => { link.addEventListener("mouseenter", () => gsap.to(tl, { timeScale: 0, overwrite: true }) ); link.addEventListener("mouseleave", () => gsap.to(tl, { timeScale: 1, overwrite: true }) ); }); }); function horizontalLoop(items, config) { items = gsap.utils.toArray(items); config = config || {}; let tl = gsap.timeline({ repeat: config.repeat, paused: config.paused, defaults: { ease: "none" }, onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100) }), length = items.length, startX = items[0].offsetLeft, times = [], widths = [], xPercents = [], curIndex = 0, pixelsPerSecond = (config.speed || 1) * 100, snap = config.snap === false ? (v) => v : gsap.utils.snap(config.snap || 1), // some browsers shift by a pixel to accommodate flex layouts, so for example if width is 20% the first element's width might be 242px, and the next 243px, alternating back and forth. So we snap to 5 percentage points to make things look more natural totalWidth, curX, distanceToStart, distanceToLoop, item, i; gsap.set(items, { // convert "x" to "xPercent" to make things responsive, and populate the widths/xPercents Arrays to make lookups faster. xPercent: (i, el) => { let w = (widths[i] = parseFloat(gsap.getProperty(el, "width", "px"))); xPercents[i] = snap( (parseFloat(gsap.getProperty(el, "x", "px")) / w) * 100 + gsap.getProperty(el, "xPercent") ); return xPercents[i]; } }); gsap.set(items, { x: 0 }); totalWidth = items[length - 1].offsetLeft + (xPercents[length - 1] / 100) * widths[length - 1] - startX + items[length - 1].offsetWidth * gsap.getProperty(items[length - 1], "scaleX") + (parseFloat(config.paddingRight) || 0); for (i = 0; i < length; i++) { item = items[i]; curX = (xPercents[i] / 100) * widths[i]; distanceToStart = item.offsetLeft + curX - startX; distanceToLoop = distanceToStart + widths[i] * gsap.getProperty(item, "scaleX"); tl.to( item, { xPercent: snap(((curX - distanceToLoop) / widths[i]) * 100), duration: distanceToLoop / pixelsPerSecond }, 0 ) .fromTo( item, { xPercent: snap( ((curX - distanceToLoop + totalWidth) / widths[i]) * 100 ) }, { xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false }, distanceToLoop / pixelsPerSecond ) .add("label" + i, distanceToStart / pixelsPerSecond); times[i] = distanceToStart / pixelsPerSecond; } function toIndex(index, vars) { vars = vars || {}; Math.abs(index - curIndex) > length / 2 && (index += index > curIndex ? -length : length); // always go in the shortest direction let newIndex = gsap.utils.wrap(0, length, index), time = times[newIndex]; if (time > tl.time() !== index > curIndex) { // if we're wrapping the timeline's playhead, make the proper adjustments vars.modifiers = { time: gsap.utils.wrap(0, tl.duration()) }; time += tl.duration() * (index > curIndex ? 1 : -1); } curIndex = newIndex; vars.overwrite = true; return tl.tweenTo(time, vars); } tl.next = (vars) => toIndex(curIndex + 1, vars); tl.previous = (vars) => toIndex(curIndex - 1, vars); tl.current = () => curIndex; tl.toIndex = (index, vars) => toIndex(index, vars); tl.times = times; tl.progress(1, true).progress(0, true); // pre-render for performance if (config.reversed) { tl.vars.onReverseComplete(); tl.reverse(); } return tl; }