AntonioNB4

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; }

Hi community, i created this codepen where the text rotate from right to left but on mobile version the rotation isnt infinite, it arrives to a certain point and restart but i need a fluid infinite rotation like a loop. Where im wrong? What can i do ? Best regards, Antonio. https://codepen.io/Antonio-Nocella/pen/jOXLWMR

@akapowl Yes it works Ty very much.

Is there any way to have multiple clippath animation together ? I tried but the first clippath animation is too fast and after that the second one starts immediatly too. I would like one to happen first until its completion and then the other one starts.

OK I will try as you say. As for the start of the clip path movement, why does it start too late? It moves after a long scroll https://codepen.io/Antonio-Nocella/pen/bGQrWRQ

Yes it is and i did it. Do you know why the cli path is only working left and right while the value below is not seen ? In fact the video is not cut from below by the clip path but is full height to the section. I don't want the video to take the full height of the section it is in. And when i switch the value, the clip path begins to extend with delay. In contrast, when the values were not reversed the clip path was instantaneous https://codepen.io/Antonio-Nocella/pen/bGQrWRQ

The way you did it is the result I was looking for, but reversing the clip path so instead of tightening in the scroll it widens to show the whole video

Ok i see, good. For have inverted cli path result i will invert the value ?

Good morning, I have created a codepen with the interaction on the video in the scroll and a simple animation with clip path also with scroll trigger. The two interactions together do not work. When the clip path trigger is active the interaction that allows the video to move with the scroll does not work. Conversely, if I deactivate the interaction with the clip path the video scroll works. Is there a possibility to make both work together? https://codepen.io/Antonio-Nocella/pen/YzRxpOa

Probably this will be a solution: the only problem to fix is that when I reach the 'end' earlier than I should, the scaling animation freezes but I would still like it to continue even if I have passed the end point earlier than expected https://codepen.io/Antonio-Nocella/pen/YzRNBLb

Yew i want that animation happen on scroll, but setting to 'end' any value from mobile, only increases the scroll time to the next section but the scaling of the black dot is always fast, indeed instantaneous. The solution would be to have an end with a value of 1 with a slowdown in the scaling of the black dot. If it can be done. Otherwise I leave it as it is.

Ok i tried but i probably misunderstood. I don't want to prolong the scroll to the next section to have a slowdown in scaling the black dot. I would like to have a normal scroll not prolonged but at the same time the scaling of the black dot should not be instantaneous but linear until it has filled the section it is in. I tried using the value you wrote but I always have a prolonged scrolltrigger but the scaling of the black dot is always too fast. How could I do it?

OK you set end in a different way, i I had set the value like this end: '+=10000' , but on mobile the scroll was too long before reaching the next section. I will try to set the value as you did. I will update you.

Basically, I wanted the footer to reveal itself at scroll but at the same time give a scroll animation to the first heading starting in overlapping on heading two and ascending it back to its original position. In the end I solved this by positioning heading two at the sticky bottom and setting the scroll trigger with uncover on heading one.

Hi community, I need from mobile to reduce the scaling speed of the point. I am using matchMedia and trying various solutions. the only one seems to be scrub but with reverse scroll the animation is instantaneous. How can I reduce the scaling speed from mobile without changing the end value (the scroll becomes long) ? https://codepen.io/Antonio-Nocella/pen/vYQgevY

Hi community, I have created a footer reveal effects . So far so good. I would like the first section of the footer (the first child) to be in turn overlapped on the second child of the footer and at scroll, when the whole footer is shown, its position (first child) must return to its original position no longer overlapping the second child. I am trying somehow to change the y-positioning but nothing happens. Any suggestions ?

Forgive me for having misunderstood. In the javascript of your codepen where do you select the images that initially scroll and then change direction ? I say this because I need to adapt the code to my html content

Its very helpful but I don't understand which way you are selecting the images to move ?

Hi dev, im trying to reverse the direction of carousel on scroll, but as you can see on demo something go wrong. Where i'm going wrong ? https://codepen.io/Antonio-Nocella/pen/gOQwLLw Regard, Antonio.

Its perfect ty to all

https://codepen.io/mvaneijgen/pen/bGQVXVW it should start as in codepen but when it goes up it must move not only upwards in the container but simultaneously to the left to stop at the top left corner.

Hi @mvaneijgen, If i want to change the end position, as it rises to the top, instead of in the centre top but left top how can I do it ?

Hi devs, I was inspired by another thread on this community. How can i fill blank space with a infinite loop of the text inside? https://codepen.io/Antonio-Nocella/pen/mdQVyEP