Jump to content
Search Community

Alternating property direction with any array

ElliotGeno 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

There are often times where I'd like to alternate each line of text flying in. Or different objects flying in from different sides.

 

Most of the time I have to get a list of the objects that I want to tween and then alternate the properties each time. Is there anything like that built into TweenMax?

 

If not, it might be a pretty easy thing to add... I do these animations a lot. I wonder if others do to?

See the Pen rVbYrp?editors=001 by pyrografix (@pyrografix) on CodePen

  • Like 1
Link to comment
Share on other sites

No, sorry, there isn't anything like that there now, and I like the concept but I'd have to contemplate whether it's worth the performance and kb penalty. It also means that you could no longer rely on the vars property (like myTween.vars.x) to predict where it's going. It's not insurmountable, of course - it just costs kb and performance. More conditional logic, more potential "gotchas" with plugins, etc.

 

I'd love to hear what everybody else thinks about the concept.  

  • Like 1
Link to comment
Share on other sites

I think having an alternate would be nice.. but what if you had multiple alternates? .. would you have to pass them in as an Array?

 

In my humble opinion i don't have an issue in just creating a extra one or two lines of conditional logical code for random or alternate values. Especially when you have no need to pass a random or alternate value to GSAP. Certainly if that sort of thing would increase the kb and be a penalty on performance in GSAP, i would rather write the little logic myself.

 

It's a great idea , but my personal preference would be to opt for no kb or performance penalty.

Link to comment
Share on other sites

I went ahead and modified TweenMax.staggerTo to allow for this for you guys to play around with:

 

Modified StaggerTo

Modified Source

 

The new call is very simple:

TweenMax.staggerTo(".bob",.5,{x:"+=200",opacity:0,alternate:{x:"-=200"}},.1);

It's a very small line of code that I added to staggerTo():

copy[p]=vars.alternate?copy[p]=vars.alternate[p]?i%2==0?copy[p]:vars.alternate[p]:copy[p]:copy[p];

One outstanding thing, I would love to add this to TweenMax.to() as well but couldn't figure that one out. Also wasn't sure if there was a better way at ignoring custom properties.

  • Like 1
Link to comment
Share on other sites

Taking off my GreenSock hat and forgetting about performance implications or other API conflicts / hangups... I think its very cool and the examples show that the implementation is pretty straightforward. I think this could have a lot of cool uses especially for SplitText character animations.

 

Can we do the same thing with an loop or jQuery odd() / even(), sure. But this certainly makes experimentation easier and more fun. 

 

At this point it gets my vote for strong consideration.

 

One thing I'm thinking of is staggerFromTo(), I guess the from vars with have to have an alternate property as well. 

 

Great work, Elliot!

  • Like 1
Link to comment
Share on other sites

Elliot, after looking at your 3 above examples and usage .. it looks very interesting. Especially to see how it would work with staggerFromTo() like Carl had suggested above, with the SplitTextPlugin.

 

It would be cool to have them in codepen format to play and experiment with. But really Nice Job :)

  • Like 1
Link to comment
Share on other sites

Jack and I have been talking. This idea certainly has merit.

 

Here's the latest, we are pretty cool with moving forward with this if we keep alternate as a property in stagger-based tweens only.

 

 

One could argue that a simple TweenLIte.to() tween with multiple targets could benefit from alternating properties. However, to add this property to TweenLite effects the size of the core and possibly performance across the entire engine. Whereas, just using alternate with staggerTo(), staggerFrom(), staggerFromTo() will have minimal impact on those methods regarding file size and perfromance.

 

If we proceed, we will recommend that if someone wants the effect of a TweenLite.to() with alternating properties, they should just use a staggerTo() without a stagger parameter.

 

The question for the community:

 

Should we move forward with adding the alternate property to only the stagger-based methods?

 

The reason we ask is that we strive hard to have as much consistency across the API as possible and this addition breaks that slightly.

 

Thanks for your input!

  • Like 2
Link to comment
Share on other sites

Ok guys... I have a newer update. THIS one is about three times more bad ass...

TweenMax Alternate Pattern

 

