Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
walltea

Random fade in with random SteppedEase offset

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there,

 

I'm running in to some problems when trying to combine some animations in to a timeline, so maybe you can help.

 

I have 5 divs with the class of 'smoke' that I want to make in to sprites using SteppedEase: 

var _tl = new TimelineMax({paused: true});

_tl.add('start');

$('.smoke').each(function(){
	var frameWidth = 22, numCols = 16 * 6;
	var steppedEase = new SteppedEase(numCols);
	_tl.add(TweenMax.to($(this), 2, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat: -1}), 'start');
});

_tl.play();

This works great for getting the five divs to animate.

 

Now, what I would really like to do is have them all start at different background offsets, so the animations do not look similar. I have tried to do things such as "time: startFrame" (where startFrame is a randomized number), in the TweenMax.to, but this does nothing. Is there a different attribute I can set to achieve this?

 

I have only been able to achieve the randomization by doing the following:

$('.smoke').each(function(){
	var frameWidth = 22, numCols = 16 * 6;
	var steppedEase = new SteppedEase(numCols);
	var startFrame = random(0, 2, 0.1);
	var tween = TweenMax.to($(this), 2, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat: -1});
	tween.time(startFrame);
});

This works wonderfully well at starting all the animations from different, random points. However, I have been unable to add this to my timeline at all. _tl.add(tween) only animates the first of the tweens. Again if there is a way to add a random start time to _tl.add(TweenMax.to(...)), that will probably fix the problem.

 

Lastly, I would LOVE to be able to randomly fade in these divs on initial page load, staggered, but I have no idea how to combine all these requirements in to the tween I need.

 

Sorry for the verbose list of needs. I'm relatively new to TweenMax and have been struggling to get this working all day.

 

Thanks in advance.

Link to comment
Share on other sites

So, I found a solution. It's a bit crude, but for future people wondering similar, this is what I ended up doing:

var smoke = {
	tweens: [],
	animate: function() {
		var _tl = new TimelineMax({paused: true, stagger: 0.5}),
			frameWidth = 22,
			numCols = 16 * 6;

		$('.smoke').each(function(){
			var steppedEase = new SteppedEase(numCols),
				startFrame = random(0, 2, 0.1),
				delay = random(0, 4, 0.1);

			_tl.add(TweenMax.staggerFrom($(this), 1, {css:{opacity: 0}}), delay);

			var tween = TweenMax.to($(this), 4, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat: -1});
			tween.time(startFrame);
			smoke.tweens.push(tween);
		})
		_tl.play();
	}
}

I store all the TweenMax to an array so I can loop through them and pause/play them later.

Link to comment
Share on other sites

Hey could you provide a codepen? I'd like to see how this turned out.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×