gsap.utils.toArray can't embed in animation

[wildbee]

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?

[ZachSaucier]

Hey wildbee and welcome to the GreenSock forums.

 

4 hours ago, wildbee said:

How i can use gsap.utils.toArray or maybe something else in order to shorten and improve the code?

I wrote an article about how to animate efficiently which includes tips about using arrays and loops to be more efficient. 

[wildbee]

45 minutes ago, ZachSaucier said:

Hey wildbee and welcome to the GreenSock forums.

 

I wrote an article about how to animate efficiently which includes tips about using arrays and loops to be more efficient. 

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

[ZachSaucier]

Regardless of the difference between the demo in the article that I linked to and what you need, the article shows to create the loop which is the part that you're asking about. Naturally you'll need to change the code to your needs  

 

7 minutes ago, wildbee said:

as in the example

What example did you provide? I am not seeing any minimal demo... Perhaps if you made one we could be of more tangible help.

[GreenSock]

@wildbee we'd love to help - once we see a minimal demo CodePen or something, I'm sure we can offer some solid advice. You can definitely use a loop to add a bunch of element animations to the same timeline. And as for stagger not working for you, I'm curious about that and I'm eager to see a minimal demo in order to troubleshoot. 

[wildbee]

5 hours ago, ZachSaucier said:

What example did you provide? I am not seeing any minimal demo... Perhaps if you made one we could be of more tangible help.

ohh, sorry,  this small pen - 

See the Pen BaLmoNw by Nikolasgrizli (@Nikolasgrizli) on CodePen

[wildbee]

On 12/24/2020 at 9:03 PM, GreenSock said:

@wildbee we'd love to help - once we see a minimal demo CodePen or something, I'm sure we can offer some solid advice. You can definitely use a loop to add a bunch of element animations to the same timeline. And as for stagger not working for you, I'm curious about that and I'm eager to see a minimal demo in order to troubleshoot. 

Thank you, Jack! I added codepen

[GreenSock]

It was a bit difficult to discern what you're talking about based on your demo because I didn't see any "stagger" that wasn't working, plus there were syntax errors in the code and extra elements referenced that didn't exist on the DOM, etc. But from what I can tell, I assume you meant to do something like this?: 

See the Pen 00b443522a0299d2712786915bb4c2cd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

There are actually many ways to accomplish this. I'm only showing one. 

 

But if your goal is to toggle a bunch of similarly-sized images on/off in quick succession so that it's almost like an animated gif, you might find that a much cleaner approach is to put them all into one spritesheet and then simply animate the x or y position within a cropped container (with overflow: hidden) using a stepped ease. That's a common approach that works well and is probably more memory-efficient. 

 

If you're still having trouble with "stagger" and you think something might be broken in GSAP, I'd love to see a minimal demo. 

[wildbee]

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