Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tahir Ahmed

does delay work with cycle?

Recommended Posts

Hi,

 

I was wondering if cycle could handle properties like delay or the overshoot value of a Back ease for example. Or to put it the other way, what are the properties cycle can animate?

Link to comment
Share on other sites

It can do any numerical property or plugin value. However, there are some GSAP specific ones that might not work, like delay, because the stagger is the delay.

 

Here's some back easing...

See the Pen 7c6730cf82015ca43f217a5283a8d6b1 by osublake (@osublake) on CodePen

 

And here's some real creative easing...

See the Pen MaYqBY by pyrografix (@pyrografix) on CodePen

  • Like 1
Link to comment
Share on other sites

I see. Thanks @OSUblake.

 

Right after posting the question, I did find out that the overshoot for Back and amplitude and period for Elastic eases are animatable via cycle property. My intention was to use them in a function utilising their index parameter.

 

As for the "GSAP specific ones that might not work", I would actually like to know which ones, out of curiosity. True, that although stagger parameter is for adding delay, but the delay that gets added is very linear / incremental i.e. it starts off from 0 all the way to the length of the objects provided.

 

I am interested in doing something weird, say randomisation, with delay. Or may be, again, utilising the index and do something fancy with it.

 

I understand that this may be an edge-case scenario and perhaps I am asking for too much bloat and desperately trying to totally get rid of the for loops. I am also sure that @Jack would definitely have thought about that and would have had a really good reason not to include it, performance perhaps.

  • Like 1
Link to comment
Share on other sites

Yeah, I'm not sure which ones so maybe Jack or Carl should answer that one. 

 

I'd say the best way do some really random stuff would be to nest stuff together in a timeline, or use onStart to trigger something, which could cascade triggering other stuff.

  • Like 1
Link to comment
Share on other sites

Any tweenable property (x, y, bacgroundColor, opacity, etc) and special property (delay, ease, callback, etc) can be customized with cycle. 

 

Tahir, check out the video here: http://greensock.com/gsap-1-18-0 I chose the overshoot param as an example specifically to show how weird you can get;)

 

So yes, for delay you can create a function that returns a random value for each tween, and in that case you would probably want to make sure their is no stagger amount. I think you will find it to be insanely flexible, especially in a staggerFromTo() where you can cycle / randomize the start and end values.

 

If you find a property that doesn't work with cycle please let us know.

Link to comment
Share on other sites

Hello again @Carl and @OSUblake, thanks for looking into this.

 

Take a look at this jsFiddle for example and notice the use of delay in there. I expect to have a certain delay in operation. This is an example scenario by the way but I would love to know how to make this work in this case. Code is as below:

var numDIVs = 100, divs = [], div = null, width = 2, height = 40, margin = 10, gutter = 2;
for (var i = 0; i < numDIVs; i += 1) {
    div = document.createElement('div');
    document.body.appendChild(div);
    divs.push(div);
}

TweenMax.staggerTo(divs, 0, {
    position: 'absolute',
    top: margin,
    cycle: {
        left: function(index) { return margin + index * width * gutter; }
    },
    width: width,
    height: height,
    backgroundColor: '#cc0'
}, 0);

TweenMax.staggerTo(divs, 1, {
    cycle: {
        delay: function(index) { // this block doesn't seem to be working
            return index; // or perhaps I am missing something simple
        },
        rotation: function(index) {
            return index * 10;
        }
    }
}, 0);

Let me know.

Link to comment
Share on other sites

Cool effect! 

 

I've tried a lot different variations and still can't get it to work. I just quickly skimmed through the source code and couldn't find anything. All the delays had to deal with repeatDelay only.

Link to comment
Share on other sites

My apologies Tahir,

 

It definitely should work but your demo proves otherwise.

We will definitely jump into this and figure it out.

However, in the meantime, it seems that TimelineMax.staggerTo() is working with the delay: http://jsfiddle.net/sh6khm4a/

  • Like 2
Link to comment
Share on other sites

Oh ok!

 

