Leaderboard

Hi @PointC, Thanks so much for basically doing it for me. I can't say I expected that! Massive relief though....:o) I'll certainly be taking a look a the recommended thread. Also looking at your pen I see I was quite far away from a decent solution and really approaching the task in the wrong way. Right now I need to work that into a project quickly but I'll be back to ask a couple of questions if I'm not sure how or why you've done something. Hope that's ok... I expect I'll be asking a fair few questions around here as a new job will be requiring me to get to grips with GASP pretty quick as animating UI's seems to be a bit of a thing.... looks like it's going to be interesting though. Many thanks again Regards Mark

Hi @mjwlist Welcome to the forum. If you'll be animating things around a flex container you may want to take a look at this thread: That being said, you can make it work with xPercent. With only three cards I think just reassigning the card position via their index and then animating would be an easy solution. Maybe something like this: I'd also note that you shouldn't mix CSS transitions with GSAP animations as that can result in a fight for control of the element and produce undesirable results. Hopefully that helps. Happy tweening and welcome aboard.

Since staggers expect the first parameter to be an array of targets, you've gotta handle things a bit differently. I whipped together a "staggerArray()" helper function for you (customize as you see fit): var a = [0, 0, 0, 0]; staggerArray(a, [10,20,30,40], {duration:1, stagger:0.5, round:true}); //vars accepts: duration, stagger, round, as well as any typical vars for TimelineMax (like onComplete, onUpdate, repeat, yoyo, etc.) function staggerArray(start, end, vars) { var tl = new TimelineMax(vars), proxy = {}, duration = vars.duration || 0, stagger = vars.stagger || 0, proxyUpdate = function(original, proxy, i) { return function() { original[i] = proxy[i]; }; }, v, i; for (i = 0; i < start.length; i++) { proxy[i] = start[i]; v = {}; v[i] = end[i]; v.onUpdate = proxyUpdate(start, proxy, i); if (vars.round) { v.roundProps = i + ""; } tl.to(proxy, duration, v, stagger * i); } return tl; } Here it is in action: Does that help?

Hi and welcome to the GreenSock forums, Thanks for the demo. Does reversing the animation do what you want?

Hi @jiggles78 I'd recommend focusing on one animation piece at a time and try to recreate it. It's like the old saying: "You eat an elephant one bite at a time." Eventually all those little animations will make a great website. I don't know of any tutorials that will take you through every aspect of the showcase sites, but Petr Tichy has a deconstruction playlist on his YouTube channel. You may find it helpful. https://www.youtube.com/user/ihatetomatoesblog/playlists Hopefully that helps. Happy tweening.

Hi, Aphalina Animator is a visual authoring tool that produces human-readable gsap + svg code. I just launched version 1.2 with some new features: path motion, hand-drawing imitation, clip masks, sprite sheets, sequence animations (similar to GSAP staging). It is paid app but can be used for free for non-commercial projects. Project link is aphalina.com. Any feedback is highly appreciated!

It looks like they're using three.js and that's the displacement map for the transition. You could make it happen with a Pixi displacement filter too. http://pixijs.io/pixi-filters/tools/demo/ http://pixijs.download/dev/docs/PIXI.filters.DisplacementFilter.html You'll want to use a Power of two image (512x512, 256x256, etc.) for the best results. Good luck with your project.

Ha! I've been there a few times late at night when I'm tired and over-caffeinated. Glad to hear that you have it all working now. Happy tweening.

That is amazing! I think it will work, I just have to modify this function a bit because my Timeline already exists, so I don't have to return a new one. I will post the results here, if I have some further questions. Thank you for your help!!

I'm not sure I follow everything correctly. You said you wanted the main links to display the same initial SplitText animation on hover? Since those links have already animated into view on load, how did you want them to have the same animation? Should the letters disappear and animate in again? Most anything is possible. I'm just not sure what should be happening here. Changing color on hover: are you targeting the <li> or the <a>? If you're creating a timeline in an each() loop for those .menuLinks you'll want to target the <a> element. So something like this: tl.to($(this).find("a"), 1, {color:newColor}, 0) I also didn't see any timelines or animations for those main links in your new pen. Maybe you're still working on it? If you can start putting those timelines together with what you want to happen we can most likely point you in the right direction. Happy tweening.

Thanks Craig! Although, I was able to read and watch tutorials about positioning parameters before, it turns out that my animation offsets were a bit off. I'm still getting the hang of it. Thanks again, and GSAP is fantastic.

<script src="./thirdparty/TweenLite.js"></script> <script src="./thirdparty/plugins/MorphSVGPlugin.js"></script> <!--this MUST be loaded after the plugins for GSAP\Tween--> <script src="./thirdparty/require.2.1.4.min.js"></script> Got 'er fixed. Thank you for the response! Sorry, it was Friday at 3:30, I was frustrated, and the idea of breaking out my simple project was lost in "don't punch the screen, don't punch the screen". Basically requirejs needs to be loaded after the es5 stuff. Before, and it doesn't know what to do. Now if you'll excuse me, I have a date with a stackoverflow response.

First of all, welcome to the forums! You've got a bunch of options, so I outlined them all in a forked codepen: Does that help?

Absolutely. That's what the duration() is for. Or totalDuration() if you want to include all the repeats and repeatDelays. var tl = new TimelineMax(); tl.to(...).to(....); //add stuff console.log("duration is: " + tl.duration()); If you want it to stop after 15 seconds, you have a lot of options... tl.addPause(15); or TweenLite.delayedCall(15, function() { tl.pause(); }); or if you want to be fancy and gradually slow it down after 15 seconds (instead of an abrupt stop): TweenLite.delayedCall(15, function() { TweenLite.to(tl, 1, {timeScale:0, onComplete:function() { tl.pause(); }}); }); Does that help?

Actually, startTime() would **NOT** always match the time until the delayedCall gets fired. But don't worry - there's an easy way to accomplish what you're after... Every animation is placed onto a parent timeline (which by default is the root timeline). This ensures that everything is perfectly synchronized across the entire system. startTime() refers to the animation's placement on its parent timeline. So if you create your delayedCall() at the very beginning of the root timeline (like literally the millisecond that time starts running on your web page), then startTime() would indeed match the time until your delayedCall fires, but that's somewhat unlikely. Let's say you've got a button that the user clicks 1.5 seconds after the page loads and then you create a delayedCall(3, ...) - that delayedCall's startTime() would be 4.5. So if your goal is to find out how much time is left before your delayedCall() gets triggered, you'd do: var dc = TweenLite.delayedCall(...); //then later... var timeLeft = dc.startTime() - dc.timeline.time(); Notice that all I'm doing is checking the current placement of the playhead on the parent timeline and comparing it to the start time of the delayedCall which is just a zero-duration tween. The reason we use a zero-duration tween with a delay instead of a tween with no delay and a duration that's set to whatever you defined the delay as is because: It performs better. It avoids calling the tween's render method on every update until it's needed. It seemed to make more sense considering the name that the resulting tween would have a "delay" that's set to whatever you defined rather than a delay of 0 and a long(er) "duration". That was a long-winded answer, but ultimately all you need to care about is this: dc.startTime() - dc.timeline.time()