Timeline Duration and Delay looped animation

[LPIP]

Hi!

 

Ok so I have created a looped animation with multiple timeline items that are linked to a master timeline. Each item starts below the bottom of the screen and then moves up to past the top of the screen and onRepeat the X position of the item is randomly changed.  I have used a mouse wheel event to progress the master timeline on scroll and its working well.  Each sub timeline is added to the master timeline at an equally spaced position . Each item is set so that when it finishes it waits a while before repeating. I have set the repeatDelay to a similar value to the duration so all the elements stick around their relative position. 

 

I would ultimately like 3-4 items in the window at a time with the bottom overlapping the top(no gap). if I have around 7-8 items this works well as you can see in the first codepen example , but as I increase the number of elements the page becomes cluttered with items. Ideally you want to view this fullscreen on a laptop to get the idea properly. 

 

here is another codepen example with around 30 items , you can notice that the page is cluttered with items. the animation is basically fine but I need it to work with 90 items .

 

my questions re this are:

 

1. how do I increase the space between items so there are only 3-4 items on the page at a time but dynamically depending on how many items (could be between 10 and 90) , with the start of the first items and end of the last items overlapping (no gap in between start and end of timelines).

2. how do change the duration (speed of an item to go from the bottom to the top) slightly on each repeat. I have a function that gets a random number between 20 - 30 for this which is basically what I want but I want it to change each iteration of the animation for each Item. 

3. Third question unrelated : how do I embed codepens on the gsap forum to make my post easier to understand? Last time I posted a question on here the codepen didn't embed properly and no one viewed or interacted with it. 

 

please let me know if I need to explain anything in further detail!

 

Thanks! 

from CHRIS

 

 

 

[ZachSaucier]

Hey Chris and welcome.

 

There are a few different ways to setup this sort of thing. You could

1. Run 4 (or however many) tweens that do what you're wanting. In the onComplete of each, run another tween with a different image, position, and optionally duration. I think this might be your best bet given all of your requirements.
2. Set it up using a great big timeline. If you're going to do that, it would probably be helpful to animate the first few images at the end as well so that there's not an empty state. However, you can't change the duration of tweens in the timeline.
3. Create a timeline for all of the images but create a new timeline when the timeline is nearing its completion. That way you can have different durations and looping is a little easier.

I recommend 1 but 3 is not bad.

 

2 hours ago, LPIP said:

how do I embed codepens on the gsap forum to make my post easier to understand? Last time I posted a question on here the codepen didn't embed properly and no one viewed or interacted with it. 

When asking a question, just include the CodePen link in the input section for CodePens. It will embed at the bottom of your post.

 

In regular non-first posts, just include the CodePen link and it will auto-convert to an embed demo.

 

Or you could force them to just be links by switching out "codepen.io" for "cdpn.io" in the URL. I edited your post to do that.