qarlo

December 6, 2016

Thanks, this works perfectly!

December 4, 2016

Hello,
I'm trying to use the method seek() to jump to a label in a nested timeline.

The real example is a bit complex to reproduce in a codepen so I constructed a useless one just to show the issue.

Baically I have a series of small animation contained in a another animation. This animation (the external one) has a duration equal to all the small animations inside. I would like to be able to jump to each of these animations, but apparently I can't.

I'm sure there's a good reason for this, but is there any way to achieve what I'm trying to do?

See the Pen RoQEqY by qarlo (@qarlo) on CodePen

October 13, 2016

Thank you both.

Somehow I was convinced that I needed to put the "css" property in some cases and that it was fine to have both "css" and "x" outside of it. Now I have it clear.

October 10, 2016

This same behavior can also be seen if you try and use visibility with a CSS transition. In that case you still have to set the CSS transition to use both visibility and opacity in order to see a fade. It only gets applied at either the start and end of the transition, but not in between.. whether it is animated via CSS or JS.

Thanks for your detailed answer, but I was trying to show something else.

In this pen you can see that the second box gets translated to the right, while the first one doesn't. I know that one can't animate the "visibility" property and I wasn't trying to do that.

I only wanted to point out that when setting the visibility through the css property in greensock, the transformation is ignored. I thought this might be a bug, or at least an inconsistent behaviour, even though probably it's not that important

October 10, 2016

Instead of setting initial to visibility: hidden .. try just setting autoAlpha: 0

//switch this
.set('.one', {css: {visibility: 'hidden'}, x: 100})
//to this
.set('.one', {visibility: 'hidden', x: 100})
Making that change should give you the desired outcome. Please keep in mind that you can't animate visibility. It's either hidden or visible. As Jonathan suggested, please use autoAlpha or opacity.

Well, in my question I already pointed out the different behaviour using "visibility" and using "autoAlpha", so I was aware of it and already figured out that autoAlpha works the way I want. Also, I wasn't try to animating it. I was just concerned about the different behaviour when setting the "visibility" property. I thought it might be some kind of a bug. The modified code you posted here works, but then to me the behaviour seems even more inconsistent now.

October 9, 2016

Hello,

I was trying to figure out a problem with an animation and after a while I noticed a weird behaviour.

Basically, if I set the css property "visibility: hidden" to an element and I try to apply a transformation to this element, the transformation gets ignored. I know that stuff like this can happen when using "display: none", but with visibility too?

It is weird also considering that with autoAlpha it works as expected.

I show this in the pen I posted.

Though, maybe I'm wrong and this is the way it's supposed to be?

See the Pen XjEaay by qarlo (@qarlo) on CodePen

October 1, 2016

it seems you were just adding your slide4 tween outside the onload handler, which means you were adding it BEFORE the each() ran that built the timeline.

move the }) as shown here: http://prntscr.com/co7fox

good?

something to keep in mind you can get an array of the labels using tl.getLabelsArray() before finding that your code was in the wrong place I tried getting the labels array right before the add() of slide4 like:
console.log(tl.getLabelsArray());
  tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1');
and found that there were no labels.

This was really stupid, sorry, I should've found by myself. Sometimes I get confused in the small codepen editor and I messed up the parenthesis.

Anyway, thanks for the great tip about getLabelsArray(). I didn't know the function and it will be very useful for debugging.

also, I noticed you are a fan of using TweenMax.to() inside of add() is there a reason why you don't use the to() method of TimelineMax?

It can make your code much shorter to type and easier to read.

so instead of using add() with an Array of TweenMax tweens, you can do:
var position = tl.duration();
      tl.to($('.slide-' + (i+1)), 1, {
          opacity: 0,
          immediateRender: false
        }, position)
       .to($('.slide-' + (i+2)), 1, {
          opacity: 1,
          immediateRender: false
        }, position)
or instead of
tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1');
just use
tl.to('.slide-4', 1, {opacity: .5}, 'slide2+=1');
What you are doing is ok and will work, but I think you will find .to() to be much easier on you;)

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/to/

It's true, but I think I started using add() when I needed to group Tweens and I still didn't know or understand how labels work. I guess this way, and inserting proper labels the code will be cleaner and easier to debug

September 30, 2016

Hello,

I'm expanding on a pen I already posted a couple of days ago, and trying to figure out ways to write a cleaner timeline.

The whole thing will be a sequence of images, or slides, always fading to the next. In the example there are 3, but they might as well be 100.

For the basic behaviour, fading in and out, I have this:

