[Preloader timeline]

1 hour ago, mvaneijgen said:

Are you looking for something like this? You SVG was really big, so the start of the animation happend of screen. I've scaled it down, so that is is just the height of the browser window. 

 

I've also changed your first tween to a .from(), so it now comes from the bottom and then goes up. Hope it helps and happy tweening! 

 

 

 

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

@mvaneijgen

[Preloader timeline]

I will want something like this. I don't understand why my logo not appear from bottom at first time

See the Pen yLXYawz by nicofonseca (@nicofonseca) on CodePen

 

 

I create this

See the Pen oNJOpLM by Antonio-Nocella (@Antonio-Nocella) on CodePen

[infinite text rotation from right to left]

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

[infinite text rotation from right to left]

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.

 

See the Pen jOXLWMR by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Multiple clipPath animation]

@akapowl Yes it works  

Ty very much.

[Multiple clipPath animation]

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.

See the Pen QWzwMVd by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Video interaction on scroll + clip path animation]

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

 

See the Pen bGQrWRQ by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Video interaction on scroll + clip path animation]

20 minutes ago, mvaneijgen said:

Yes then switching from a .to() to a .from() is all you need right? 

 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

 

See the Pen bGQrWRQ by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Video interaction on scroll + clip path animation]

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

[Video interaction on scroll + clip path animation]

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

[Video interaction on scroll + clip path animation]

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?

 

See the Pen YzRxpOa by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Dot scroll animation mobile velocity]

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

See the Pen YzRNBLb by Antonio-Nocella (@Antonio-Nocella) on CodePen

 

[Dot scroll animation mobile velocity]

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.

[Dot scroll animation mobile velocity]

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? 

[Dot scroll animation mobile velocity]

33 minutes ago, mvaneijgen said:

If you want the animation to take longer on scroll you'll have to increase the scroll distance, so increasing the end value is the best solution. I would love to know why you don't want to change that, because that is probably an easier problem to solve.

 

 

See the Pen

See the Pen QWJdJPZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

by mvaneijgen (@mvaneijgen) on CodePen

 

 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.

 

[Footer overlap reveal scroll]

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.

[Dot scroll animation mobile velocity]

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) ?

 

See the Pen vYQgevY by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Footer overlap reveal scroll]

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 ?

See the Pen qBQRmvG by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Reverse carousel direction on scroll]

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

[Reverse carousel direction on scroll]

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

[Reverse carousel direction on scroll]

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 ?

Regard,
Antonio.

 

See the Pen gOQwLLw by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Demo available]

Its perfect  ty to all

[Demo available]

See the Pen bGQVXVW by mvaneijgen (@mvaneijgen) on CodePen

 

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.

[Demo available]

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 ?

[Automatic scrolling text loop]

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?

 

See the Pen mdQVyEP by Antonio-Nocella (@Antonio-Nocella) on CodePen