[SloMo inverse?]

1 minute ago, GreenSock said:

 

No, it's actually free for anyone with a GreenSock account (like, even if they only post in the forums and never join Club GreenSock). It's basically something that encourages people to at least give us their email address so that we can have a better idea of who is using the tools and communicate with them about updates, etc. 

 

So yeah, that's why it's not in the Github repo or on the public CDNs. That link is for a version that only works on the codepen.io domain (and a few others). 

oh I see. I imagine if it were to be used in a Google DoubleClick project, the js library would have to be included in the upload. There is no Google hosted equivalent?

[SloMo inverse?]

17 minutes ago, GreenSock said:

Yeah, if Power4.easeInOut isn't quite what you want, just create a CustomEase. Is there any particular reason you were trying to avoid a CustomEase? 

 

It's for a banner in DoubleClick, which I couldn't find a google hosted link for CustomEase. I noticed you use this URL in your

See the Pen ZBpRYJ by GreenSock (@GreenSock) on CodePen

:

 

//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js?r=2

 

Is that because it's exclusive for Club GreenSock?

 

 

 

 

[SloMo inverse?]

22 minutes ago, GreenSock said:

Wouldn't that just be like one of the standard Power eases like Power1.easeInOut, Power2.easeInOut, Power3.easeInOut, or Power4.easeInOut? 

 

Don't forget, when you select one of those in the Ease Visualizer, there's a drop-down for the ease type right above the "RUN" button. Select "easeInOut" there. 

 

Is that what you're looking for? 

 

Of course there's also CustomEase which lets you build whatever curve you want (literally, unlimited control points and anchors). 

 

Thanks Jack -  Yes Power4.easeInOut is pretty near on close inspection. Almost identical in fact. I have been using that, but I was just looking for a straighter middle part (without constructing a custom version):

 

 

[SloMo inverse?]

Hi, i'm looking to create an ease that would look exactly like the inverse of a SloMo: It starts off slow, speeds up in middle, then slows down. 

 

Is there an easy way to switch this?

 

so, instead of the original curve on the left, it would look something more like the curve on the right:

 

 

Thanks

[Animate width from left to right]

Just now, mikel said:

Hi,

 

And here a proper made to measure ...

 

See the Pen a83f0373bb538d1745958cfafae88ceb by mikeK (@mikeK) on CodePen

 

It could be easy.

 

Happy learning ...

Mikel

 

 

Thanks Mikel, nearly - I need the text be static

 

Here's a better example of what I mean. Have a look at the red version for what I'm trying to achieve (without having to animated the text):

 

See the Pen OOeLxW by friendlygiraffe (@friendlygiraffe) on CodePen

 

[Animate width from left to right]

11 minutes ago, Sahil said:

Here is similar thread.

 

Thanks Sahil, I couldn't see a solution on that thread that kept the contents (text) static 

[Animate width from left to right]

I'm trying to animate a div (mask) from left to right using width, keeping the text static. 

 

I have tried to achieve this using transformOrigin & marginLeft

 

Any other suggestions welcome

 

Thanks

See the Pen EbzqLQ by friendlygiraffe (@friendlygiraffe) on CodePen

[Transform and z-index stacking context]

It seems to work when specifying #background_exit as z-index:-1;

 

Would be good to find a more flexible fix though 

 

See the Pen jaXpYm by friendlygiraffe (@friendlygiraffe) on CodePen

 

[Transform and z-index stacking context]

4 minutes ago, Sahil said:

No it doesn't remove z-index. You can check console in demo. You are probably looking at element with id 'background_exit' that covers the button.

 

See the Pen dZwqby by Sahil89 (@Sahil89) on CodePen

 

Thanks, any clue why is the button no longer clickable ? 

[Transform and z-index stacking context]

Might not be specific to GSAP, but:

 

You'll notice when the button is clicked and the function is fired, it seems to remove it's functionally. See in example

 

Thanks

See the Pen JOwZjb by friendlygiraffe (@friendlygiraffe) on CodePen

[staggerFrom same Point]

Great, thanks

[staggerFrom same Point]

Thanks a lot. @PointC That works, but the circles need to be set as relative, not absolute

 

Is there a way of setting a relative div to an absolute position ?

 

 

[staggerFrom same Point]

Is it possible to staggerFrom the same point on a relative positioned div?

 

The Circles all start from 200px from their individual positions, whereas I'd prefer them to start at left:200px in absolute coordinates.

 

Thanks

See the Pen RLVxEy by friendlygiraffe (@friendlygiraffe) on CodePen

[set vs 0 in TimeLines]

immediateRender:false

worked a treat. Many thanks!

[set vs 0 in TimeLines]

Hi, I wondered why the only way I can trigger a quick reveal in Nested Timelines, is by using a duration longer than 0. 

 

As you can see in the CodePen example, the Blue, Green and Yellow circles should reveal themselves halfway through the Red circle's Timeline, but .set and a duration of 0 trigger initially, whereas the only way round it is to use 0.00001

 