$.each($('.slide'), function(i) {
      tl.add([
        TweenMax.to($('.slide-' + (i+1)), 1, {
          opacity: 0,
          immediateRender: false
        }),
        TweenMax.to($('.slide-' + (i+2)), 1, {
          opacity: 1,
          immediateRender: false
        })
      ], '+=1');
tl.add('slide' + (i+1));
    });
  });

Notice that I'm also adding a label after each step.

At this point, I would like to add variations at specific point. For example, after the slide-2 animation is complete, I want something to happen before proceeding to slide-3.

I thought I could simply add a new Tween to the timeline, using the label as a position marker, like this:

  tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1');

What I'm expecting, is to see the slide-4 to appear after the 2, but instead it seems to ignore the position parameter.

Am I again missing something about the position or my approach is totally wrong?

See the Pen LRjarR?editors=0111 by qarlo (@qarlo) on CodePen

September 26, 2016

Hey,

Having a .to() method with a super small duration is not really a hacky workaround, it is actually expected behaviour when you think about it.

Going back to where I say that a .to() (or any other method, actually) tween with 0 duration is the same as a .set(). What it means is, with a 0 duration, there's really zero time, they all happen immediately. So quick we don't see it. No matter how many calls you place (within reason obviously, if you put a loop that creates a billion calls, we might start to see things), they all effectively happen at the exact same time

I understand it, but the way I thought it was: it happens immediately, but in the exact position in the timeline where I set it, which means that if I add a "+=1" to it, it happens immediately, but after 1 second.

In addition to the excellent advice from Dipscom I want to add a further point of clarification.

Using the set() methods of TimelineLite and TimelineMax is slightly different that using TweenMax.set() inside of add().

In your example you are using the latter:
tl.add(TweenMax.set(obj, {props}), somePosition);
When the TweenMax.set() is called the engine says "Oh TweenMax is creating a tween with no duration it must render immediately because technically it completes as soon as it starts". At the time TweenMax.set() is called the engine has no idea that you called it inside of add() and that the resulting tween may be placed on a timeline at a time in the future. This is why it is absolutely necessary in this case to use immediateRender:false to override the default behavior.

when you use TimelineLite/Max .set() its different.
tl.set(obj, {props}, somePosition);
Since the set() above is a timeline method, the engine knows that even though the resulting tweens have no duration and they should not render until scheduled based on their time in the timeline.

I recommend that you use the timelines' set() over nesting TweenMax.set() inside of an add().

I guess this is what I was really missing, thanks.

Had to try. It would look like this:
 $(window).load(function(e) {
    //hide all but the first slide
    TweenLite.set(".slide:not(.slide-1)", {opacity:0});
    tl.staggerTo(".slide", 0, {opacity:1, immediateRender:false}, 1);
  });
See the Pen ALRpPG?editors=1111 by GreenSock (@GreenSock) on CodePen

Ahah, thanks, this is great!

September 26, 2016

With a tween of zero duration, it happens immediately. It's the same as using the .set() method, so you will have to consider turning the immediateRender property to false or, instead of having zero, just have something super-duper quick, like "0.01" and the issue goes away.

More info on immediateRender.

I've watched that video, but it's mentioning only the TweenMax.from method and not TweenMax.set. The same goes for the documentation.

Anyway, with TweenMax.set it seems that it just doesn't respect the position in the timeline and execute the tween at the beginning, which it seems different than the behavior with TweenMax.from. Is this how it is supposed to be? If I put a TweenMax.set in the middle of a timeline it's really weird that it gets executed before anything else. And it's true that I can use a TweenMax.to with a very small duration, but this seems a bit of an hacky workaround

September 25, 2016

Perspective. Look at your hand from a distance. Now move it towards your face. Is your hand growing? No. It's the same size, it just looks like it's getting bigger. When you scale your box, it only LOOKS like the left edge is moving closer/farther to the edge of the screen. It didn't move, nor did it change size.

Basically what you were doing is looking up at the night sky, measuring the size of the moon with a ruler, and reporting it as being 10 inches wide. Logically you were approaching it correctly based on how it appears, but that wasn't working because you weren't viewing it correctly.

This stuff can be confusing, especially in 2d because everything is flat. Does that clear some of the confusion?

Yes, I kind of understand it. I mean, I get the theory, but still in practice it confuses me a bit. And yes, I guess the 2d makes it even weirder. Thanks very much for the explanation

September 25, 2016

Hello,

I'm trying to make an animation where at some point there's a sequence of images, one on top of each other, with each image just disappearing to show the one right below. They are absolute positioned and I'm controlling their appearance by simply tweening their opacity. Since I don't want a fade effect, I thought I would set the duration to 0. But this way it seems to ignore the position parameter I set.

