Issue with slideshow

[Mike H D]

Hi,

I am trying to get an infinite looping slideshow to work on a site I am currently building. The looping is working great, but some elements inside the individual slides are behaving oddly. I have attached a codepen link, but briefly the setup is:

 

1. I have a stack of slides, which is their non-javascript fallback state
2. Each slide has an image in, which is absolutely positioned to cover the whole slide (I need this as the images need alt text etc. and are part of the content, so I can't use background image)
3. Each slide also has some text, an svg and a button. These have a z-index applied so they sit above the absolutely positioned image
4. When the javascript kicks in, I stack the slides using grid and then gsap does its magic.

 

The issue is the child elements in the slide aren't fading along with the rest of the slide. You will see what I mean in the codepen.

 

If anyone has any thoughts that would be awesome, it feels like a z-index / stacking context issue, but I am not sure. Also, apologies for the massive inline SVG elements but I thought I would include them in case they were relevant to the issue.

 

Eventually I want the elements inside the slide to fade in later than the background image, but I need to cross this bridge first!

 

Thanks!

See the Pen poQPJzv by MikeHarrisonDesign (@MikeHarrisonDesign) on CodePen

[kanguyen-vn]

Hi! I think the issue may lie in the slicing of your items array. I haven't had time to really deeply debug your code to figure out the true source of your problem -- perhaps somebody else who knows more could help you do so better than I can, and also it's about 2:30am where I'm at 😅 -- but I was able to provide a quick fix. Instead of making all slides except the one being shown invisible, you can just tween a consecutive pair at a time, which results in cleaner code. I added some CSS just to make everything invisible except the first slide, then tweened the appearance and disappearance of a consecutive pair of slides for however long the items array is. I used a for loop to make it dynamic, although there is commented out hard code that's a little easier to read.

 

See the Pen OJamVwL by Kiet-Nguyen-the-bashful (@Kiet-Nguyen-the-bashful) on CodePen

[SteveS]

Sliders and slideshows are where I learned how difficult web animations can be. With GSAP, it is particularly easy to try and use all of the built in functionality even if it isn't a perfect fit. The benefit of GSAP though is that it is super easy to write your own solutions.

First of all, the issue with text remaining is above all else an HTML issue. I tried to debug it, but codepen just isn't the correct environment and your styles are fairly complex.

Second, instead of writing all the code you have, it's much easier to write a single function that transitions from x slide to y slide, and then call that on a timed loop. Here is an example I wrote that is much less code than what you have currently.

See the Pen MWzmwxo by StevenStavrakis (@StevenStavrakis) on CodePen

 

This isn't exactly what you asked for, but it should help quite a bit in progressing your debugging.

[Mike H D]

Thanks both for your help, I can see where I was going wrong and how your solutions worked.

 

I now have the following setup, where the slides are fading in in a loop, and in sequence. I now need to get the internal elements to fade in as well, after the slide itself has faded. I have set up a timeline for this, but am not sure how to trigger it inside the loop that is controlling the main animation.

 

I am working through Carl's wonderful course, but am still early on in my GSAP journey so I may be approaching this in entirely the wrong way! This is probably going to be a common implementation for me (slideshow with animated elements inside each slide), so it would be great to crack the right approach for it. The number of slides is out of my control (CMS generated) so I need to make it work with any number.

 

See the Pen XWyRRNp by MikeHarrisonDesign (@MikeHarrisonDesign) on CodePen

[mvaneijgen]

Hi @Mike H D you could just add the tweens to the timeline? 

 

I don't know what the selector i+1%items.length is doing (it somehow resets it self if it is the first element), but if you would just add all the logic to a timeline and play that in sequence you have what you want right? 

 

I've used the GSAP utility method selector to be able to scope the selector to the current element, read more here https://greensock.com/docs/v3/GSAP/UtilityMethods/selector(). Hope it helps and happy tweening! 

 

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

[Mike H D]

Thanks everyone for your patient help. I am really close now - I have the slides looping, and internal elements animating in as I would like. I have attached a codepen of my updated code. I have gone for @SteveS approach to the loop as I understand how that works a bit better.

 

The only thing I am now struggling with is I would like the first slide, when first shown, to have the internal elements animate in. Currently the first slide to have them animate in is slide 2 (and then all subsequent slides).

 

What would be the best way of doing this?

 

See the Pen ExOXVgL by MikeHarrisonDesign (@MikeHarrisonDesign) on CodePen

[SteveS]

Something like this should work: