How to create a simple image rotator

[willenglishiv]

my googlefu isn't strong here:

 

I'm just trying to do something simple where I just have an image rotate out at an interval, infinitely.

I have seen the 'make an array out of elements, setInterval and then TweenMax AutoAlpha' but I was wondering if there was an easier way.  Most solutions were written in 2013, not sure if they are relevant now.

 

Apologize if this has been answered before.

See the Pen pojJBgm by willenglishiv (@willenglishiv) on CodePen

[ZachSaucier]

Hey willenglishiv and welcome to the GreenSock forums. 

 

I'm not sure that I understand your question. In cases like this a demo is very useful for us to understand the effect that you're wanting to create. You can read more about how to create one here:

 

If you just want to rotate an image infinitely it's simple!

See the Pen MWawPwJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I highly suggest reading GSAP's Getting Started article:

 

[willenglishiv]

added codepen.

[ZachSaucier]

Ah, that's what you mean by "rotator". That's not a bad method. I'd use GSAP to do the interval though. Also I'd use GSAP 3's formatting and drop jQuery:

See the Pen mdeJgBL?editors=0010 by GreenSock (@GreenSock) on CodePen

[willenglishiv]

does your example use GSAP3? My project is still using 2.

[ZachSaucier]

3 minutes ago, willenglishiv said:

does your example use GSAP3? My project is still using 2.

Yep. Like I said, I would upgrade to GSAP 3. It's mostly compatible with GSAP 2's formatting so you should be able to upgrade no issue. Might as well do it sooner rather than later

 

But you can make the same switch to using GSAP to do the interval using GSAP 2. Just change the formatting of the tween to GSAP 2's formatting.