In the pen I created, I'm expecting to see the number 1, first. And after 1 second of scrolling down, the number 2. Instead, it appears directly the number 2 and the weird thing is that if I scroll back, it actually appears the number 1.

Setting both duration to 1 make it actually to work, but I don't get what the issue is. Am I missing something about position and duration?

See the Pen QKpkaB by qarlo (@qarlo) on CodePen

September 24, 2016

Does this give you a clue?

See the Pen 2f841678bcb24ac25240c98f5b458b0b by osublake (@osublake) on CodePen

You need to use the non-transformed distance.

See the Pen ZpZvxo?editors=0011 by osublake (@osublake) on CodePen

ok, I'm amazed. I spent hours trying to figure out why I couldn't get the right numbers and it's actually simpler than what I was trying to do.

So, it works, but I'm not totally sure why. The first pen you posted doesn't really explain it to me.

From what I understand, scaling an image or a div doesn't affect the DOM, so I guess this is the only thing that matters. But then, how does it still work when the window is, like, half the width of its initial value?

Sorry, I'm just try to understand it because I'm a bit confused

September 24, 2016

Hello,

I'm using GSAP to build scroll controlled animation using a timeline.

1) I have a container with a list of images, one next to the other, and when I scroll normally (so, vertically), I make the images slide to the left.

2) Sometimes I need to stop the sliding and animate something else (make something to appear and so on), before proceeding again with the sliding. This needs to happen at a specific moment, or position: usually I want one of these images to stop precisely in the middle.

3) the whole thing needs to be responsive

I managed to do almost everything, but the point 3. In order to make it responsive, I set a fixed maximum size to the container div and on window loading I check if the window is smaller than this size, in which case I scale everything. So, the scaling works pretty well, but it messes with the calculations I made for the animation.

In the pen I created I'm trying to stop the animation exactly when the left border of the third rectangle reaches the black line. At row 32 I'm calling the resize function to set the initial size. If you comment this call out you can see that it works fine, if you leave it, the rectangle will be always slightly off. Why is this the case?

See the Pen gwmPgp by qarlo (@qarlo) on CodePen

August 19, 2016

There was a topic posted a couple of weeks ago about not using ScrollMagic...

http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860

I'm sure ScrollMagic is a great product, and I'm not trying to convince anybody otherwise, but this can be solved in 1 line of code. This normalizes the scroll value to a value between 0-1, a ratio.
var progress = (scrollValue - min) / (max - min);
Normalizing a value is key to figuring out most animation problems. Here are two different ways you can get the normalized value.

Using scroll position...

See the Pen c0d284a89ae1d15d5ec12ba4c9ee8f6b?editors=0010 by osublake (@osublake) on CodePen

Using client rect...

See the Pen 314e9c6f80001fd19dd0bf68d8fc292c?editors=0010 by osublake (@osublake) on CodePen

Thanks, this is amazing and, I think, exactly what I was looking for. Also, I didn't know the "ticker" function and it seems really useful in scroll controlled animations. I suppose I need to look into it. Thanks again!

Sorry, that isn't something that GSAP does natively or something I can figure out for you.

ScrollMagic does everything you need. I think you will be much better off using it than trying to re-build it's core features from scratch.

I know that ScrollMagic is great and I don't have anything against its use, but still there are various reasons for me to avoid it: even though the plugin itself is pretty light in terms of weight, then in the code is yet another level of abstraction and even more new syntax to deal with. I'm clearly no gsap expert in the first place, so having to use another library that depends on gsap I found myself a bit lost having to look at two documentations to understand what to do. But, I mean, maybe it's just a limit of mine.

Using only gsap it seems to me I can have more control. Again, maybe it's just because I'm still quite new to both library, but right now I prefer trying using gsap exclusively

August 15, 2016

If you only need to convert a scroll amount to an animation's progress() then this pen from Adrian Parr should help

See the Pen mbrqt?editors=0010 by adrianparr (@adrianparr) on CodePen

Well, this is what I'm actually trying to do, but in my case I want to apply the progress only after some point

August 15, 2016

You can check out this

See the Pen jPmRWV by bassta (@bassta) on CodePen

But basically for more complex parallax scrolling, ScrollMagic is the best option since it is a scrolling manager for complex scene parallax scrolling management.

I know, I tried it ScrollMagic in the past and it's cool, but I don't think it's really necessary in this case. I mean, I know how to trigger a tween when an element appears in the viewport, I just need to update it on scroll.

The pen you posted is really nice, but it's quite different from what' I'm trying to do: it doesn't use gsap at all, so the images aren't animated; also, the images are set as background, which in my case doesn't really work

August 15, 2016

Hello,

