[Animate SVG Path segment while scroll]

I changed the animation from "scroll" event listener to request animation frame.
Now all works as expected.

[Animate SVG Path segment while scroll]

Hi,

 

I have a text Logo SVG containing HTML Paths.
when the user scrolls down (> 10 px) the paths of the Logo will be hidden except two paths (.path-d, .path-m).
the second path will animate next to the first one. This work and happens correctly.

When the User scrolls up to the top of the page the position of the second path should be animated back to the initial position.
This doesnt work for any reason. I dont get it.

 

const logo = document.querySelector('.logo');
const logoSvg = document.querySelector('#logo');
const paths = logoSvg.querySelectorAll('path');
const pathM = document.querySelector('.path-m');
const tl = gsap.timeline();
const filterPaths = Array.from(paths).filter(path => !path.classList.contains('path-d') && !path.classList.contains('path-m'));
// e.target is the event from scrolling container
if (e.target.scrollTop >= 10) {
  console.log('here');
  tl.to(logo, { duration: .2, left: '2%' })
    .to(filterPaths, { duration: .1, opacity: 0 })
    .to(pathM, { duration: .4, x: '-75' });
} else {
  console.log('and here');
  tl.to(pathM, { duration: .4, x: '0' });
}

I tried it now with timeline and simple 'gsap.to(...)' but both with the same result.
When the User scrolls to top, the second Path (.path-m) moves a millisecond to the right and goes back to the position where it have to be when the user scrolls down. That doesnt makes sense to me.
In HTML the property which ist on the Path is 'matrix(1,0,0,1,-75,0)' which is definitely wrong.

What do I forget?

What do I wrong?

Thanks in Advance.

[Synchronous GSAP transition don't work]

I changed it to the following:
 

const defaultTransition = {
  name: 'default',
  sync: true,
  leave({ current })  {
    const done = this.async()
    gsap.to(current.container, {
      duration: 1,
      height: 0,
      onStart: function() {
        this.targets()[0].style.zIndex = "1";
      },
      onComplete: function() {
        done();
      }
    });
  },
  enter({ next }) {
    const done = this.async()
    gsap.set(next.container, { y: "40%" })
    gsap.to(next.container, {
      duration: 1,
      y: 0,
      onComplete: function() {
        gsap.set(this.targets()[0], { y: 0 });
        done()
        console.log("complete leave");
      }
    });
  }
}

This works more or less like I need it.

 

Thank you very much!

[Synchronous GSAP transition don't work]

Ok,

 

BarbaJS transition needs to have a leave  and an enter function.

Both functions can work synchronous or not.
In this Case they have to work synchronous.

 

Here my previous try:
 

const defaultTransition = {
  name: 'default',
  sync: true,
  leave: ({ current }) => {
    gsap.to(current.container, { duration: .5, y: '-100%' });
  },
  enter: ({ next }) => {
    initContainer = next.container;
    TimeLine.from(next.container, {
      duration: .5,
      y: "100%"
    });
  }
}

 

That means the animation of both container needs to be splitted up.
If not, nothing will happen, because when the enter function kicks in the first container isn't present anymore.

Means, your example doesn't work in this specific case like seen in the video.

[Synchronous GSAP transition don't work]

I used your example code in my Barba instance.

Thats what happens: 

 

const transition = {
  name: 'def from Zach',
  sync: true,
  enter: ({ current, next }) => {
    gsap.to(current.container, next.container, {
      duration: 3,
      y: "-100vh",
      onStart: function() {
        this.targets()[0].style.zIndex = "1";
        console.log("start leave");
      },
      onComplete: function() {
        document.body.removeChild(this.targets()[0]);
        gsap.set(this.targets()[1], { y: 0 });
        console.log("complete leave");
      }
    });
  }
}

 

[Synchronous GSAP transition don't work]

I already tried to make a codepen/codesandbox working with barbaJS, but it doesnt because of the prefetch of barba. This doesnt work with sandboxes.

 

But I can send you a private message with a link to what I want to achieve. 

[Synchronous GSAP transition don't work]

1 minute ago, ZachSaucier said:

I may be being dull here, but why doesn't it work? If you're just moving something off screen and then hiding it, it should work (like my demo shows). Or are you saying that -100vh won't work?

I mean in my Example 😅

 

Your example works, but not for the end result I want to achieve.

[Synchronous GSAP transition don't work]

Hey Zach,

 

Thank you!

 

Yes the way I do it in the example is not optimal, but its just a very small and downsized version of what I exactly want to do.
Maybe more information will help here.

I use BarbaJS to translate between page loads.
So the first container in the example is the "current.container" in Barba's "leave" function.
The Second is the container pulled by BarbaJS into the DOM to replace the first in Barba's "enter" function.
Both functions are sync'd.
Thats why I need to split the two animations.

 

My example doesn't work because both container are on their position in DOM and TranslateY works relative to the start position of the container.
GSAP uses always TranslateY as far as I see, when I use { y: 100% } ?

The result at the end should be look as follows:

The first container should slide up or at least the height of the container should go to 0.
The second Container should be at maybe 40% top and slide up to top 0 while the first container animates.

 

I hope thats kinda useful.. 😅

Thanks for your Feedback!

 

[Synchronous GSAP transition don't work]

Hi guys,

 

I am trying to solve a simple transition with GSAP, but unfortunately it doesn't work and I don't know why...
Setup is two divs, both { width: 100%, height: 100% } and after clicking a button both should slide up synchronous.

Here is the Sandbox: https://codesandbox.io/s/festive-fast-0reqe

Thanks in Advance!