Horizontal scrolling of the timeline

[juanmafdezcuesta2]

Good morning! I have been using GSAP for a long time (almost 2 years) and this is my first post. I hope someone knows how to help me as I am totally blocked!

I have made a horizontal timeline, which I have an overflow where I hide the elements of my side timeline. I use GSAP to go through that timeline scrolling it to the end of that horizontal scroll and then follow the navigation of the web down.

 

 

As you can see in the example, the scroll keeps going down and does not reach the end of the element. Can you tell me what is wrong?

 

Thank you!

 

Greetings from Spain

See the Pen abreBeB by Juan-Manuel-Fern-ndez-Cuesta (@Juan-Manuel-Fern-ndez-Cuesta) on CodePen

[mvaneijgen]

Hi @juanmafdezcuesta2 welcome to the forum!

 

I'm not sure what it is you're trying to do. There needs to be enough space for the page to scroll and that doesn't seem the case, I've just add some fake space and given all your tween a timeline and moved the ScrollTrigger logic to that, so that it is easier to read. I've also given them all an ID with markers, so that you can visually see what is doing what. 

 

From personal experience I know you hardly need more than one ScrollTrigger to get the desired effect one timeline what one ScrollTrigger that controls that timeline is almost always much easier to control. To me it seems like your start and end trigger are off most of them already trigger when the page is loaded or are already finished. My advise would be remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  Hope it helps and happy tweening! 

 

 

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

 

A side note: instead of using .fromTo() tweens you can also use .to() and .from() and GSAP will animate to the current state of the element

// For instance this
.fromTo(
  ".animation-down",
  {
    opacity: 0,
    yPercent: -50
  },
  {
    yPercent: 0, // the browsers default is 0
    opacity: 1, // the browsers default is 1 
  }
);
// is the same as 
.fromTo(
  ".animation-down",
  {
    opacity: 0,
    yPercent: -50
  }
);