Horizontal Scroll With Multiple Nested Animations

[SaifUllah]

Hi Guys, Could you please let me know how can I add the Multiple Nested Animations in Horizontal Scroll? I want same Section 2 nested pin Animation for Section 3 & 4 or Multiple.

 

See the Pen BaVZKoL by saifullahbutt85 (@saifullahbutt85) on CodePen

[Rodrigo]

Hi,

 

You'll have to follow basically the same approach with a few tweaks. The heart of this particular animation is that the panels slide from the right to the left, all at the same time, so basically what seems to be pinned is just the panels not sliding while the content animation happens in the timeline.

 

All you have to be careful with is that we're dealing with arrays, so you need an index position (remember arrays have zero index positions) and get all the stops and loop through them instead of looping through the sections.

 

This seems to work in the way you intend. Just remove some of the data-pin attributes and it seems to be dynamic enough:

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

 

Hopefully is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

[SaifUllah]

@Rodrigo Thank you for your answer, I still have a confusion. Could you please clear, what if have multiple and different classes in every single Section? How can we Animate/Manage multiple classes of each Section in loop?

 

For Example: in Section Purple, what if I have something like below?

<section class="panel purple" data-pin="true">
    <h2 class="title-fade-in">Section Purple</h2>
    <div class="box-shape"></div>
    <p class="fade-out-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <img src="demo.png">
</section>

[Rodrigo]

Hi,

 

Just add them to the timeline in the order you want, if on every section you have the same items with the same classes of course, otherwise you'll have to create specific conditional logic for each section.

 

I updated the codepen example to reflect an extra element, the approach should be the same for more elements:

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

 

Happy Tweening!

[SaifUllah]

@Rodrigo Thank You, but this is kinda same as before, I think I didn't explain well, I want Multiple  & Different Animation in every single Section. Please have a look into the HTML below.

 

As you can see, Section 2,3 and 4 child's has different classes and I want to animate each section child differently according to its class.

<div class="container">

  <section class="panel red">
    Section 1
  </section>

  <section class="panel orange" data-pin="true">
    <h1 class="title-fade-in-left">Section 2</h1>
    <p class="text-fade-out-left">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <div class="box-rotate"></div>
  </section>

  <section class="panel purple" data-pin="true">
    <h1 class="title-fade-in-right">Section 3</h1>
    <p class="text-fade-out-right">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <div class="box-zoom-in"></div>
  </section>

  <section class="panel green" data-pin="true">
    <h1 class="title-fade-in-top">Section 4</h1>
    <p class="text-fade-out-top">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <div class="box-bounce"></div>
  </section>

  <section class="panel gray">
    Section 5
  </section>

</div>

 

[Cassie]

Hey there! You don't have to create a loop. That's just one possible route.

The main thing you want to focus on is the steps making up your timeline

 

steps

1 - move the horizontal section one 'step'
2 - animate the elements inside

 

(repeat)

You could express this as a loop, but you could also just write out a timeline with all the steps manually. Sometimes trying to simplify the code down before you have it working is a little counterintuitive. If we're not understanding you, It may be a good route to just write out a timeline first, then we can help you simplify the code down?

 

If you want to do a loop you'll likely have to check for the elements within each section and then animate them if they exist. Something like this.

See the Pen WNyJQjN?editors=0011 by GreenSock (@GreenSock) on CodePen

 

 

[SaifUllah]

Hi @Cassie Thank you so much, this is exactly what I want. Now as you said, could you please help me to Simplify this Code and let me know the possible easy ways to achieve the same thing as I would have multiple animations in each Section?

[Cassie]

That example is already simplified. Why don't you give it a go. If you feel like your code that you've written is too lengthy then pop back and we'll give you some pointers.

[SaifUllah]

Sure, Thanks @Cassie

[SaifUllah]

