Jump to content
Search Community

How to dynamically set X, Y in timeline?

Exhumator test
Moderator Tag

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

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

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

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

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

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.
×
×
  • Create New...