How to Create a superb vertical Marquee that pause at intervals.

[uzisky 0 Likes (Newbie)]

Hello, first timer and a newbie here.

I've been trying to create a vertical Marquee that scrolls vertically with pauses at interval that works exactly like this:

https://www.jqueryscript.net/demo/Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker/#

But I've been hitting a road block. Your help is appreciated.

See the Pen ZEGNpGq by enuzo (@enuzo) on CodePen

[ZachSaucier 6,048 Likes (Superhero)]

Hey uzisky and welcome to the GreenSock forums.

 

What road block are you hitting?

 

Side note: We recommend using yPercent instead of y: some percent. You can read about why in the most common GSAP mistakes article:

 

[uzisky 0 Likes (Newbie)]

Hello @ZachSaucier, thanks for your response. The problem is how to have the items scroll vertically in a seamless loop and how to make each item pause for lets say 2 seconds, then scroll to the next item, then pause again ...on and on just like the first example on this page.

This is what the current code code looks like:

var tl = gsap.timeline();

tl.to(".item", {y: "-=50", duration: 2});

I tried this:

var tl = gsap.timeline();

tl.to(".item", {y: "-=50", duration: 2, repeat: -1, repeatDelay: 2});

and this without successes:

var tl = gsap.timeline({repeat: -1, repeatDelay: 2});

tl.to(".item", {y: "-=50", duration: 2});

[uzisky 0 Likes (Newbie)]

I'm also trying out the yPercent in place of y: since it's the recommended way to do it. It doesn't solve the problem though.

[mikel 3,665 Likes (Superhero)]

Hey @uzisky,

 

Just another approach

 

See the Pen xxZeVag by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[uzisky 0 Likes (Newbie)]

1 hour ago, mikel said:

Hey @uzisky,

 

Just another approach

Happy tweening ...

Mikel

Wow, thanks Mikel! Exactly want I want. I really need to dig into GSAP.