timeline run at same time

[fun]

hello, I'm trying to make slide of image and text, I want the text 1 and image 1 display and disappear at same time and Immediately the next image and next text appear

the problem in this demo:

1- the text show then the image (not at the same time)

2- I feel like I see the body more than I should I want next slide to appear Immediately 

See the Pen BaGaOrM by noX10M (@noX10M) on CodePen.

[Cassie]

Hey there!

 

Check out the position parameter, that's the key to sequencing animations precisely
 

 

[fun]

Thank you @Cassie now they appear and disappear at same time as I want but there is a problem  they disappear fast I want each slide to stay like 5 seconds before next slide appear

See the Pen BaGaOrM by noX10M (@noX10M) on CodePen.

[mvaneijgen]

I like to do this with an empty .add tween that does nothing for x amount timeline.add(() => {}, "+=5"); // Add pause of 5 seconds 

 

You could do it in different ways, but if you want for example to add this to Scrolltrigger above solution would work. Hope it helps and happy tweening! 

 

See the Pen ExOapZG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[fun]

Thank you! @mvaneijgen

[Ibra Myles]

On 6/9/2023 at 11:37 AM, mvaneijgen said:

I like to do this with an empty .add tween that does nothing for x amount timeline.add(() => {}, "+=5"); // Add pause of 5 seconds 

 

You could do it in different ways, but if you want for example to add this to Scrolltrigger above solution would work. Hope it helps and happy tweening! 

 

 

 

My challenge seems a bit similar to this but its quite different, my sections are being generated dynamically using a map and the problem is only the first section is showing the animation since am using one class name. could someone give me some help plscode.text

[mvaneijgen]

Hi @Ibra Myles welcome to the forum! 

 

Can you maybe make a minimal demo using Codepen to share your code or one of our other templates, if that works beter for you: React/Next/Vue/Nuxt.