Leaderboard

If you want to fire a function 1 second after resizing has stopped you could do console.clear(); var tween = TweenLite.delayedCall(1, update).pause(); window.addEventListener("resize", function() { console.log("resizing") tween.restart(true); }); function update() { console.log("resize stopped 1 second ago so let's update") } open the console:

if you don't have a parent element handy, you can always use some good old maths:

Here's a pen

I wish I had time to help you with the custom code, @smallio - it's a bit beyond what we can normally provide here in these forums which are intended to be pretty focused on GSAP-specific questions. Your code looked like it was maybe compiled from somewhere too which makes it rather awkward. Perhaps someone else can lend a hand - seems like something @OSUblake might enjoy

Update: Turns out this is a webkit bug introduced in iOS 11. The virtual keyboard is not accounted for taking up any space, so the innerHeight and other measures of the size of the viewport aren't accurate. There is a webkit bug reported but not sure how long those take to fix. And don't really see any way sidestep this since you can never know the actual size of the viewport until they remedy it.

Well, if you just want to know if the playhead is BEFORE that tween starts (which would, of course, be true if it's in the "delay" part of the tween), it should be as simple as: if (animation.timeline.time() < animation.startTime()) { //yep } If you literally want to know if the playhead is directly inside the delay (and not before it), that could also be done, like: if (animation.timeline.time() < animation.startTime() && animation.timeline.time() > animation.startTime() - animation.delay()) { //yep } Does that answer your question?

Hi guys, I'm seeing a lot of websites use this effect as of late. Here is one - https://en.leviev-group.com/ I'm trying to recreate it with green sock and have managed to do it. I'm stuck applying it to more then one object though. For example if I had multiple shapes on the page, I'd like to make the mouse dot morph into them as you hover over them, with the magnetic effect I've been working on in codepen. Does anyone know of any cleaner examples or know how to do this for multiple objects? Cheers, Will

Awesome! Thanks!

Pure genius dude! Thanks! It's always the simple and obvious, right in front of me, that seems harder to see. Thanks again!

You could rotate the parent element, I think.

Yeah, like @Jonathan said, a demo would be helpful, but if your goal is to just re-size those DIVs after the split, maybe try this: TweenLite.set(yourSplit.lines, {width:"auto"}); Does that help at all? (I may have misunderstood your question)

If you want to update it on every "tick" (requestAnimationFrame), you can simply: TweenLite.ticker.addEventListener("tick", function() { //your redraw code }); But if you want to only do it for a specific amount of time, your solution is probably best - just use a simple tween with an onUpdate. The target could be anything you want ({} is fine, or "this", or whatever). Does that answer your question?

Thanks for the answer Sahil.

No no, that code you've got wouldn't work because your 2nd tween overwrites the first one immediately, and you'd never see any animation because you're telling it to animate to scale:1 right away (but it's already scale:1). Looks like you forgot to add the delay special property to that second tween. In other words, you're saying "animate to scale:1.15 and also scale:1 at exactly the same time." (which can't happen of course) If you're still having problems, it'd be SUPER helpful if you posted an actual example, like as a codepen or something so that we can see what's going on under the hood.

I am using a <div> wrapper with id. But read this: We don't need that click handler anymore, maybe that's why You can't validate Your ad.

Hi @hanslibuzli, Life is a compromise. It depends on what your focus is. I am neither a coder nor an expert - its just for fun. Kind regards Mikel

Not in any easy/automatic way, no, but you could try to graph it out in the Ease visualizer and trace it using only 2 control points and see how close you can get it (cubic-bezier() in css is limited to 2 control points). And again, it'd be different based on the starting/ending scales, so you can't make a universal one. Have you tried setting will-change css property in Chrome (not just to the mask, but the masked content too)? It's somewhat dangerous (https://greensock.com/will-change/) but might be worth trying. Masking is just inherently CPU-intensive (unrelated to GSAP).

Hi Skid X that's one of the IE rendering issues , pls try add just a bit rotation , like this : .to('.box1', 22, { scale:1 , x:20 , y:30 , easing:Linear.easeNone , rotation:0.01 })