friendlygiraffe

Is it possible to group an array with a separate element, and get them to play sequentially? Something like this: tl.staggerFrom([circles[0], circles[1], circles[2], ".s1"], 2.5, {rotationX:90, ease:Power4.easeOut}, 0.5)

Brilliant. Thanks

In IE, this image scaling is jittery Is there a way to force it to animate smoothly? Thanks

I wondered if it's possible to use SplitText to justify a paragraph of text, but increasing the font size of each line to fit the width. Something like this: Thanks

Hi, apart from targeting classes and IDs, I wondered if it possible targeting a HTML element, eg: <video> Something like: TweenMax.to("video", 1, {autoAlpha:0}); Thanks

Figured it out, if anyone's interested. Needed to suppress events: tl.seek("continue", false);

Can anyone explain why the call to pauseTL is triggered when sending the playhead to a label that's placed after it? I want it to ignore the call, and skip straight to the "continue" label You can see it working as desired when commenting out the //tl.seek("continue"); line: var tl = new TimelineMax({repeat:-1, repeatDelay:2}) tl.to("#circle", 1, {x:400}) .call(pauseTL) .add("continue") .to("#circle", 1, {y:100}) function pauseTL(){ console.log("pauseTL"); tl.pause(); } function start() { console.log("continue"); tl.seek("continue"); tl.play(); } Thanks

That's what I thought, just wondered what the protocol was without using nested Timelines

OK thanks, it seems like labels are the way to go, eg: tl.add("circlestart",0); tl.to("#square", 6, {scale:2}) .to("#circle", 1, {x:400}, "circlestart") .to("#circle", 1, {y:30}, "circlestart+=1") .to("#circle", 1, {x:0}, "circlestart+=2") .to("#circle", 1, {y:0}, "circlestart+=3") However, I would like the circles to 'Chain' normally, following each other sequentially without having to add the correct insertion point. Eg, so I would like to achieve something like: tl.add("circlestart",0); tl.to("#square", 6, {scale:2}) .to("#circle", 1, {x:400}, "circlestart") .to("#circle", 1, {y:30}, "circlestart+=1") .to("#circle", 1, {x:0}, "circlestart+=1") .to("#circle", 1, {y:0}, "circlestart+=1")

Hi, What is the simplest method for have a Parallel tween in the same Timeline? I'm trying to have the circles play at the same time as the square, without having to add on "-=6" to the end: tl.to("#square", 6, {scale:2}) .to("#circle", 1, {x:400}) .to("#circle", 1, {y:30}) .to("#circle", 1, {x:0}) .to("#circle", 1, {y:0}) Thanks

Great,thanks!

Thanks for replying, that has set in the right direction, though there seems to be a discrepancy in the x, y: http://codepen.io/friendlygiraffe/pen/pbdZda Possible a padding / CSS issue?

Is it possible to retrieve the coordinates from a SplitText array? This outputs undefined var mySplitText2 = new SplitText("#quote2", {type:"chars"}); console.log(mySplitText2.chars[0].x); Thanks

Hi, For some reason, using .set within a timeline doesn't trigger. (see codepen) However, if I move the .set command to the start of the timeline, it does work: tl.set("#circle1", {autoAlpha:1}) .from("#circle1", 2.5, {scale:0.5, autoAlpha:0, ease:Power4.easeOut}) Any ideas why? Thanks

I've noticed a strange behaviour when using autoAlpha on elements that have a z-index set. Is there any way to stop the fading in from interfering with the z-index? See CodePen http://codepen.io/friendlygiraffe/pen/EyYNbz

Thanks, that's perfect

Thanks, but what if there are a series of different timings, with different properties? Something like: .to(".dot1", 0.3, {x:"+=150"},"-=2") .to(".dot2", 0.3, {y:"+=150"},"+=0.2") .to(".dot3", 0.3, {rotation:"+=150"},"+=0.7") .to(".dot4", 0.3, {alpha:0},"+=6.2")

I have a sequence of Tweens in a timeline that are staggered by 0.2 seconds. I want them to start 2 seconds early (before the white box fades out) How do I get dot2 to follow dot1 sequentially? Thanks

Is there an effective way of putting a reverseDelay on this? http://codepen.io/friendlygiraffe/pen/jqjxBw

I wish I had more specs! Agreed, but this helps a lot, thanks!

ok the the 'zipped' size is what I should be looking at? In that case it's only 27k for TweenLite.min & CSSPlugin.min - Which is usable Unfortunately CDN is absolutely out the equation, CSS transitions are clunky to change. Unless there is a greensock tool for CSS transitions?

Thanks, yes I normally use CDN links, but the specs I am working on do not allow that. TweenLite.min.js is about 27k CSSPlugin.min.js is about 40k Would I need to include both of these files to do something as simple as an alpha/opacity fade Tween?

Hi, as a heavy TweenNano user in Flash, I was wondering what the smallest equivalent is for packaging GSAP would be? Assuming I would just want to do something as simple as: TweenLite.to("#test" , 4, {alpha:1}); Would I need both TweenLite.min.js and CSSPlugin.min.js for that? Or is there a smaller solution? Thanks http://codepen.io/friendlygiraffe/pen/vGPbRV

Hi, I'm trying to sync a Timeline with a video, but the only reliable solution seems to be ontimeupdate, which only fires every half second or so Is there decent solution to this? Thanks

That's the fix I was looking for. Thanks very much Diaco