Hi @Cassie, Hope you're doing well. I've used the same approach in NextJS, and now I'm trying to make the separate Component of each Section, could you please help me to simplify the code? I wanna move every section's GSAP Code in its own Component to manage every Section Animation separately. You can see the code below. Thanks!

https://stackblitz.com/edit/nextjs-brywes?file=pages/index.js

[SaifUllah]

@Cassie @Rodrigo Any update guys?

[Rodrigo]

Hi,

 

Honestly I don't see any major issues in your code GSAP or React wise, everything seems to be well organized and working as expected. Now if you want to move the GSAP code to each section, that is going to be more complicated since everything is being controlled by a single ScrollTrigger instance. I strongly recommend you to keep that approach since trying to break everything into small pieces, while a good approach in some cases, is not something I'd recommend in this case. I understand that having smaller files with as little code as possible is tempting and a good approach keep in mind the Single Responsibility Principle (https://en.wikipedia.org/wiki/Single-responsibility_principle), the file that creates the ScrollTrigger instance for all the panels should just add each component to the DOM tree and run that particular code, which is exactly what is doing right now. The only things I would change is remove the CSS from the JSX, which is more of a personal thing than anything (I just don't like adding CSS in JS files and polluting the HTML code, that's why I really like Vue) and use GSAP context on your setup:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Happy Tweening!

[SaifUllah]

Hi, Thanks @Rodrigo. I'll follow the Single Responsibility Principle and will definitely setup the GSAP context. On the other hand I've another Question, Should I use Scroll Smoother for making this Horizontal Scroll Smoother? or I should increase the animations duration time to have smooth scroll & animation effect?

[Rodrigo]

Hi,

 

You can definitely use ScrollSmoother with ScrollTrigger and a horizontal animation. Keep in mind that both plugins work based on the natural scroll position of the browser, no scroll hijacking or any funky business. Also the entire GSAP ecosystem is 100% agnostic, so you can use it in any web development environment (Vanilla, Vue, Angular, Svelte, React, Eleventy, etc.).

Here is a live example that shows how it can be implemented:

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

 

That particular example uses the Container Animation feature by ScrollTrigger, you can find out more about it here:

https://greensock.com/3-8#containerAnimation

 

But the main idea of the codepen example is to show you how simple is to setup both plugins at the same time.

 

Let us know if you have more questions.

 

Happy Tweening!

[SaifUllah]

Hi @Rodrigo. Thank You, I've followed this concept and applied the Scroll Smoother on the site below, but still it is not really smooth as the demo Above, could you please check and let me know that what could be the issue? Scroll Smoother is working fine but Animations are moving too fast while Scrolling with Mouse Wheel.

 

When I use mouse wheel faster, something happens like this.

 

[Rodrigo]

Hi,

 

Is really hard to debug a live site since we don't have access to the bits of the code that could be causing the issue. In this case I think that the problem could be related to the duration of your ScrollTrigger instances. With duration I don't mean time but pixels. Please watch this short tutorial by @Cassie in order to understand what I mean:

If you keep having issues, please set up a minimal demo so we can take a better look at it.

 

Happy Tweening!

[SaifUllah]

Thanks @Rodrigo. sounds like increasing ScrollTrigger end pixels would solve the issue. But I've a question, what Observer is doing in this Demo?

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

[Rodrigo]

Hi,

 

Observer is watching for some specific events (wheel, touch and pointer) in the Horizontal Container (element with the .container class in it). For example you can drag with your mouse pointer to the left and right and then it will update the scroll position accordingly:

Observer.create({
  target: ".container",
  type: "wheel,touch,pointer",
  onPress: (self) => {
    self.startScroll = scrollTween.scrollTrigger.scroll();
    scrollTo = gsap.quickTo(scrollTween.scrollTrigger, "scroll", {
      duration: 0.5,
      ease: "power3"
    });
  },
  onDrag: (self) => {
    scrollTo(self.startScroll + (self.startX - self.x) * dragRatio);
  }
});

Hopefully this makes things clearer.

 

Happy Tweening!