Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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

See the Pen VzKmQN by shmdhussain (@shmdhussain) on CodePen

See the Pen VzKmQN by shmdhussain (@shmdhussain) on CodePen

 

See the Pen VzKmQN by shmdhussain (@shmdhussain) on CodePen

Link to comment
Share on other sites

Hi shmdhussain,

 

Welcome to GreenSock Forums.

 

There are several ways to loop such a case.

I like this one:

 

See the Pen zdKjNr by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

 

 

  • Like 6
Link to comment
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:

 

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

 

  • Like 5
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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
Link to comment
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.
×