Jump to content
Search Community

CrossFading slideshow using GSAP

shmdhussain test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

  • 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

  • 2 years later...

@nicofonseca - you rock so hard, man! Thank you! This is the most responsive help forum I've ever been a part of!

 

I am having trouble with it though in my live site. It loads all the images fine, and for the first second or so you can see the first image. But then it just sits on the last image, scaling in and out, in and out. Not sure why.

 

Just before I saw your reply, I had found this pen, that was *nearly* working on my site, except that the images cycle through super fast. It doesn't look as complete as yours either, but I'm having trouble figuring out how to troubleshoot between the two. On my dev site, yours appears to scale and be the speed I want, but doesn't show me all the images. The other one actually cycles through the images, but seems less...something:

See the Pen LYGJNdY by ebinabo (@ebinabo) on CodePen

Link to comment
Share on other sites

Btw @ThePixelPixie I updated the latest Codepen you found with the original Codepen logic. 

See the Pen 7ea54484deee5ae0eacd7687f03409f2 by nicofonseca (@nicofonseca) on CodePen



Some small things:
- Be careful with const images = gsap.utils.toArray('img') because this takes ALL img tags on your site. It is better using something like const images = gsap.utils.toArray('.container img') 
- Set all your images with opacity: 0 and overflow:hidden to .container in your CSS
- To achieve your goal you'll need to create a timeline instead of a stagger animation with repeat:-1. This will create a fluid animation.

I hope this help you !  🙂

  • Like 2
Link to comment
Share on other sites

@nicofonseca - You mentioned updating the pen without jQuery. Is it possible that since the dev site I'm working on (it's a WordPress site) *does* use jQuery, that the issue is a conflict there? I don't have immediate access to the logs and will have to ask for that later this morning. Nothing's showing up in Console that seems out of sorts though.

 

I definitely appreciate the "some small things" notes. Those are very helpful, and much appreciated! (i'll repeat, this is the most responsive and helpful forum I've ever been on. Just awesome what you and the others do here!)

 

Alas, the updated code above those is resulting in exactly the same issue I was having with your original update to the syntax from yesterday. It's sitting on just the last image and scaling in and out, in and out, but not cycling through the images.

Link to comment
Share on other sites

7 minutes ago, ThePixelPixie said:

You mentioned updating the pen without jQuery. Is it possible that since the dev site I'm working on (it's a WordPress site) *does* use jQuery, that the issue is a conflict there?

 

There shouldn't be a conflict. Make sure you are selecting what you expect by console logging the images out.

console.log(images);

 

  • 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.
×
×
  • Create New...