Hadn't tested with TimelineMax so didn't know it was working with it. Thanks a bunch guys. For now, TimelineMax will do but I will be surely waiting for the TweenMax fix then ;)

 

Thanks again.

 

Tahir.

Link to comment
Share on other sites

Yep, thanks for pointing this out. I've got it patched up for the next release. I honestly hadn't even thought of someone trying to mess with "delay" in a cycle since the timing is generally controlled by the stagger value itself, but this allows you to override that. Cool. Again, it's already resolved for the next release. 

  • Like 3
Link to comment
Share on other sites

@Jack, glad the fix is coming soon. stagger methods have become really powerful with this 1.18.0 update and their power really shines when we have got as much control and access we can have to the individual tween element, to completely get rid of a loop. This delay was just an example of that. I have got a few more ideas bubbling up, will create new threads for them once they settle down a bit :)

 

@OSUblake, nice one :D

  • Like 1
Link to comment
Share on other sites

@Tahir, can't wait to see what you're working on. Yeah, cycle opens up a world of possibilities with very little code. 

 

Tween responsibly ;)

Link to comment
Share on other sites

What a remarkable concurrence of events, I was searching for my JavaScript framework of choice (cycle.js.org) and came here, due to the name "Cycle". I certainly think that GASP is the most robust animation platform and myself as well as others would be most happy to see how it works with Cycle.js.

 

It would be great if some one here might have a look at Cycle.js, maybe put a bit of a demo together or a Cycle.js driver, to bring two innovative and wonderful plafforms together. Cycle.js is the thought leader in the Reactive Programming paradigm arising across the globe, lets get that animated!

Link to comment
Share on other sites

So how does this differ from React? I've been looking for a replacement to Angular for my next project, but haven't decided on what to use.

Link to comment
Share on other sites

Cycle,js was initially created because of React's problems. It goes way beyond only focusing on components and their state. Cycle.js fully reactive not partially reactive like React or Angular or every other framework out there. To accomplish this reactivity it is built apon RxJS, this opens up a whole new way of programming as well, known as Functional Reactive Programming (FRP), a growing trend for those in the know. Cycle.js moving fast, has a vibrant community and will play a leading role at the Reactive 2015 Conference coming up in early November.

 

Here are a couple links that may interest you:

 

http://cycle.js.org

https://twitter.com/reactiveIntent

 

* The reactiveIntent Twitter site has a list of relevant tweets about Cycle.js and FRP.

 

Enjoy!

Link to comment
Share on other sites

Oh, wow. I thought I was in the know, but Reactive programming and RxJS is totally new to me. I'll need to look into this some more. Thanks!

 

Do you have a demo of GSAP working with Cycle.js? I'm not sure I completely understand what an animation side effect would be or how the driver would work. Would you just extend the DOM driver?

Link to comment
Share on other sites

Yeah, what is going on with reactive programing is truly awesome!

 

There are no GASP and Cycle.js demos that I am aware of yet. Likely you would be best to make a GASP driver and it would be added in a Cycle.js apps main(). Once that is done the GASP drivers functions can be called from any other component or driver. So the GASP driver would be an observable along with other drivers like the DOM driver, which uses Virtual-DOM.

 

Feel welcome to visit our gitter channel and ask any question you may have: https://gitter.im/cyclejs/cycle-core

  • Like 1
Link to comment
Share on other sites

@zoomclub, you need to stop GASP-ing and start GSAP-ing ;)

 

I kind-a like Green-Animation-Sock Platform for a name though :)

Link to comment
Share on other sites

Cycle.js drivers are just functions.

 

So making a GSAP driver should be as easy as importing GSAP libraries into the driver, then using GSAP functions together with RxJS operators.

 

GSAP and RxJS would then be composed together into observable pipelines, which are state modifier functions.

 

The custom modifier functions would modify state and this would in turn reactively update/render the Virtual-DOM and subsequently the DOM view.

 

If GSAP functions are pure functions like RxJS operators are then this is a great matchup.

 

P.S. Sorry about the GASP-ing :-)

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