How to dynamically set X, Y in timeline?

[Exhumator 7 Likes (Newbie)]

Hello, can't understand why this code doesn't work. It should fade in the red rounded box at random position for 5 times but it set the random position only once, instead. How can i set random position every time before the box fades in? What am I doing wrong?

See the Pen RvXmXa by MannySVK (@MannySVK) on CodePen

[Shaun Gorneau 2,031 Likes (Superhero)]

Hi @Exhumator, there reason for this is that there is only one set(). That function value is only being set() once and then repeated 5 times. You can use the Modifiers Plugin to accomplish this.

 

See the Pen RvXXjY by sgorneau (@sgorneau) on CodePen

 

https://greensock.com/modifiersPlugin

 

Hope this helps!

[Exhumator 7 Likes (Newbie)]

@Shaun Gorneau, thank you very much. It works perfectly. Also thanks for the link to the plugin documentation.

[Shaun Gorneau 2,031 Likes (Superhero)]

Happy to help, @Exhumator!

[Exhumator 7 Likes (Newbie)]

If I may ask once again, @Shaun Gorneau, is there any comfortable way how to control what is being animated in realtime? Let me explain (my english is not very good, so give me a chance ).

 

Imagine we have a timeline that contains following segments:

1. logo animation
2. woman in a black clothes walking through the street animation
3. asteroid falling down to the Earth animation

Now, imagine we have already animated "logo animation" and we are going to the second segment "woman in a black clothes walking through the street animation", but at this moment we don't want to animate that and instead we want to randomly choose what to animate next (2. segment or 3. segment).

 

So, the timeline can look like this: [1] + [2]

or this: [1] + [3]

 

I know, my writing is very confusing, but I am trying to understand how to properly code this kind of logic.

Also, is there any way how to make "group of tween"? Something like "hey, animate the logo now" and then "hey, animate asteroid falling down to the Earth".

 

Thanks for your effort and time. I know, this text is hard to read ?

[PointC 14,210 Likes (Superhero)]

Sounds like a perfect time to create your nested timelines in functions and return them to a master timeline. Here's a great article to help you get started.

 

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

 

 

 

Happy tweening.

 

[Shaun Gorneau 2,031 Likes (Superhero)]

Looks at email notification that just came through .... backspace, backspace, baaaaaaaaaaaaaaaaaackspace.

 

@PointC beat me to it! ?

 

And @Exhumator ... your English is great!

[PointC 14,210 Likes (Superhero)]

11 minutes ago, Shaun Gorneau said:

@PointC beat me to it! ?

 

I figured it was after 5:00 on the East Coast so you were probably heading out for the evening to party it up.  

[Exhumator 7 Likes (Newbie)]

Guys, one more question - is there any way how to dynamically set duration for the tween?

Imagine we have something like:

tl.to("#element", 5, { autoAlpha: 1 });

 

And what I am looking for is:

// getRandomRange(min, max)  is custom function that returns number between min and max value
tl.to("#element", function() { return getRandomInRange(1, 5); }, { autoAlpha: 1 });

 

How to do that?

[PointC 14,210 Likes (Superhero)]

This should work for you:

 

tl.to("#element", getRandomInRange(1, 5), { autoAlpha: 1 });

 

Happy tweening.

 

[Exhumator 7 Likes (Newbie)]

Thank you very much, it works like a charm

[Exhumator 7 Likes (Newbie)]

Can I also randomly define what instructions will play? I mean randomly generated instructions for timeline? Can I do it realtime, too (for example "if condition is met, do this, else do this in the timeline")?

[PointC 14,210 Likes (Superhero)]

You could do that with function-based values.

https://greensock.com/function-based

 

Is that what you meant?

[Exhumator 7 Likes (Newbie)]

Imagine something like this:

 

tl.to("#object", 1 { autoAlpha: 1 });
tl.to("#object", 1 { autoAlpha: 0 });
if (some_condition)
{
	tl.to("#object2", 3 { autoAlpha: 1 });
}
else
{
	tl.to("#object3", 2, { autoAlpha: 1 });
}

 

I mean, I would like to make some decision right in the timeline.

[PointC 14,210 Likes (Superhero)]

Oh, I see, you want to add entire tweens to a timeline if certain conditions are true. Yes - you can certainly do it like your example.

 

See the Pen KENBEJ by PointC (@PointC) on CodePen

 

You could approach that in a variety of ways, but yes - it works correctly as you've written it.

[Exhumator 7 Likes (Newbie)]

Thank you I've got one more question - how to properly code timeline which animates randomly created objects that can be created simultaneously (at the same time or when some are still being animated)? 

[PointC 14,210 Likes (Superhero)]

Sorry, you've lost me now.

 

Are you trying to add tweens to the end of a timeline that is already playing? Can you give us an example? Thanks.

[Exhumator 7 Likes (Newbie)]

Ok, actualy my question is - can i somehow run tween earlier? Something like this:

tl.to("#object", 1, { autoAlpha: 1 }, "-=1");
// but can "-=1" be delivered by function as return value? something like this:
tl.to("#object", 1, { autoAlpha: 1 }, function() { return "-=1"; });

 

[PointC 14,210 Likes (Superhero)]

Yes — you can use a function to feed into the position parameter if you like.

 

For a lot of these 'will this work' questions you could probably set up a demo and see if it works as you expect.