How can I run image frames without animations?

[Michael Heuberger]

I am trying to run a short movie of background images without any animations between these. The code below does not work. Any ideas why?

 

var frameHeight = 585

 

var timeline = new TimelineMax({useFrames: true}),

i

 

for (i = 0; i < 9; i++) {

timeline.append(TweenMax.to(

'#spark h1 a',

1,

{

backgroundPosition: 'center -' + (frameHeight * i) + 'px',

useFrames: true,

frame: i

}

))

}

 

this.addScene(new ScrollScene({

triggerHook: .5,

triggerElement: this.getID(),

duration: 400

})

.setTween(timeline)

)

 

Thanks!

[Rodrigo]

Hi Michael,

 

Mhh is hard to tell, I've never use frames unless is totally necessary (haven't met a scenario that made it necessary yet ).

 

What you could do is use some set instances and add those to the timeline in an absolute position using the i value in the loop, something like this:

var timeline = new TimelineMax({useFrames: true});
 
for (i = 0; i < 9; i++)
{
timeline
  .set('#spark h1 a', {backgroundPosition: 'center -' + (frameHeight * i) + 'px'}, i);
}

Like that the first image will be added to the frame 0 of the timeline, the second image to frame 1 and so on.

 

It would be very helpful if you could set up a simple codepen in order to get a better look at what could be the issue.

 

Rodrigo.

[Michael Heuberger]

wow, this worked perfectly rodrigo! many thanks

[Michael Heuberger]

ummm, any idea how i can run the animation automatically with short delays inbetween?

[Rodrigo]

That will depend of between what. If you want separation between each frame, all you have to do is multiply the instance's position in the timeline by a fix amount. For example if you multiply by 2, the first image will be at 0 frames, the next at 2 frames, then 4, 6, 8, etc., if you multiply by 3 it will be 0-3-6-9, etc.

var timeline = new TimelineMax({useFrames: true}),
    delay = 3;
 
for (i = 0; i < 9; i++)
{
timeline
  .set('#spark h1 a', {backgroundPosition: 'center -' + (frameHeight * i) + 'px'}, i*delay);
}

If you want to add some delay between repeats of the timeline, simply add the repeatDelay property in the timeline's configuration object. You'll also need to add a number of replays as well:

//in this case the repeat delay is considering frames, not seconds
var timeline = new TimelineMax({useFrames: true, repeat:3, repeatDelay:10});
 
for (i = 0; i < 9; i++)
{
timeline
  .set('#spark h1 a', {backgroundPosition: 'center -' + (frameHeight * i) + 'px'}, i);
}

Rodrigo.

[Carl]

Rodrigo's advice to put a bunch of set's in a timeline is certainly powerful and flexible.

 

If you have a single strip of images (not a grid), a tween with SteppedEase can do the trick:

http://codepen.io/GreenSock/pen/vLFmd

 

And although the demo doesn't show it, you could of course add that tween to Timeline or make it TweenMax tween to accommodate repeat and repeatDelay.

 

SteppedEase Docs