How to update timeline progress after a tween

[Abanob Akram]

Hi folks,

 

I'm a newbie with this, so I hope anybody can help. I'm trying to create a horizontal slider using TimeLineMax and ScrollMagic. Everything works pretty fine, except the navigation dots I need to use to move between the sections. Whenever a dot is clicked, a tween is added to move to its section. Now, if you tried to scroll further, it's actually starts from the last position ( not from the new one )

 

Hope you guys can help!!

 

Thanks,

Abanob

See the Pen WNNpKaK by abanobakram (@abanobakram) on CodePen

[ZachSaucier]

Hey Abanob and welcome to the GreenSock forums.

 

What's the point in using ScrollMagic for this? You can do horizontal scrolling without it.

 

In any case, it's not clear when you want the dots to highlight - do you want it when the slide is halfway? Fully visible? some other amount? 

 

I recommend using a slider that our very own Craig made which you can find in this thread:

 

[Abanob Akram]

Hi @ZachSaucier

 

Thanks so much for your quick response!

 

Actually, I'm using ScrollMagic because I will need to have a number of other sections above and below the horizontal slider. So, I'm not sure if using the example you attached will help me to add other section so when scrolling away from the horizontal scroll slider, page scrolls normally. Could you please confirm that ?

 

Thanks again for your help, I really appreciate that :)

 

Regards,

Abanob

 

[ZachSaucier]

I see. Perhaps this post can help you then:

 

[Abanob Akram]

Great, thanks so much, I'll give it a shot. On the other hand, may I ask if you were able to check the pen added ? I mean if there's a way I can move to a specific point of the slider, and TimeLineMax catch that so I don't see the jump on scroll after clicking one of the dots ?

 

Thanks,

Abanob

[ZachSaucier]

Well, the new version of your pen doesn't have dots. So I'm afraid I can't comment since the old version isn't here any longer.

 

Generally speaking, when iterating on projects in the forums it's good to fork the previous pen so that both the old and new copies exist. That way the demos are still associated with the posts that they're embedded in.

[Abanob Akram]

Oh, I see. Sorry for that. Here's the one with the dots.

 

All I need to do is update the xPercent value saved in the timeline - after clicking the dot - so it doesn't start from the value saved before click.

 

Any help would be greatly appreciated!!

 

Best Regards,

Abanob

[ZachSaucier]

Generally speaking, you would tween the timeline that is controlling the navigation when a dot is clicked, like so:

 

var horizontalSlide = new TimelineMax();

horizontalSlide.to( "#scroller", 1, { xPercent: "-80%", force3D: false, ease: Power0.easeNone }, 0);

var totalNum = document.querySelectorAll( "li" ).length - 1;
$( "li" ).on( "click", function() {
   var index = $(this).index();
  
  TweenMax.to( horizontalSlide, 1, { progress: index / totalNum });
  
});

This works, but ScrollMagic doesn't keep in sync. I'm not sure how to make sure it stays in sync since I've never really used ScrollMagic. ScrollMagic isn't a GreenSock product and we don't really support it here.