fade-in out horizontal vertical slider text's

[no_liver]

Hi,

 

I've created a horizontal scrolling timeline that fades in-out the images and on top a different layer with another image + textarea. The images work nicely since the overlap is no issue but unfortunately I'm still unable to set the text's to fade-in-out and they're overlapping.

 

I've tried different methods of fromTo and from but I think I'm lacking experience and understanding of the documentation to get this right. Also I am trying to keep in mind the solution will be dynamic and according to slide index and not static with classes as in the demo currently (so there could be an N amount of slides on any occasion). 

 

Any advice how this should be solved would be greatly appreciated, thanks in advance ! 

See the Pen oNddzEq by rulloliver (@rulloliver) on CodePen

[Rodrigo]

Hi @rulloliver,

 

Sorry for the delay in the answer 🙏

 

There are a few issues in your setup. Your HTML has a few extra quotes in a few places:

<a href="#" class="link-arrow"">Read more<i></i></a>

Also the selectors you are using in your ScrollTrigger instance are not in the HTML. Your HTML looks like this:

<!-- SECOND -->
<div class="single-slide column is-offset-2"></div>
<!-- LAST -->
<div class="single-slide column is-offset-2"></div>

And your JS is this:

tl
  .from(".single-slide.second", {
    autoAlpha: 0,
    yPercent: -10
  })
  .from(".single-slide.last", {
    autoAlpha: 0,
    yPercent: -10
  });

So those selectors won't match. On top of that you are just animating the elements in, not out, that's why they are overlapping. What you can do is use the position parameter in order to animate the elements out as the next are animating in:

tl
  .to(".single-slide.one", {
    autoAlpha: 0,
    yPercent: -10
  })
  .from(".single-slide.second", {
    autoAlpha: 0,
    yPercent: -10
  }, "<")
  .from(".single-slide.last", {
    autoAlpha: 0,
    yPercent: -10
  })
  .to(".single-slide.second", {
    autoAlpha: 0,
    yPercent: -10
  }, "<");

Here is a fork of your codepen:

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

 

Let us know if you have any other question.

 

Happy Tweening!

[no_liver]

Hello, Rodrigo! 

 

Thank you so much for this - it works as expected and makes sense and I can continue working towards the end result. 

 

On another note I do have a questions regarding this I need to figure out: since the current solution isn't very dynamic do you have examples or could elaborate how this could work with a n amount of slides without classes (it's going to be a CMS solution and the user will add a desired amount of slides)?

 

Have a great day!

 

 

[Rodrigo]

Hi,

 

You can definitely loop through the slides using a for each. The problem right now is that your setup is a bit confusing and not very flexible for that. For example you have two different elements with the same class "single-content one" but in different parents and they share the same styles, so there is no way right not to loop through them.

 

I forked the last codepen I made in order to illustrate the problem I ran while creating a more dynamic solution:

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

 

As you can see I added an extra class for some elements, but since they still share the same class and styles everything becomes a little messy. You have to give unique classes to the elements in this parent, while keeping the styles in order to make this approach work:

<div class=" fade-slider">
  <div class="single-slide fade-slide one">
    <img class="single-slide--img" src="https://source.unsplash.com/gOApUyqOo-c/1200x900" data-src="https://source.unsplash.com/gOApUyqOo-c/1200x900" />
  </div>
  <div class="single-slide fade-slide second">
    <img class="single-slide--img" src="https://source.unsplash.com/Rcs5zylYqMc/1200x900" data-src="https://source.unsplash.com/Rcs5zylYqMc/1200x900" />
  </div>
  <div class="single-slide fade-slide last">
    <img class="single-slide--img" src="https://source.unsplash.com/vXPF8MmN2FA/1200x900" data-src="https://source.unsplash.com/vXPF8MmN2FA/1200x900" />
  </div>
</div>

Sorry I can't be of more assistance, but this is mostly about HTML and CSS which is a bit beyond our scope. Unfortunately we don't have the time resources for delivering fully working solutions, since we must focus our attention on GSAP related issues.

 

You'll have to update the HTML and classes for the selectors in the loop in order to make that work.

 

Let us know if you have any other question.

 

Happy Tweening!