wildbee

thank you very much @GreenSock, this is exactly what I need and also thanks for the reminder of the sprite!

Thank you, Jack! I added codepen

ohh, sorry, this small pen - https://codepen.io/Nikolasgrizli/pen/BaLmoNw

hi, Zach, thanks for link, this material is very useful, but the example describes how to apply an animation or a series of animations to several elements and the timeline is created there for each elememt separately. My problem is that different elements must be attached to the same timeline and, as in the example, the stagger does not work

Hello connoisseurs! I'm new to gsap so far and am trying to figure out how to embed an array into my banner animation. I have two timelines and in one of them I quickly change the background pictures (to get something like a gif); here html & js: <img class="fFrame" src="frame_012.jpg" style="z-index: 0;"> <img class="fFrame" src="frame_013.jpg" style="z-index: 0;"> ...... <img class="fFrame" src="frame_50.jpg" style="z-index: 0;"> gsap.registerPlugin(EasePack); function start() { //timeline 1 & his elems var tlbg = gsap.timeline({repeat: 2, repeatDelay: 1.43}), bgFrames = document.getElementsByClassName('fFrame'); //timeline 2 & his elems var tl = gsap.timeline({repeat: 2, repeatDelay: 1.03}), badge1 = document.getElementById('badge1'), badge2 = document.getElementById('badge2'); // start gsap.set(bgFrames, {opacity:0}); gsap.set(bgFrames[0], {opacity:1}); //use tlbg .set(bgFrames[0],{delay: .6, opacity:0}) // 12 frame * 50ms 600 .set(bgFrames[1],{opacity:1}) .set(bgFrames[1],{delay: .05, opacity:0})//950 .set(bgFrames[2],{opacity:1}) /// ...... .set(bgFrames[n],{delay: .05, opacity:0})//1150 .set(bgFrames[n+1],{opacity:1}) .to(bgFrames[n+1], { keyframes: [ { duration: 3.35, scale: 1.15, }, { duration: .1, filter: "blur(8px)" } ] } ); // end anim 1 timeline // 2 timeline tl .set([badge1,badge2], { delay: 1, opacity: 0 } ) /// ..... } start(); How i can use gsap.utils.toArray or maybe something else in order to shorten and improve the code?