Jump to content
Search Community

Repeat without reset?

Mat-Moo 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

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

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

 

See the Pen a02888619a4879c4e44ec53d58afb105?editors=001 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

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)

Link to comment
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?

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

 

See the Pen c6e716e029b77aa32b4771999dbe3ce9?editors=001 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
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.

 

See the Pen 9f89e2986656748b11dab1a5d1f54564?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
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
Link to comment
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!

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

 

See the Pen 423cc82d16d8bfd8ef186c9f87ee7f38?editors=001 by osublake (@osublake) on CodePen

 

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.

 

See the Pen pgjmPP by osublake (@osublake) on CodePen

 

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