This works much the same way as before except now the property gets an array of positions.

 

 

So if you just wanted to alternate between red and green it would look like this:

TweenMax.staggerTo(".bob",.5,{alternate:{backgroundColor:["red","green"]}},.1);

You can also add any number of alternate values to this list. SO you could do something like this and have 6 color variations...

TweenMax.staggerTo(".bob",.5,{alternate:{backgroundColor:["red","yellow","green","cyan","blue","violet"]}},.1);

If there are more items than there are in the alternate array, it loops back to the beginning of the array. So if you had 5 items, and three colors it would look like this: red, green, blue, red, green

 

 

OH... and I almost forgot to tell you... it plays well with variables duplicated outside of the alternate array.

 

So for example:

TweenMax.staggerTo(".bob",.5,{alternate:{backgroundColor:["red","green","blue"]}},.1);

is the same as:

TweenMax.staggerTo(".bob",.5,{backgroundColor:"red", alternate:{backgroundColor:["green","blue"]}},.1);

It basically just adds "red" to the alternate array.

 

 

What is neat about this, is that you can basically get a rudimentary particle effect or at the very least more organic looking animation.

Link to comment
Share on other sites

Okay, I updated the preview/beta of TweenMax (uncompressed) to include this and I went even one step further ;)

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

You can pass either an array or a function as the alternate. If you pass a function, it'll call that function and pass the index number as a parameter, so you can get some really neat effects like randomization or whatever the heck you want. "this" inside the function refers to the target element itself. For example:

var colors = ["red", "blue", "green", "purple", "gray", "yellow", "orange"];

TweenMax.staggerFrom(".test", 1, {alternate:{y:[100,-100], backgroundColor: function(i) {
    //return a random color from the array
    return colors[ Math.floor(Math.random() * colors.length) ];
}}, ease:Power2.easeInOut}, 0.3);

Or you could run your own logic inside that function based on the index number and spit back whatever the heck you want. Like if the index is less than 10, return one value, otherwise a different value - that would animate the first 10 things one way, and the rest another. Tons of options with minimal code.

 

Thoughts? 

 

The only hesitation I have is that "alternate" doesn't necessarily describe that new behavior. Can you think of anything better? I really want to keep it lean and mean - I'm not looking to create multiple new special properties if there's any way I can avoid it. 

 

Also note that the timeline stagger methods also got this update in the preview. I'd love it if you guys could kick the tires a bit and give me your feedback.

 

  • Like 3
Link to comment
Share on other sites

I love this !! We were trying a text zipper effect in the past without this here

See the Pen CgBsK by celli (@celli) on CodePen

it's different, and only using odd and even characters for split-text--but this alternate-property seems so much more powerful! and you can achieve much more variation for effects. Is this going to be a part of TweenMax ?

  • Like 2
Link to comment
Share on other sites

I love the whole passing a function and the index of each stagger. Love it Jack, a lot of crazy variations that you could do, besides just alternating.

what about these names:

  • variant
  • alt
  • randomize

just throwing some names out there.. but I'm digging the goodness this will add to stagger tweens :)

Link to comment
Share on other sites

Blake, were you suggesting "staggerBy" would replace "alternate"? Like:

TweenMax.staggerTo(".test", 1, { staggerBy:{y:[50,-50], backgroundColor:function() {...}}});

?

 

Or were you suggesting an entirely new method? If that's the case, it'd be clunky with the from and fromTo stuff. See what I mean?

 

At this point, I must say I'm still leaning toward "alternate" or "alt". 

Link to comment
Share on other sites

When i think of alternate .. it could imply alternate  back and forth.. or IMHO mean alternate  between a group of values in the array.

 

But with alt ..to those who never knew alternate  was the original implied name .. could think alt means alternative. Like the alt attribute for the img tag, which is  alternative  text for the image tag. But in this case would be an alternative stagger value.

 

But its a tomāto, versus tomăto (tomatoe) kind of thing.. on how a user might interpret it.. but the GSAP Docs do a great job of explaining that sort of thing.

 

Plus its short, and that just means less typing.. which means less carpal tunnel :)

  • Like 2
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...