Jump to content
GreenSock

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

How to dynamically set X, Y in timeline?

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

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

Link to comment
Share on other sites

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 :D).

 

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 ?

Link to comment
Share on other sites

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

 

@PointC beat me to it! ?

 

And @Exhumator ... your English is great!

  • Haha 3
Link to comment
Share on other sites

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.  

  • Like 2
  • Haha 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

This should work for you:

 

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

 

Happy tweening.

:)

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thank you very much, it works like a charm :)

Link to comment
Share on other sites

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")?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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)? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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"; });

 

Link to comment
Share on other sites

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. ;)

  • Like 1
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.
×