shmdhussain

CrossFading slideshow using GSAP

Recommended Posts

I tried the CrossFading slideshow demo as in this url http://css3.bradshawenterprises.com/cfimg/#cfimg3, I tried in the codepen using GSAP but I am able to achieve it using hardcoding the number of images using nth-child, In my scenario number of images is variable. Is it any way to achieve it better using GSAP than this. Thanks in advance for any help

 

Share this post


Link to post
Share on other sites

Hi shmdhussain,

 

Welcome to GreenSock Forums.

 

There are several ways to loop such a case.

I like this one:

 

 

Kind regards

Mikel

 

 

  • Like 6

Share this post


Link to post
Share on other sites

I think Mikel's approach will take the awards for most elegant and concise.

 

If you need to play, pause, resume the animation, putting everything in a timeline might be nice. I did it like this:

 

 

  • Like 5

Share this post


Link to post
Share on other sites

Mikel ,Ah, I still give you credit than for finding that old thread ;)

Got a chuckle seeing how 2012 Carl had to write code with the old syntax 

 

//never use this syntax! It is from the stone age of GSAP for JS
timeline.append(TweenMax.staggerTo(images, 1, {css:{autoAlpha:1}, repeat:1, yoyo:true, repeatDelay:.5}, 2.5))

 

So glad we don't have to do that any more!

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Hi @Carl,

 

Why not refresh this old post in the Banner Forum - ofc with new syntax?

 

By the way - You've probably noticed that I've applied the current syntax.

 

Kind regards

Mikel

  • Like 1

Share this post


Link to post
Share on other sites

Good idea, Mikel. I updated one of my comments in that old thread to show the new way.

Share this post


Link to post
Share on other sites

Hi PapaDeBeau,

 

I'm a bit confused by why in 2019 are you posting in a thread from 2017 about whether or not a thread from 2012 has been updated.

If you have a question about GSAP please let us know. If it's not directly related to this thread, please post a new topic.

Thanks!

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.