Two Functions, Reusing SVG element

[celli]

Hi, I have two separate timeline-functions that I am running in a master timeline. I get the first one to run, but the second one doesn't seem to run correctly. I simply want to be able to re-use my SVG and animate it in a different way in my second timeline. For this example I made the second timeline called "tlGlassesSmall" scale:.5 and the backgroundColor: "red" so I can visually see the difference, as the master timeline runs... but I can't seem to get them both to run correctly.

 

If I comment out either one of my timelines, on my master timeline, each of these timelines runs perfectly. When I run them both on the masterTimeline, it seems to skip the first timeline when it first starts, and then not show the second timeline again as it repeats.

 

It looks like it has something to do with the way I am clearingProps. I want to clearProps, so that the second time it runs from the same starting positions, and if it loops, the first timeline will not have properties inline on my elements from the second timeline that it ran--I must be doing something wrong!

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

[PointC]

Hi celli ,

 

I was looking at your pen and something was odd. You already know that you have those pesky 'from' tweens because you're trying to clear the props which is good.

 

I stared at your pen for bit and could not figure out why the .set() for clearProps wasn't working so I forked your pen and deleted everything down to two simple boxes. On the first timeline function, the blue box moves, red on the second. Super simple - easy to test. I set the background to change color on each animation so there was no question about what I was seeing. When the blue box moves, the background should be yellow and when the red box moves the background should be black, but my .sets would not work either.

 

I don't have a complete answer for you, but here's what I've noticed. The first set() is ignored on the first pass through the master timeline. It immediately grabs the set() from the second timeline and uses that so I see both boxes moving on black to start and then everything starts working correctly after that. 

 

However, if you give the .set a specific time other than 0, it works on the first pass (and all subsequent passes).

.set(".container",{backgroundColor:"yellow"},.001)

Take a look at my pen: 

See the Pen BjamgB by PointC (@PointC) on CodePen

 

If you un-comment the two .sets() without a specific time, you see the same odd behavior that your pen is exhibiting.

 

I don't know if this is the intended behavior with placing sets() into timeline functions? I'm sure Jack, Carl or the mods can answer that. Maybe we're supposed to use sets() only on the master timeline or an onComplete function, or give it a specific time label?

 

In your pen, it looks like it completely ignores your entire first timeline on play 1 and jumps immediately to the second one where you set the background to red.

 

In any case, I think you'll need to give those .sets() in your pen a specific time to clear the props. 

 

Hopefully, the big guns can give us an answer on this one.

 

I hope this helps a bit.

[celli]

Thanks PointC ! I tested it and added the .001 like you suggest, but I got even stranger behavior. I also tried putting the clearProps .set in it's own TweenLite outside of the main timelines, and that didn't seem to work either... There's gotta be a way to still use .from and get it to work ! It's something I'd like to be able to do a lot, reusing SVGs, but animating them a little differently by creating multiple timelines of the same objects.

[PointC]

I have a pretty good understanding of them, but  .from tweens just bug me.   I'm always using .set() and .to() tweens.

 

Though, I think if you can get the .set() clearProps working correctly, you should be alright.

 

I assume you've seen Carl's video?

 

I wish I could be more help, but I'm sure the big guns will be along shortly to set us straight.

[celli]

I forgot about immediateRender ! Trying that now

[celli]

hummm, immediateRender still not working. I'll study the video again, and wait for the big guns. Thanks PointC !

[Diaco]

Hi celli 

 

pls check this out : 

See the Pen wMvyYX by MAW (@MAW) on CodePen

[celli]

okay, we got it! Diaco's codePen helped me realize that we needed immediateRender on my .set tweens as well as all of my .from tweens in the second timeline. I also see that Diaco tweened using [cycle] and some .fromTo tweens, which gave me some other ideas. I fixed my codePen and it now works!

 

Summary:

You can use .from tweens when reusing elements, but make sure to put immediateRender on your .set and .from tweens at every instance, in-case anyone else needs help with something similar.

 

thanks PointC and Diaco!!

[celli]

I am just noticing something now.

In Chrome it plays perfectly, but in Safari and iOS I see that the second timeline actually has some strange behavior--it looks like the cups don't ever come together to meet in the middle, but all of the other tweens are working! it's as if it is not respecting the xPosition tweens--very strange... maybe someone can see a reason why...

[Diaco]

hmm , i can't test on real ios / mac right now , but i've just tested with window safari (5.1.7) and test on mac (safari 6.2) and ios ( safari 7) via http://crossbrowsertesting.com and seems works correctly as expected .

[celli]

I did some more testing, and I broke out my .set tweens. into another timeline (just for testing to isolate them) It does appear that it actually only worked properly in Chrome Browser. But I was able to identify the problem, or at least a solution, without changing the .from tweens. This updated codePen is performing the way it should:

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

but I had to add "x:0, rotation:0, scale:1" to reset the values in my "tlbetween" timeline... otherwise it was not respecting those properties with the clearProps: "all" ... but of course maybe I was missing something again! --I just could not get the clearProps to clear those properties, and then begin a .from tween from a different xPosition, rotation, or scale properly outside of in Chrome.