Jump to content
GreenSock

celli

SVG clearProps or re-set values when repeating

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

I have actually asked this almost same question before in a post http://greensock.com/forums/topic/12472-clearprops-with-svg-elements --it's killing me to ask again, but I think something is a little different this time, and I am stuck trying to figure out the best solution--or maybe I just haven't been able to grasp how to do this exactly right yet.

 

If I run my timeline the first time, it runs perfectly. When I add {repeat:-1} to my timeline, it repeats fine, but then the circles start at different positions, and their scale is not re-set. Which makes perfect sense, because that's where I left them off at the end of the timeLine. So... I tried clearProps, or setting the values back to the original values which they were at in the beginning of my timeLine, but it doesn't seem to re-set my initial positioning and scale of my circles. What is the best way to do this (to reset my elements) so it runs the same as the first time ?

 

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

Link to comment
Share on other sites

Hey celli :)

 

I took a look at your pen and it looks to me like most of the problem on repeat is coming from your relative overlap on line 21. There seems to be a fight for control of scale, cx and cy

.to("#circleThree", .5, {scale:.6, attr:{cx:144, cy:108, ease:Expo.easeOut}},"-=1.4")
.to("#circleTwo", .5, {scale:.6, attr:{cx:461,cy:100, ease:Expo.easeOut}},"-=1.4")
.to("#circleOne", .5, {scale:.6, attr:{cx:300,cy:264, ease:Expo.easeOut}},"-=1.4")
.to("#circleOne, #circleTwo, #circleThree", .35, {scale:.2, autoAlpha:0, attr:{cx:300, cy:180, ease:Expo.easeIn}},"-=.92")
// this overlap of -=.92 is causing an instant fight with the three Tweens above it  - remove it and it all works fine

I know you can't simply remove it and get the look you want, but you may have to adjust this a bit to prevent the fight for control and a proper repeat. 

 

Hopefully that helps a bit.

:)

 

 

 

  • Like 1
Link to comment
Share on other sites

Yep, PointC is right about the overlap, thus it is triggering an overwrite at that spot. That kills the previous tween, so when the whole thing repeats, that tween doesn't exist anymore. A simple solution would be to set overwrite:false on that tween that's doing the overwriting but beware that the way you've got it set up, there are multiple tweens fighting for control of the same property on the same object. It's not necessarily "wrong", but usually that's not desirable which is why we overwrite by default. Again, just add overwrite:false on that tween or you could even set the default overwriting mode for everything by doing TweenLite.defaultOverwrite = false (but again, I'd be very careful about doing that because it's telling the engine not to protect you from overlapping/conflicting tweens). 

  • Like 2
Link to comment
Share on other sites

Thanks guys -- this is very, very helpful. Yes, I felt it was something along those lines, and this explains it a lot better for me. Now it makes so much better sense.

 

I wonder is there a way to actually see when there are multiple Tweens fighting for control of the same property on the same object, like the console to see it, maybe ? But It's then again, it is easy to spot I guess! I think I find it a lot because I try to get that control of the overlap, but I totally see it cannot be of the same object.

Link to comment
Share on other sites

Yes, TweenLite.onOverwrite will tell you when an overwrite occurs

 

 

Here is a very simple example

TweenLite.onOverwrite = function(overwritten, overwriting, target, props) {  
  console.log(overwritten);
  console.log(overwriting);
  console.log(target.innerHTML);
  console.log(props);
}


TweenLite.to(".green", 2, {x:400, y:200});
//after 1 second the next tween will overwrite the x property of the previous tween
TweenLite.to(".green", 1, {x:100, delay:1});

will output this in the console:

 

RDnIwbe.png

 

 

Demo: http://codepen.io/GreenSock/pen/VaGZJz?editors=0010

 

Docs: http://greensock.com/docs/#/HTML5/GSAP/TweenLite/onOverwrite/

  • Like 3
Link to comment
Share on other sites

awesome !

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