Mat-Moo

Repeat without reset?

Recommended Posts

Can I get this to do a full 360 instead of resetting on each repeat? I thought that was the purpose of +=?

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

Thanks for posting the demo but are you sure that is the right one? not sure what you mean by 360? That makes me think of rotation. 

 

If that is the right demo, please explain exactly how you want the square to animate as it moves left to right. 

 

I just need better help understanding. Thanks

Share this post


Link to post
Share on other sites

ah, that's better! ;)

 

The "+=90" only gets evaluated when the tween is first created and run.

 

Basically that tween records a start value of 0 and an end value of "0 + 90".

Every time a tween repeats it goes back to the start value of 0.

 

If you want to rotate in 90 degree increments with a pause in between you could a few things. One way is:

 

http://codepen.io/GreenSock/pen/BoZRjG?editors=001

  • Like 2

Share this post


Link to post
Share on other sites

using a timeline

 

 

 

var tl = new TimelineMax({repeat:10, repeatDelay:0.5})
  tl.to(box, 0.5, {rotationZ:"+=90"})
    .to(box, 0.5, {rotationZ:"+=90"}, "+=0.5")
    .to(box, 0.5, {rotationZ:"+=90"}, "+=0.5")
    .to(box, 0.5, {rotationZ:"+=90"}, "+=0.5");
 
  • Like 1

Share this post


Link to post
Share on other sites

That's a shame, thanks, building a designer so not quite that easy to implement that :( maybe I'll just use yoyo... hmmm

Share this post


Link to post
Share on other sites

I wish I could find enough time to create some type of e-course or book on creating dynamic animations with GSAP using OOP. This is essentially the same demo I posted earlier in this thread, which was the same thing I posted earlier in PM that somebody sent me. If this were hockey, some might call it a hat trick. If you keep reusing the same component in your designer, this would work great.

 

http://codepen.io/osublake/pen/a02888619a4879c4e44ec53d58afb105?editors=001

  • Like 2

Share this post


Link to post
Share on other sites

i don't know your scenario , but how about something like this : 

you can add/use a var as repeat counter or as continue statement  .

function rotate(el){ 
  TweenLite.to(el,1,{rotation:'+=90',onComplete:rotate,onCompleteParams:[el]}) 
};

rotate('.box');

http://codepen.io/MAW/pen/YyQLWw

  • Like 2

Share this post


Link to post
Share on other sites

OOh hadn't thought about updating on callback.... hmmm, lots to think about on that, thank you ever so much!

Share this post


Link to post
Share on other sites

Hi guys (and girls)

 

I'm just re-evaluating this as I've had to make a lot of changes to my sequencer, and due to the number of options having an oncomplete even to call itself again won't work for my need. based on Carls' comment "Basically that tween records a start value of 0 and an end value of "0 + 90".

Every time a tween repeats it goes back to the start value of 0." is there a way in the "OnRepeat" I can force the css baseline values of that element to be re-evaluated so that the next repeat continues from where is stopped?

 

Thanks again, maybe I just can't do this, would be a shame (The timeline has multiple elements on it, all doing different things at different times)

Share this post


Link to post
Share on other sites

Ah, missed that one... hmmm.... So in my sequencer you can select from a raft of options, opacity, scale etc, I would need to create getters/setters for all of those then. How comes in the update you can "set" the colour of the background, but can't set the rotation angle for example?

Share this post


Link to post
Share on other sites

You can set the rotation in the update, but because of the way the tween is setting values you still have to have to add it to whatever the start angle is on the repeat, so some 90 degree increment.

 

Creating getter/setters for each property might be a lot of extra work if you're not going to transform those values, so it might be easier to create a separate tween for those properties. Here's another version where I set it up more like a class and have two different animations running. If that doesn't work for you, another option would be to just dynamically create timelines from like an array of values, perhaps using some type of map/reduce operations. 

 

http://codepen.io/osublake/pen/c6e716e029b77aa32b4771999dbe3ce9?editors=001

  • Like 3

Share this post


Link to post
Share on other sites

Not sure how you're setting things up and creating your sequences, but here's a simple example of how you can reduce an array using a timeline as the accumulator. I used the same properties for each sequence, but you can create a list of whatever values you want.

 

http://codepen.io/osublake/pen/9f89e2986656748b11dab1a5d1f54564?editors=001

  • Like 1

Share this post


Link to post
Share on other sites

Thanks, I think I might have to KISS for now and think about advanced things later on. I can see and understand the logic but would require quite a rewrite at this stage to implement what I want, which is a shame :(

Share this post


Link to post
Share on other sites

Well if you can, make a demo that shows how it works. Somebody might be able to find easy solution for you. 

  • Like 2

Share this post


Link to post
Share on other sites

I agree with Blake, a demo would really help. It seems like there have been numerous solutions offered that give the end result of rotation incrementing by 90 degrees on each iteration of an animation. I guess I'm not really understanding why its imperative that this must be a single tween with a repeat property (which wasn't designed to work that way). 

  • Like 3

Share this post


Link to post
Share on other sites

I'm happy to PM a link but a providing a demo of part of my app where there is a sequencer involved is too difficult. I really appreciate all the help suggestions, but I can't see an easy way to make this work. Rotating by 90 is just one bit, there is a wrath of options for things they can do, not just that, so the call back also has to deal with all of those, Really I love the product and will buying the business one next year for this project, but sometimes a project has to start somewhere and mature, not just go straight in for the kill, and at the moment I'm working on getting version 1 done, and this is a small part :) If you would like to see what I've done so far, please feel free to PM and again thank you for the suggestions and ideas!

Share this post


Link to post
Share on other sites

I looked at your project and have a better idea of what's going on, although I didn't see where you were using callbacks.

 

Because you're working with a lot data and collections, creating your animations using operations like the map/reduce I suggested would work well. Here's another demo I made a couple of days ago where I build a timeline dynamically. Just check which animations to run and it will build the timeline. It's pretty close to what you're trying to do.

 

http://codepen.io/osublake/pen/423cc82d16d8bfd8ef186c9f87ee7f38?editors=001

 

I'm not familiar with Vue, but it looks very similar to Angular so you might be able to understand some this. Here's a little tween builder I made a while ago that works similar to some things in your project such as an "enter" animation and a "shake" effect.

 

http://codepen.io/osublake/pen/pgjmPP/

 

For ideas about how to create and structure a timeline builder, check out this project. It was only used to explore ideas for Angular animations, but it's all based on GSAP and even has it's own markup to create timelines directly inside HTML templates.

https://github.com/ThomasBurleson/angularjs-gsTimelines

  • Like 1

Share this post


Link to post
Share on other sites

Callbacks are not in that one, but on effects I wanted the option of pong or repeat from where it is :) Thanks for looking, the angular demo is interesting.

Share this post


Link to post
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.