Leaderboard

Sir, I really appreciate for your help. It's completely brilliant and motivating me to learn about GSAP further. I will be continuing with my interest using GSAP animation. Thank you once again.

It is really easy to convert a CSS animation to GSAP, you just need to copy it mostly as it is. Only difference here is I am setting zIndex using set method. There is some additional code that is required to take care of rapid clicking because you are using button for each image. Take a look at docs in CSSPlugin, it will help you understand CSS animations using GSAP so you can convert easily. https://greensock.com/docs/Plugins/CSSPlugin

Is there any reason you're not using a timeline for this? TweenLite.defaultEase = Linear.easeNone; var tl = new TimelineMax({repeat:-1}); tl.from(".div1", 0.5, {x:100}); tl.to(".div2", 0.5, {y:100}); tl.from(".div3", 0.5, {scale:2}); tl.from(".div4", 0.5, {rotation:360}); More info: https://greensock.com/docs/TimelineMax Also check out the position parameter: https://greensock.com/position-parameter Happy tweening.

Yes, that's a problem because the element is fixed. https://developers.google.com/web/updates/2016/12/url-bar-resizing But the gap is at the top because the scroller moves in the opposite direction. Not sure how to fix at the moment. There might be a solution somewhere in here. https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome

If I understand correctly you just need to use staggerTo tween instead of using callbacks, take a look at docs for more information or check the video, https://greensock.com/docs/TweenMax/static.staggerTo() Does that help?