Horizontal scroll child item simple animation not working as intended

[amit95]

I have an svg which forms the basis of my horizontal scroller.

 

Within this svg, I have added the class .animate to the elements which I want to fade in up as the item comes into view. The .animate class for reference has been added to all the text items in the svg.

 

Currently, only the .animate elements that are in view initially fade in up. When I scroll down to continue the scroller, the other elements are static. They're not fading in or translating up or down in any way?

 

Note: view pen in full view

See the Pen OJOyeod?editors=1010 by amit_rai95 (@amit_rai95) on CodePen

[Cassie]

Hey there @amit95

 

The technique you're trying only works when vertical scrolling.

 

See the Pen rNYOXKJ?editors=1010 by GreenSock (@GreenSock) on CodePen

You're looking for containerAnimation. Give this a look and let me know if you have any questions.

 

Good luck!

 

 

 

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

[amit95]

Hi @Cassie,

 

I'll look into that demo above

 

For arguments sake, it my approach definitely not possible for horizontal scrolling? I.e, see this demo here:

 

See the Pen jOWvgjV by GreenSock (@GreenSock) on CodePen

[Cassie]

The solution's in my post - containerAnimation 

 

Quote

Horizontal "containerAnimation"

 With containerAnimation you can trigger animations when certain elements inside that container enter the viewport horizontally! It's like a ScrollTrigger inside of a ScrollTrigger. 🤯

 

[Cassie]

Ah! I see how that demo works now - apologies. I was jumping to conclusions.
 

Either way containerAnimation is gonna be mega helpful here!

[amit95]

No worries  Was just curious to see how that demo works without containerAnimation but, it also seems like an older demo (before containerAnimation was about).

 

Nevertheless, I've been experimenting with it and I'm encountering issues.

 

From the containerAnimation demo you've linked above, the bare minimum code required to get .box-1 to animate on scroll is :

 

let sections = gsap.utils.toArray(".panel");

let scrollTween = gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none", // <-- IMPORTANT!
    scrollTrigger: {
      trigger: ".container",
      pin: true,
      scrub: 0.1,
      //snap: directionalSnap(1 / (sections.length - 1)),
      end: "+=3000"
    }
  });

gsap.set(".box-1", {y: 100});

gsap.to(".box-1", {
  y: -130,
  duration: 2,
  ease: "elastic",
  scrollTrigger: {
    trigger: ".box-1",
    containerAnimation: scrollTween,
    start: "left center",
    toggleActions: "play none none reset",
    id: "1",
  }
});

Which I have mimicked as best as possible, just to get something animating on scroll.

 

In my original demo, I was using timelines to get content to fade out on scroll and for it to then start the horizontal scroller (you can see this in action in my original question).

 

Now in my latest demo below, as I've adapted the code to accomodate containerAnimation , I've had to remove the timeline, the horizontal scroller doesn't work as it did in the original and the .animate elements are in no way working as they should in the demo.

 

Any hints to point me in the right direction? Apologies in advance if I've asked something super stupid, only started learning GSAP about two weeks ago, but making progress slowly slowly 😬

 

Latest: 

 

See the Pen LYOGYZx by amit_rai95 (@amit_rai95) on CodePen

[amit95]

I realized that part of my issue in the above demo was that I was applying .animate to the path element, which already had an inline transform property set.

 

I resolved this by grouping the path in a g tag and applying the .animate class on that instead (so the transforms do not conflict).

 

V3 can be seen below, still working on a solution, but in case it helps further debugging:

 

See the Pen mdqVRgG?editors=1010 by amit_rai95 (@amit_rai95) on CodePen

[Cassie]

Hey Amit - a helpful tip is to really focus on *why* solutions from demos are working rather than just copying the code.

In your pen you have this tween -  this is animating the container successfully along the x axis. It's using container.scrollWidth and client width to find out the amount the container needs to be animated horizontally. But this isn't triggered by scroll, it's playing on page load.
 

  gsap.to(container, {
    x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
    ease: "none",
  })

Then you also have this tween - this is trying to animate the same container along the x axis.

But this is copied from a pen which was animating multiple containers of 100% width, it uses container.length, which would usually return the number of containers in that section - but in your case you only have one container, so if you log this out to the console you get NaN

  let scrollTween = gsap.to(container, {
    xPercent: -100 * (container.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".horizontalScroller",
      pin: ".horizontalScroller",
      anticipatePin: 1,
      scrub: true,
      invalidateOnRefresh: true,
      refreshPriority: 1,
      end: '+=4000px',
      markers: true,
    }
  });

Copying demos just causes confusion unless you really look at why the solution works