AntonioNB4
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by AntonioNB4
-
-
14 hours ago, Rodrigo said:
Hi @AntonioNB4,
You could try the dragClickables config option in the Draggable instance created in the helper function:
https://gsap.com/docs/v3/Plugins/Draggable/#dragClickables
Hopefully this helps.
Happy Tweening!
@Rodrigo
I have this , but in console i have this error: Uncaught ReferenceError: Draggable is not definedIsn't free ?
gsap.registerPlugin(Draggable, InertiaPlugin);
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
populateWidths = () =>
items.forEach((el, i) => {
widths[i] = parseFloat(gsap.getProperty(el, "width", "px"));
xPercents[i] = snap(
(parseFloat(gsap.getProperty(el, "x", "px")) / widths[i]) *
100 +
gsap.getProperty(el, "xPercent")
);
}),
getTotalWidth = () =>
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),
totalWidth,
curX,
distanceToStart,
distanceToLoop,
item,
i;
populateWidths();
gsap.set(items, {
// convert "x" to "xPercent" to make things responsive, and populate the widths/xPercents Arrays to make lookups faster.
xPercent: (i) => xPercents[i]
});
gsap.set(items, { x: 0 });
totalWidth = getTotalWidth();
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.updateIndex = () =>
(curIndex = Math.round(tl.progress() * (items.length - 1)));
tl.times = times;
tl.progress(1, true).progress(0, true); // pre-render for performance
if (config.reversed) {
tl.vars.onReverseComplete();
tl.reverse();
}
if (config.draggable && typeof Draggable === "function") {
let proxy = document.createElement("div"),
wrap = gsap.utils.wrap(0, 1),
ratio,
startProgress,
draggable,
dragSnap,
roundFactor,
align = () =>
tl.progress(
wrap(
startProgress + (draggable.startX - draggable.x) * ratio
)
),
syncIndex = () => tl.updateIndex();
typeof InertiaPlugin === "undefined" &&
console.warn(
"InertiaPlugin required for momentum-based scrolling and snapping. https://greensock.com/club"
);
draggable = Draggable.create(proxy, {
trigger: items[0].parentNode,
type: "x",
onPress() {
startProgress = tl.progress();
tl.progress(0);
populateWidths();
totalWidth = getTotalWidth();
ratio = 1 / totalWidth;
dragSnap = totalWidth / items.length;
roundFactor = Math.pow(
10,
((dragSnap + "").split(".")[1] || "").length
);
tl.progress(startProgress);
},
onDrag: align,
onThrowUpdate: align,
inertia: true,
snap: (value) => {
let n =
Math.round(parseFloat(value) / dragSnap) *
dragSnap *
roundFactor;
return (n - (n % 1)) / roundFactor;
},
onRelease: syncIndex,
onThrowComplete: () => gsap.set(proxy, { x: 0 }) && syncIndex()
})[0];
}return tl;
} -
On 12/7/2021 at 5:50 AM, GreenSock said:
Sure, there's a helper function in the docs that shows how to make it draggable:
Please keep in mind, though, that these free forums aren't really meant to be a "here are my requirements - please show me how to build it all" but we'd be happy to answer any GSAP-specific questions. The helper functions are intended to be a convenience - I hope this helps. 👍
If you need more detailed assistance beyond GSAP-specific questions, you can also post in the "Jobs & Freelance" forum to see if you can hire someone to help with your project.
Good luck!
If in this example every words are a link texts, the grab doesnt work ? @Rodrigo @Cassie
In the codepen works but online nope, as you can see on the video attachment. For have dragging i might register a new plugin ?
See the Pen eYaYRYV by Antonio-Nocella (@Antonio-Nocella) on CodePen
-
1 hour ago, Rodrigo said:
Just use toggleActions in ScrollTrigger:
Hopefully this helps.
Happy Tweening!
@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
See the Pen XWQRdzQ by Antonio-Nocella (@Antonio-Nocella) on CodePen
-
17 minutes ago, Rodrigo said:
Sì, utilizzerei semplicemente GSAP per tutto. Se usi un mix e poi vuoi/devi fare qualcosa su quegli stessi elementi con GSAP, dovrai rifattorizzare tutto per adattarlo. Meglio farlo all'inizio del progetto per ogni evenienza. Sicuramente la demo utilizza una classe, ma la mia preferenza è di non seguire questa strada.
Alla fine è principalmente ciò che funziona per te in base ai requisiti e ai vincoli del tuo progetto, non esiste un solo modo giusto per fare le cose in questo caso particolare.
Buon Tweening!
Ok i will follow your words. How can i start to change color bacground when scroll ?
-
38 minutes ago, Rodrigo said:
CIAO,
Non sono uno sviluppatore WordPress quindi non potrei parlartene, ma sono stati segnalati diversi problemi con elementor e lo
transition: all 0.3s;stile che applica agli elementi. Ciò è destinato a interferire con tutto ciò che GSAP tenta di animare su quegli elementi, come spiega Jack qui:Inoltre puoi ottenere la stessa funzionalità con ScrollTrigger, che sarebbe il mio approccio TBH:
Infine, è molto strano che tu stia utilizzando GSAP solo per impostare i valori degli stili, quindi la transizione: tutte le cose li animano, sicuramente non lo farei anch'io.
Buon Tweening!
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
-
17 hours ago, Cassie said:
Hi there, could you create a simplified demo in codepen demonstrating the issue. Try to cut the markup and GSAP code down to the minimum necessary to show the problem.
Here's a starting point
We'll certainly be able to advise on a fix once we have a demo.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?
See the Pen XWQRdzQ by Antonio-Nocella (@Antonio-Nocella) on CodePen
-
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. -
On 25/6/2022 at 09:50, GreenSock said:
Ecco un approccio diverso che semplifica vari aspetti:
- Imposta l'inizio/fine del trigger in modo uniforme in base al punto in cui ScrollTrigger di parent_container inizia a bloccarsi. In questo modo, non dobbiamo nemmeno preoccuparci di ripristinare altre animazioni che potrebbero aver spostato gli elementi di attivazione.
- Utilizza GSAP per interpolare dinamicamente le cose. Nessuna transizione CSS (anche se probabilmente potresti tornare alle transizioni CSS almeno per alcune di queste se preferisci ora che utilizza la strategia menzionata al punto 1 per il posizionamento).
- Utilizza le trasformazioni invece di marginTop per migliorare le prestazioni (marginTop influisce sul layout, il che è dannoso per le prestazioni di rendering del browser)
Normalmente non rielaboriamo progetti come questo per le persone, ma volevo dedicare un po' di tempo extra per guidarti sulla buona strada. Forse aiuterà anche qualcun altro in futuro.
Buona fortuna!
Hi, @GreenSock
what if I wanted to keep the first element already active?
-
On 6/21/2023 at 7:21 PM, Carl said:
I was so impressed by this technique I created a simplified demo to illustrate how just one letter's animation works.
I thought for sure each character would have been duplicated multiple times.
Great job @PointC!
@PointC If i want to do this , but infinite without an end ?
-
41 minutes ago, mvaneijgen said:
What is it you're trying to do? I understand your question, but what is the underlaying animation your are trying to build?
If I disable all JS and remove some CSS, so that the page can scroll normally the effect looks almost the same, the only thing your animation does now is add some stagger and some smoothness, but that is much easier to make with our https://gsap.com/docs/v3/Plugins/ScrollSmoother/ plugin, easier to manage and has much more options so to can set elements faster and slower.
If you're set on making this work I would restructure your layout, have all the text stacked on top of each other and move them in and out via an animation, they can come just from off screen, so that it looks like you're scrolling. I've written a card stacking guide, but the logic will also apply to this effect.
Hope it helps and happy tweening!
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. -
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.
AntonioSee the Pen dyLbKVR by Antonio-Nocella (@Antonio-Nocella) on CodePen
-
11 minutes ago, mvaneijgen said:
I don't know what the question is. ScrollTrigger works with the start and end markers, when the green markers touch the onEnter fires, when the red markers touch the onLeave fires. See the docs onEnter, onEnterBack, onLeave, onLeaveBack https://gsap.com/docs/v3/Plugins/ScrollTrigger/ The toggleActions are a short hand for that, so if you want things to happen in another order or you want things to happen at other triggers you have to update the toggleActions or the start and end makers so they suite your project.
If you still have questions please fork one of the demo's and show us what you've tried and explain what things are doing now and what you want them to do, that way we can help you debug. Hope it helps and happy tweening!
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?
See the Pen BabeVvj by Antonio-Nocella (@Antonio-Nocella) on CodePen
-
1 hour ago, mvaneijgen said:
Of course! Just use the CSS selector to :not select the first one
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?
-
28 minutes ago, mvaneijgen said:
When using GSAP I would let GSAP handle the animation you want and not try adding classes, much easier to manage.
Is something like this what you're looking for? I would just create a ScrollTrigger for each piece of text and just play or reverse the animation one the different callbacks onEnter, onLeave, ect read more https://gsap.com/docs/v3/Plugins/ScrollTrigger/ be sure to tweak the start and end values so that is triggers exactly when you want.
Hope it helps and happy tweening!
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?
See the Pen YzgbeLg by Antonio-Nocella (@Antonio-Nocella) on CodePen
-
17 hours ago, Rodrigo said:
Sorry still don't understand, isn't that exactly what the demo is doing? (I updated it in order to trigger things after the video is loaded):
The video element never moves is the clip path that is moving all the time, just like in the video in your first post on the thread.
Happy Tweening!
Yes ! Now i see it . Thank you for help.
-
9 minutes ago, Rodrigo said:
Hi,
I'm not sure I follow 100% what you mean, maybe something like this:
If not, please be super specific about what you're trying to do.
Hopefully this helps.
Happy Tweening!
@Rodrigo
See the Pen jOdXOKQ by Antonio-Nocella (@Antonio-Nocella) on CodePen
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. -
16 minutes ago, Rodrigo said:
Hi,
There is a known issue with ClipPath inset in a few browsers. They report an incorrect set of values (one value of the inset is not returned so GSAP by default uses 0 in that one) which leads to unexpected results. This has nothing to do with GSAP, just a browser thing.
Is more reliable to use polygon instead:
Hopefully this helps.
Happy Tweening!
@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 ?
See the Pen VwgVJEp by Antonio-Nocella (@Antonio-Nocella) on CodePen
-
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 ?
See the Pen PoWapLP by BrianCross (@BrianCross) on CodePen
-
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.See the Pen zYyXWOx by mvaneijgen (@mvaneijgen) on CodePen
-
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?
See the Pen OJdMPQM by Antonio-Nocella (@Antonio-Nocella) on CodePen
Question of Infinite Text Animation
in GSAP
Posted
Resolved i need to incorporate it by CDN