Toggle between different states with transitions

[jnhltmn]

Dear Greensockers,

 

What would be the best approach when you want to toggle (non-linear) between different states with transitions in between.

Let's say you want a big rotating yellow box OR you want a normal blue box OR you want a bouncing yellow box but you DON'T want a Big Blue Bouncing Box.

 

Hope you'll understand my point and it's easier than I think!

 

Thanks in advance!

Jan

See the Pen mdPmqYE by jnhltmn (@jnhltmn) on CodePen

[Richard1604]

That’s an interesting question.

i found this article

 

[ZachSaucier]

Hey Jan. It depends on how you want them to transition between those states. You have to decide: should it go to a "normal"/default state and then to the new state? or do you want to transition directly to the chosen state? That determines how you should set up the transition.

[ZachSaucier]

23 minutes ago, Richard1604 said:

i found this article

Sorry, I don't understand how that's related.

[Richard1604]

my interpretation of the issue is that a parameterised tween would solve the problem.

The above article about object names includes parameterisation of the tween values as well.

In addition gsap.utils might be helpful along with the vars object and data.

 

Just a thought.

[jnhltmn]

1 hour ago, ZachSaucier said:

Hey Jan. It depends on how you want them to transition between those states. You have to decide: should it go to a "normal"/default state and then to the new state? or do you want to transition directly to the chosen state? That determines how you should set up the transition.

 

Thanks for your reply ZachSaucier! I prefer to animate from one state to the other. To be a bit more precise I attached a simple visual of the concept I have in mind. In short: every transition depends on the current and the next state.

 

Let's say you'll start at state 1 and you'll click on 'state 2':

1. the 2 blue dots will move to the right
2. the purple dot goes to the middle
3. and the pink dot appears.

When you're at state 2 and you'll click on 'state 3':

1. the first blue dot goes to the left
2. the pink dot disappears
3. the orange dot appears

When you're at state 1 and you'll click on 'state 3':

1. the first blue dot goes to the left
2. the second blue dot goes to the right
3. the purple dot goes to the middle
4. the orange dot appears

I hope I made myself clear with this explanation.

 

[ZachSaucier]

That sounds like a use case for keeping a data object of states. Something like:

const data = {
  state1: {
    blue1: {
      elem: document.querySelector('blue1'),
      x: 50,
      y: 100
    },
    blue2: {
      elem: document.querySelector('blue2'),
      x: 50,
      y: 100
    },
	// for each circle
  },
  state2: {
    // for each state
  }
};

Then animating between them is simple: if a state button is clicked, loop through each object in that state and animate the given element to the given position  

[Richard1604]

Hi again,

If you take a look at the post I referenced there is a codepen by osublake where the animations are parameter used. If you take the Json type format suggested by zach to parameterise your state changes you can code it all up as x, y and opacity changes. Another option would be to use a path instead of x, y variables which might reduce the number of animations.

[Richard1604]

here's a simple example using an svg and an array to define the animations

 

<svg id="circles" xmlns="http://www.w3.org/2000/svg"  viewBox="0 -0 250 250"  width="100%" height="100%"  >
 <circle id="circle1" cx=10 cy=10 r=5 fill="red" /> 
 <circle id="circle2" cx=20 cy=20 r=5 fill="orange"/>
 <circle id="circle3" cx=30 cy=30 r=5 fill="yellow"/> 

</svg>

 

var tweens = [ 
["#circle1", {duration: 1, x: 20, y: 20}, {duration: 1, x: 30, y: 30, delay: 1 }, {duration: 1, x: 0, y: 0, delay: 2 }],
["#circle2", {duration: 1, x: 30, y: 30}, {duration: 1, x: 40, delay: 1 }, {duration: 1, x: 0, y: 0, delay: 2 }],
["#circle3", {duration: 1, x: 40, y: 40}, {duration: 1, opacity: 0, delay: 1 }, {duration: 1, opacity: 1, x: 0, y: 0, delay: 2 }]

]; 

var i=0; j=0;
for (i=1; i < 4; i++) { 
for (j=0; j < 3; j++) {

//console.log(tweens[j][0], tweens[j]);
gsap.to(tweens[j][0], tweens[j]);

}}

 

the animations are better on a timeline with default values but i think you can the general idea.

 

FYI here's a  

See the Pen NWNdpVW by rb1604 (@rb1604) on CodePen

[jnhltmn]

Okay, I like where this is going Zach and Richard!

 

Although, I wonder (for instance) to what state 'the pink dot disappears' belong? In other words; where do I need to trigger the 'out'-transition? In some cases the properties of some some object doesn't change.

 

When you look at my concept-images; when you're at state 3 and switch to state 2: The second blue dot will stay at it's position. Should I animate this blue dot to this exact same position because it's part of 'state2? And what to do with the orange dot switching between state1 and state2?

 

Thanks for helping me out here!

[Richard1604]

i think the above suggestion provides a general framework for moving dots around and disappearing in quantum jumps.

If you want to make a dot appear or disappear then you can include opacity and change from 0->1 or vice versa.

if a dot doesn't change position and has no other property changes then you might code an empty array entry and omit to make an animation for that object in the current state change. That is quite straight forward to implement in javascript.

In a wider context, I am thinking that it is not too difficult to create a meta-programming framework that allows for timelines to be created using  data stored in an array similar to my suggestion with the addition of verbose and debugging options and also the possibility of specifying the method to be used for the animation.

I hope these thoughts will fire your imagination and inspire you. 

 

 

[ZachSaucier]

9 hours ago, jnhltmn said:

The second blue dot will stay at it's position. Should I animate this blue dot to this exact same position because it's part of 'state2?

I would, yes. Just include the values that you want it to be. That way you have complete flexibility in transitioning between states.

 

9 hours ago, jnhltmn said:

what to do with the orange dot switching between state1 and state2?

Include scale and/or opacity values.