Start next timeline when current is 50% completed

[Sandy Choudhary]

Hello Guys,

Hope you are doing good,

i need some help with timeline issue. iam creating a image slider where iam getting issue regarding starting next time line when current timeline is 50% completed.

Eg. when slide first is 50% completed then second slide should be started and so on as slider will be worked  infinite

 Thanks a lot for your help !   

See the Pen OJeJyYq by Sandy-Choudhary (@Sandy-Choudhary) on CodePen.

[Cassie]

Hi Sandy, this demo isn't working, so if you could fix that I'll be able to give you more advice.

 

Quote

when slide first is 50% completed then second slide should be started

 

For now - this position parameter means "start halfway through the previously inserted animation"

tl.to(".second", { x: 690, duration: 1 }, 
"<50%"
);

 

Infinite sliders can be a little tricky (depending on how it's set up visually), so I'll wait to see what your desired setup is before advising you here!

[mvaneijgen]

Sliders are a complex beast and require a lot of logic to work properly. For us to just jump in to your already 100 lines of code setup requires a lot of time investment to just figure out what is going on. If you want help with a specific question, please bring back the amount of code in your demo and focus on one issue at a time 

 

Also check out my post, it always helps me to take a step back and worry about optimising code later, just build the animation statically first which shows you what logic is needed. Hope it helps and happy tweening! 

 

 

[Sandy Choudhary]

@Cassie
Thanks.
can you let me know what issue you are getting while accessing code pen demo.  As run timeline for infinite time logic i already have added in development part iam stuck with the next slide to be start when current slide is 50% completed. i have tried with position parameter but not getting any luck. 
 

[Cassie]

I can see it now, thanks for updating the code. You demo is really complex though. There's no need to include keypress events in a question about timing.

Here's a really simple demo that shows the position parameter I was talking about.

 

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