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

[uzisky]

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]

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]

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]

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]

Hey @uzisky,

 

Just another approach

 

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

 

Happy tweening ...

Mikel

[uzisky]

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.

[GowthamK]

On 7/26/2020 at 1:10 AM, mikel said:

Hey @mikel

 

This is great, can you please help to achieve this on scroll.

 

[GreenSock]

@GowthamK if you'd like some help, please provide a minimal demo. Attaching an animation to scroll is very easy with ScrollTrigger - see the ScrollTrigger docs. ?