Jump to content
Search Community

Crossfade animation

Emilek1337 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

Im animating background images using autoAlpha to smoothly animate the images when they change, however the images switch only when I set the z-index according to the order. Now let's say I want to animate 100 images one after another like I did in the example. Is there a better more efficient way to just set the z-index on the item that is being animated at the moment or something like this? I'm looking for a better way to order the images.

Btw. Am I doing the crossfade the right way? I need to zoomin and switch images, is this the best way to do it? 

See the Pen BMPVjL by vountish (@vountish) on CodePen

Link to comment
Share on other sites

Hi @Emilek1337,

 

There is certainly an easier way. You can either use Javascript to reverse the order of the images in the DOM (to take advantage of a natural stacking order), or you can loop through to set the z-index based on the number of images.

 

Here is an example of how to assign the z-index while looping through the images.

 

 

See the Pen exjbMR by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

Link to comment
Share on other sites

1 minute ago, Shaun Gorneau said:

Hi @Emilek1337,

 

There is certainly an easier way. You can either use Javascript to reverse the order of the images in the DOM (to take advantage of a natural stacking order), or you can loop through to set the z-index based on the number of images.

 

Here is an example of how to assign the z-index while looping through the images.

 

 

See the Pen exjbMR by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

Thank you so much. I'm also creating a loading bar which changes the width from 0 to 100%. I want to make the bar animation as long as the background images animation. So when I end animating the images the loading bar is at width 100%. Can I somehow connect the loading bar animation to make it always equal to the duration of the other timeline with the images?

Link to comment
Share on other sites

  • 2 years later...

Hey @FERNANDO PUJOL and welcome to the GreenSock forums.

 

6 minutes ago, FERNANDO PUJOL said:

i cant see my images  when i put the file in a browser?

That most likely means that your file paths are incorrect. It'd probably be best to host your images online somewhere and then replace the srcs as appropriate.

 

7 minutes ago, FERNANDO PUJOL said:

how to put 7 images in this code?

You'll need to add more images to the HTML, set their srcs, then edit the JS to accommodate. It'd probably be best to use a loop to do so. I highly recommend the getting started article and my article about animating efficiently.

Link to comment
Share on other sites

11 minutes ago, FERNANDO PUJOL said:

hi i cant see my images  when i put the file in a browser?

 

 

and  how to put 7 images in this code? can you help?

 

thanks

here is my codes

<style type="text/css">
<!-- 
 
-->


.one {
  height: 100vh;
  width: 100vw;
  background-image: url('Expo-maitrise-UQAM-88.jpg');
 background-size: cover;
  position: absolute;
}

.two {
 height: 100vh;
  width: 100vw;
  background-image: url('Alfred-Pellan-%20Femme%20sous%20influence%201999.jpg');
 background-size: cover;
    position: absolute;
  
}

.three {
   height: 100vh;
  width: 100vw;
  background-image: url('auras%20rouge.jpg');
 background-size: cover;
}

.z {
  z-index: 5;
}

.i {
  z-index: 3;
}

.p {
  z-index: 1;
}

#progress-bar{
  width: 75%;
  height: 5px;
  border: 1px solid white;
  border-radius: 2px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 50px;
  z-index: 1000;
}

#progress-bar span{
  display: block;
  width: 0;
  background-color: white;
  background-color: rgba(255,255,255,.5);
  height: 5px;
}

</style>

<script type="text/javascript">

const images = document.querySelectorAll('.img');

// Here is where the z-index is being set
// from greatest to least
images.forEach( function(e,i){
  e.style.zIndex = images.length+1-i;
});


let imagesAnim = new TimelineMax({onUpdate: progressBar});

imagesAnim

.to(images[0], 2.5, {scale:1.2}) 
.to(images[0], 0.4, {autoAlpha:0}, '-=1') 
.to(images[1], 2, {scale:1.2}, '-=1') 
.to(images[1], 0.4, {autoAlpha:0}, '-=1')
.to(images[2], 2, {scale:1.2}, '-=1') 


function progressBar(){
  document.querySelector('#progress-bar span').style.width = imagesAnim.progress()*100+'%';
}

</script>
</head>

<body><div class= " Expo-maitrise-UQAM-88.jpg"></div>
  <div class= "  Alfred-Pellan-%20Femme%20sous%20influence%201999.jpg">  </div>
  <div class=  " auras%20rouge.jpg"></div>

<div id="progress-bar"><span></span></div>

</body>
</html>

 

 

can you see a major mistake that i did?

 

thanks

 

 

Link to comment
Share on other sites

As I said, you need to upload the images somewhere. If you using a web host for your website, you can probably upload the images there. If not, you could upload them to some other site like imgur and link to them via that.

 

There are several issues with your JS:

  • Your JavaScript should go right before the closing </body> tag, not in the head.
  • You're not loading GSAP. You need to do that before your custom script that uses GSAP.
  • You're making one of the most common GSAP mistakes — using the old GSAP syntax. We highly recommend the newer, sleeker syntax.
  • I'm not sure why you're using an onUpdate to update the width of your span. Why not make that a part of your timeline?
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...