Trying to acheive cross fading slider as in http://css3.bradshawenterprises.com/cfimg/#cfimg3 using GSAP, I am able to do the animation for one slide not able to do for other slides, basically difficult to combine timeline and stagger
Code pen: https://codepen.io/shmdhussain/pen/MvjEom `
// instantiate TimelineMax const tl = new TimelineMax({ repeat: -1 }); tl.to('.test', 2, {opacity:1, scale:1, ease: Power0.easeNone}) .to('.test', 4, {scale:1.5,ease: Power0.easeNone}, ) .to('.test', 2, {opacity: 0, scale:1,scale:1, ease: Power0.easeNone});
img{ /* width:100%; height:100%; */ position:absolute; top:0; left:0; } img:first-child{ position:relative } div{ width:400px; height:200px; overflow:hidden; position:relative; } .test{ //opacity: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> <div> <img src="http://via.placeholder.com/400x200" alt=""> <img class="test" src="https://www.skynewsarabia.com/web/images/2017/08/01/969105/400/200/1-969105.jpg" alt="bb"> <!-- <img class="test" src="https://www.skynewsarabia.com/web/images/2017/08/01/969022/400/200/1-969022.jpg" alt="bb"> <img class="test" src="https://www.skynewsarabia.com/web/images/2017/07/31/968732/400/200/1-968732.JPG" alt="bb"></div> -->
`
You could try the position parameter or a stagger
method to create the overlap. Although based on your code it seems that the position parameter is a better alternative:
https://greensock.com/position-parameter
Finally, and my intent is not to discourage people for asking GSAP related questions here, you'll get a better and faster support in the GreenSock forums:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.