I'm trying to create a page with sections moving in parallax. Each section will have an image. Some of these images will scroll normally, while for some I'd like a different movement, like scrolling slowly in the opposite direction. Basically I'd like to recreate the effect in this page: https://www.squarespace.com/websites/templates/mercer (you have to click on "PREVIEW MERCER" to see it).

I set up a pen with three sections: the first and the last one should move normally, while the second one is the parallax one. The main problem is that I'd like to translate the element while scrolling and, of course, when scrolling back, animating it back to its original position.

I know that ScrollMagic can be useful in this case, but I'd prefer doing it using only gsap.

Any suggestion?

See the Pen JKxzvW by qarlo (@qarlo) on CodePen

July 4, 2016

Hi qarlo

You're right - you have to get new values for the window width so everything works correctly. I moved your window calculations and tween into a function that will play on page load as well as a click of the repeat button.
function moveIt() {
var windowWidth = $(window).width();
var distance = $('.img-wrap').width() - windowWidth;
TweenMax.fromTo(".img-wrap", 5,{x:0} ,{x:-distance, ease:Power3.easeInOut});
}

Thanks, this is helpful, but it's still not what I need, I think. But it's my fault. I created the pen as simply as possible, just to illustrate this issue, but in my project the whole animation will be controlled via the scrollbar and I'll be animating multiple layers in a timeline. If needed I'll create a more accurate pen.

The thing is that I don't need to restart the animation. On the window resize I would like to recalculate the distance (which will be the same for all the layers, anyway), so just a variable, but after doing it, updating all the tweens in the timeline. They might be two, sometimes four, but possibly even more.

I saw that there is an updateTo method, but I'm not sure is the best approach. It would mean that I would need to write the code twice, basically.

If it's not clear what I mean, I'll post another pen later.

In the meantime, thank you!

July 4, 2016

Hello,

I know a similar question has been asked before, but I think my case is a bit different and I couldn't find a solution.

In the pen I posted I have a very long image which I want to scroll from the beginning to its end, which mean that it should stop when its right edge reaches the right side of the window. In order to do this I calculate the distance, so the amount of x translation, as the difference between the image width and the window width. I know about the xPercent property, but I guess that it's not useful in this case, because I have no way of using it account also for the window width.

Anyway, the animation works fine. But if after the first animation you resize the browser window and click repeat (top right corner), the image doesn't stop at the right point: it goes too far left, or too far right, depending how you resized the window.

So, I'm thinking that the solution would be to update the values inside the tweens on the window resize event. I'm not sure how to to this, or if that's even possible. Is there a better, more appropriate, approach?

See the Pen vKkmQP by anon (@anon) on CodePen

July 2, 2016

Hello,

I went throught the doc and couldn't find anything. Is it possible to set an easing function to a timeline and have it like inherited from all the Tweens in the timeline?

June 17, 2016

I think this thread can answer your question:

http://greensock.com/forums/topic/14323-speed-of-responsive-animation/

Thanks, this was really helpful too

June 17, 2016

tl.add([
    TweenMax.to(".back", 12, {
      x: -(distance - 300)
    }),
    TweenMax.to(".middle", 12, {
      x: -distance
    })
See the Pen RRaGJo?editors=0010 by GreenSock (@GreenSock) on CodePen

Is that what you need?

Yes, actually this makes perfect sense and is way more simpler than what I was thinking, thanks!

As far as making it totally responsive and dynamic for all viewport sizes and aspect ratios, that's a bit beyond what I can support. We really try to stay laser focused on the GSAP API.

Of course, but what I was still referring to GSAP, in a way. I mean, I know how to make the images responsive and to adapt them to the window. I'm still not sure about the best way to make the duration of gsap controlled animations responsive.

For example: when I open the page, the script calculates the width of the images and so the duration of the animation is set. If I then reduce the window size, how can I update the values?

June 12, 2016

An update:

searching for more example and a bit more through the documentation I figured out that I could use the onComplete callback to stop or pause the timeline when the front tween reaches its end. I updated the pen accordingly:

See the Pen aZNvgQ by anon (@anon) on CodePen

Still is not working as I'm expecting. What am I missing?

June 11, 2016

Hello,

sorry if the title is not really clear.

I'm trying to create a horizontal parallax animation with at least three layers. The end result should also be responsive, so I can't really use fixed numbers. Also, the image for the background is not the same size as the others.

Let's say that the background is 8000px and the image on top is only 5000px. I want the scrolling to stop when the right border of the second image reaches the outer margin of the browser window. I kind of did it, but not quite right.

In the pen I created, as you can see, after the character layer reaches its end, the background still goes on for a little while. Is there a way to avoid this? Or a better approach to the whole thing?

See the Pen pbgBoa by anon (@anon) on CodePen

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by qarlo