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?