See the Pen MEpVNd by friendlygiraffe (@friendlygiraffe) on CodePen

[Skip on repeat]

Thanks Jonathan, that's really handy 

 

I am actually using it within a nested Sequence, and I noticed the onRepeat method doesn't behave correctly when nested 

 

TweenLite.defaultEase = Power0.easeNone;

var textAnims = new TimelineMax({
  repeat:-1, 
  onRepeat: seek2
});

textAnims.to(".red", 0.5, {x:400,  autoAlpha:0.3})
.to(".red", 0.5, {x:0,  autoAlpha:1})
.to(".green", 0.5, {x:400,  autoAlpha:0.3})
.to(".green", 0.5, {x:0,  autoAlpha:1})
.to(".blue", 0.5, {x:400,  autoAlpha:0.3})
.to(".blue", 0.5, {x:0,  autoAlpha:1})

function seek2(){
  textAnims.seek(1.5);
}

var tl = new TimelineMax();
tl.add(textAnims, 0.0)

 

See the Pen aWxyOO by friendlygiraffe (@friendlygiraffe) on CodePen

 

[Skip on repeat]

Hi, I want a Timeline to skip to half way through on repeat

 

So the first play through starts from 0, but on every play through after that, I want it to start form halfway

 

Is that possible? 

var tl = new TimelineMax({repeat:-1, repeatDelay:2});

tl.to("#circle", 4, {x:400})
.seek(2)

 

See the Pen MmRmmJ by friendlygiraffe (@friendlygiraffe) on CodePen

[Repeating fromTo without using Timeline]

That's great to know. Thanks a lot Carl

 

A timeline might be the most intuitive way but technically you could use a SlowMo with yoyoMode set to true (to make it end where it begins) like

 

TweenMax.fromTo("#circle", 1, {autoAlpha:0}, {autoAlpha:1, repeat:-1, yoyo:true, repeatDelay:2, 
ease:SlowMo.ease.config(0.01, 0.7, true)});

 

 

See the Pen pPyBRP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

SlowMo: https://greensock.com/docs/#/HTML5/GSAP/Easing/SlowMo/

 

A CustomEase would give you more configuration options like: https://greensock.com/ease-visualizer?CustomEase=M0,0%20C0,0%200.504,0.988%200.504,0.988%200.504,0.988%201,0%201,0

[Repeating fromTo without using Timeline]

Actually, I marked that as solved, but what I really wanted was the repeatDelay to be the duration the object is not visible.

 

Not the duration of the object staying visible.

 

Would I have to use a timeline for that ?

[Repeating fromTo without using Timeline]

I'm trying to create a simple looping fade, without using a timeline or onComplete function calls.

 

is this possible?

 

This doesn't work, but I'd like something similar to this. Fade from 0 and then back to 0 with a 2 second delay?:

TweenMax.fromTo("#circle", 0.5, {autoAlpha:0}, {autoAlpha:0, repeat:-1, repeatDelay:2});

Thanks

See the Pen eWZQLg by friendlygiraffe (@friendlygiraffe) on CodePen

[Including Greensock in the HTML file]

Great thanks Dipscom

[Including Greensock in the HTML file]

Hi, I'm working on a creative that requite no external Javascript, so I was looking at maybe including the parts of TweenMax that I need in a <script type="text/javascript"></script> tag

 

Is this something that has been done before? Or is it a bad idea?

 

Thanks

[Stagger array]

Thanks, it is a lot of extra lines of code, but yeah that works.

 

 

You could just use a function that'll flatten the array for you. Here's an example: 

var tl = new TimelineMax({repeat:-1, repeatDelay:2});
var circles = [".c1", ".c2", ".c3"];

tl.staggerFrom(getTargets([circles, ".s1"]), 2.5, {rotationX:90, ease:Power4.easeOut}, 0.5);

function isArray(a) {
  return (a && a.push && a.length);
}
function getTargets(targets) {
  if (typeof(targets) === "string") {
    return document.querySelectorAll(targets);
  }
  if (isArray(targets)) {
    var a = [],
        target, i;
    for (i = 0; i < targets.length; i++) {
      target = targets[i];
      if (typeof(target) === "string" || isArray(target)) {
        a = a.concat(getTargets(target));
      } else {
        a.push(target);
      }
    }
    return a;
  }
  return targets;
}

That'll handle any level of nesting too, as well as selector text. Just feed anything to that getTargets() function. Is that what you're looking for? 

 

[Stagger array]

Yeah I wanted to avoid complicating it any further, just thought Greensock might have an inbuilt method for this. Thanks anyway

 

 

I'd guess it would depend on how many items you are going to have on that array and how many times you want to update that because, you could create a function to create an array based on your initial one plus whatever else you want to add to it. Then, you'd feed the resulting array from the function into your tween.

[Stagger array]

Thanks Dipscom, I just wondered if there was a more elegant solution?