franklylate

Multiple elements tweened using random number function

Recommended Posts

Hi all, I've been using a lot of the forum for reference lately but finally found an issue I couldn't find asked previously:

 

I'm created an animation similar to the Matrix "falling code" effect but ran into some difficulty creating a loop and ended up just copy and pasting the tween and updating the nth-child(#) 30 times. I created a function set to return a randomized number and am using that function to randomize the animation lengths. 

 

The code snippet sets all the y tweens to the same animation length since the function only triggers once:

 

	introaniTL
		.from("div.tilecontainer img", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18), ease: SteppedEase.config(18)
		}, "tg")
		.from("h1", .5, {
			autoAlpha: 0, y: '-20'
		},0, "tg");

 

While I'm fairly certain I'm using the .add function wrong in this snippet:

 

for (i = 1; i < 32; i++) {
  introaniTL.add.from("div.tilecontainer img:nth-child("+i+")", randomPoint5to2(), {
    y: '-787.5', ease: SteppedEase.config(18), ease: SteppedEase.config(18)
  }, "tg");
}

 

Does anyone have insight? Working (and brute force method) animation below.

 

Thanks!

 

	//
	// add individual tweens here as necessary
	//

	var introaniTL = new TimelineMax();
	introaniTL
		.from("div.tilecontainer img:nth-child(1)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18),
		}, "tg")
		.from("div.tilecontainer img:nth-child(2)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(3)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(4)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(5)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(6)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(7)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(8)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(9)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(10)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(11)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(12)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(13)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(14)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(15)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(16)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(17)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(18)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(19)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(20)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(21)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(22)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(23)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(24)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(25)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(26)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(27)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(28)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(29)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(30)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("div.tilecontainer img:nth-child(31)", randomPoint5to2(), {
			y: '-787.5', ease: SteppedEase.config(18)
		}, "tg")
		.from("h1", .5, {
			autoAlpha: 0, y: '-20'
		},0, "tg");

	var introaniScene = new ScrollMagic.Scene({
		triggerElement: ".introanimate",
		triggerHook: animateall_OffsetHook,
		offset: -400,
		reverse: animateall_Reverse,
		delay: animateall_Delay
	})

	introaniScene.setTween(introaniTL);
	introaniScene.addTo(controller);
	// introaniScene.addIndicators(); // This is for debug indicators
	
	function randomPoint5to2() {
		// return Math.floor(Math.random()*(max-min+1)+min) -- returns whole numbers
		return Math.random()*(4)+1
	}

 

Thanks all!

Share this post


Link to post
Share on other sites

hi @franklylate, and Welcome to the GreenSock Forum!

 

You really don't need the add() method for what your doing. The add() method is best used when adding child tweens or timelines to a master timeline.

 

In a loop would look like this

 

// tweens in a for loop
var count = 32;
for (var i = 0; i < count; i++) {
	introaniTL.from("div.tilecontainer img:nth-child("+i+")", randomPoint5to2(), {
		y: '-787.5', ease: SteppedEase.config(18),
	}, "tg");
}

 

Please take a look at this CSSTricks article by the Mighty @Carl on Writing Smarter Animation Code and using the add() method:

 

https://css-tricks.com/writing-smarter-animation-code/

 

Also since your using from() tweens, you will find this tut helpful when using any from tween like from(), fromTo(), staggerFrom(), or staggerFromTo() :

 

 

Happy Tweening! :)

 

  • Like 5

Share this post


Link to post
Share on other sites

Had a typo and stripped out brand content.

 

Thanks a million, @Jonathan

 

 

Share this post


Link to post
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.