[Remove an Element at End of Tween]

1 hour ago, GreenSock said:

Sure, like this?:

 

 

 

Exactly! And this actually makes perfect sense now, thanks!

[Remove an Element at End of Tween]

I was curious if I could get pointed in the right direction as how to remove an element at the end of a tween.

 

I imagine a callback or something along that line would be best, but I'm not too familiar with it. In my example I'd want to use an onComplete to remove the divs, but hopefully do so in a way that's a bit more dynamic, in case I'm dealing with a lot of different elements.

See the Pen yLLVrba by Fakebookin (@Fakebookin) on CodePen

[Timings with Advanced Staggers]

Each is great, but having amount is actually insanely useful and solved a problem I was working through with dynamic content... can't wait for GSAP 3.0

[Timings with Advanced Staggers]

Perfect, makes sense and helps!

 

It looks like I was getting confused with amount as well, I was assuming it was the total time of the tweens + the stagger, and not the amount of time for just the staggers to happen.

 

Your example or below works perfectly - thanks! 

 

.staggerFrom(".block", 0.8, {opacity:0, y:"50%", ease: Power1.easeOut, stagger: { from: "left", amount: 2 }}, null, "-=4")

 

[Timings with Advanced Staggers]

While the video about Advanced Staggers was really helpful, I got left with two main questions afterwards.

 

First, how to play the stagger earlier in the animation. In the pen example I'd want it to play 1 second after the previous tween, so I used , "-=4" - however, I'm lead to some confusion with using amount now, since I don't have to specify the the duration between each staggered animation. Previously I would've put something like:

.staggerFrom(".block", 0.8, {opacity:0, y:"50%", ease: Power1.easeOu}, 0.4, "-=4")

 

I'm wondering if something if the correct sort of syntax would be:

 .staggerFrom(".block", 0.8, {opacity:0, y:"50%", ease: Power1.easeOut, stagger: {
    from: "left",
    amount: 2
  }}, 0.4, "-=4")

However, having the additional 0.4 when using the amount: 2 for the timing is a bit confusing. Perhaps setting the 0.4 to null is the correct way? 

 

Finally, when using amount, should I be doing a similar approach with the timing each ease. In my example it's 0.8, should this be set to null as well?

See the Pen mdbRRbZ by fakebooked (@fakebooked) on CodePen

[Letter Spacing with Split Text]

Thanks! Can confirm that the font-kerning: none; seems to do the trick.

 

Edit: just wanted to mention it works when applied to the parent element (the element being split).

[Letter Spacing with Split Text]

I've noticed that text, when split, will sometimes have wider letter spacing. This seems to happen only when using the type: chars . This is especially noticeable when the split is applied right before or during an animation.

 

Image example (Imgur).

 

In my pen you can see a few differences. I was wondering if there's any way to reduce, or effectively eliminate, this issue. I tried a bit of CSS, but with no success.

See the Pen bGbpbyM by fakebooked (@fakebooked) on CodePen

[Is it possible to control the rate of onUpdate]

2 hours ago, Visual-Q said:

Note sure about whether you can throttle a callback in that way,  but you could probably make your tween behave the way you want with stepped Ease.

 

https://greensock.com/docs/Easing/SteppedEase

 

 

 

 

 

 

 

@Visual-Q This is definitely a great idea, but it appears that using stepped easing doesn't effect the onUpdate rate. I'm guessing it might be best to throttle inside my function as @elegantseagulls mentioned.

[Is it possible to control the rate of onUpdate]

I was curious if can set the rate that a specific tween fires onUpdate. Basically, I want to simulate a lower frame rate for a tween that is using onUpdate. I've seen that the TweenLite.ticker.fps(10) could work, but this seems to control the rate at all the tweens, and not just one specific tween.

 

TweenMax.to("#lowFps", 3, {
  onUpdate: () => animate()
})

 

In my Codepen example, I was hoping to have the top Tween smooth, and bottom one look like it's low fps. However, changing the ticker of course effects both.

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

[Best way to tackle complex independent timelines]

Wow, this article is amazing, wish I found it earlier.

 

I used the method from this video, Revolutionize your animation workflow: Part 2, and used a function to create a new timeline for each event.

 

See the Pen aKaQeo?editors=1010 by Fakebookin (@Fakebookin) on CodePen

 

[Best way to tackle complex independent timelines]

Great, will definitely check this out - could you give me any reference for garbage collection/how to clear completed timelines?

[Best way to tackle complex independent timelines]

I'm curious what the best way is to tackle a project that has multiple (some time 5 to 10 at once) animations that use a complex set of tweens, but tween independent of each other. When the new elements are created/appended I originally tried to use TweenMax without a timeline on the new elements. This of course has its downfalls as it's difficult to create and if something changes, changing all the delays/timings can be a nightmare.

 

I was thinking of creating a new timeline each event, but if a user uses the page for a while, there could be hundreds and even thousands of timelines created.

 

In my example:  If you click the button multiple times, I'm currently just adding to a timeline, where the events are waiting for the others to complete before they play.

 

What do you think is the best way to handle a situation like this, while still taking advantage of the timeline? Should I create multiple timelines or something else? Will having a lot of different timelines be a big page performance hit over time?

See the Pen OEoZed by Fakebookin (@Fakebookin) on CodePen

[Loading GSAP through JS then creating a timeline]

6 hours ago, GreenSock said:

I don't have time to look into the specifics, but I believe the problem is that you're not actually doing anything with the TweenMax file that was fetched. In other words, you've gotta put it into a <script> element and dynamically push it into the browser so that it understands it as a JavaScript resource. See what I mean? 

 

I think I know what you mean. Not sure how to do this off the top of my head but will look into it. Basically the script is loaded, but not executed?

[Loading GSAP through JS then creating a timeline]

I'd like to see if there's a way to load GSAP through JavaScript and then create a timeline after it's loaded and ready. I tried to use fetch + then to achieve this, but I think there's something I'm doing wrong here.

fetch('https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js')
  .then(function() {
    var tl = new TimelineMax({repeat: -1});

        tl.to("#square", 1, {x: 300})
      .to("#square", 1, {x: 0})
        ;
});

 

Th error I'm receiving:

 

Uncaught (in promise) ReferenceError: TimelineMax is not defined

 

I'm not sure if this is just a JavaScript error or an error with how GSAP needs to be loaded.

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

[Adding a delay that doesn't change with Timescale]

I'm curious how I can create a delay that is not affected by the timeScale property. For instance, I'd like a variable that changes the overall speed of each animation, but not the amount of time that it pauses for. In my example, the timeSpeed constant could go from .5 to 3.

 

Is there an easy way to tell timeScale to ignore delays?

const timeSpeed = .5;
const pauseTime = 1;

const tl = new TimelineMax({repeat: -1});
tl.timeScale( timeSpeed );

tl.to("div", .5, {x: "+=100", y: "+=100"})
  .to("div", .5, {x: "-=200", delay: pauseTime})
  .to("div", .5, {x: "+=100", y: "-=100", delay: pauseTime})
  .to("div", 0, {delay: pauseTime})
;

 

See the Pen WJdpqo?editors=0110 by anon (@anon) on CodePen

[Performance and Visual Optimizations]

Great, this looks perfect @Sahil - out of curiosity... do to tweens perform better than from tweens?

[Performance and Visual Optimizations]

Ah, thanks @Sahil - I'm a fan of that bounce effect since it goes past the preset y value compared to the bounce easing. Is there any solutions to smoothinig that out, or would it be best to use a fromTo and some other tweens to simulate the effect?

[Performance and Visual Optimizations]

Thanks, @Sahil - not sure how I missed the display: inline-block property, but that seems to do the trick.

 

When taking advantage of translate via x and y, I noticed a similar issue to what I posted in this thread. I went ahead and applied a similar fix which was recommended there. In this test, things don't look too different, but it's good to hear in more complicated animations there are definite advantages.

 

force3D: false

 

Also, I think creating in canvas is what I'm going to be looking at very soon. It seems that GSAP + PixiJS is the obvious choice for performant tweening. Are there any other recommendations on GSAP + canvas? 

 

Updated pen: 

 

See the Pen geGONz by NerdOrDie (@NerdOrDie) on CodePen

 

[Performance and Visual Optimizations]

I'm getting towards the end of a project, and started wondering about performance and improving the overall quality of the animations I'm making.

 

In the example pen, I have a few questions.

 

1. Does using x, y improve the animations over using top, bottom, left, right?

In a video by Paul Irish it looks like using translate for CSS animations is performs better, especially in more complicated examples, is this similar with GSAP? Looking at the GSAP tests, this seems different, though. I'm not sure if my eyes deceive me, but I do see a bit of a "staircase" effect on the letters.

 

2. How would you use x and y translates with staggerFrom + letters wrapped in spans?

I'm not sure I understand using x and y properly - when I add to the spans of the letters in the example, it doesn't work.

 

3. Will lowering the ticker's call time help with performance?

While Tweens may not be as smooth, will the browser use less resources if set to something like:

 

 TweenLite.ticker.fps(30); 

 

See the Pen dmzBBz by NerdOrDie (@NerdOrDie) on CodePen

[Text shifts during parent animation [Chrome]]

I'm having an issue with text shifting/resizing in Google Chrome. This seems to happen while the parent div is being animated.

 

If you look at the Codepen example, you'll see the text snap to different sizes, and it also looks like it tries to change weights as well. The other thing I've noticed is that the parent container also shifts with the text.

 

I've read other answers about this, but anything I've tried doesn't work. Does anyone have insight on this issue?

See the Pen PRjLYJ by NerdOrDie (@NerdOrDie) on CodePen

[Animating an Image In Canvas and Beyond]

I've been trying to animate an image that I set up in canvas with Easel JS, and have no success.  I was curious if anyone had advice on how to do this?

 

Also, I am under the impression that animating in canvas will give me a significant performance increase, as opposed to inside the DOM. 

 

I was curious if there was a good resource I could be pointed to, to help me better understand GSAP + canvas.

See the Pen rxKXVL by NerdOrDie (@NerdOrDie) on CodePen

[Timeline doesn't finish/pause for added timelines]

 I created a simple example of what I've been working on.  Basically, I want to do the following with multiple timelines.

 

In my example, only one box should be moving at a time.  Currently, multiple will play at the same time.  So, red box moves and stops, then green box moves and stops, then blue box moves and stops, then finally red box moves again and then stops.

 

It is also important that I use functions, because in my working project example I am taking advantage of certain callback functions.

var tl = new TimelineMax({
    repeat: -1
  }),
  tl2 = new TimelineMax(),
  tl3 = new TimelineMax();

tl.to("#one", 1, {
  left: 300
});

tl.add(tl2);
tl.add(tl3);

tl.to("#one", 1, {
  left: 60
});

function timeline2() {

  tl2.to("#two", 1, {
    left: 400
  });

}

function timeline3() {
  tl3.to("#three", 1, {
    left: 300
  });
}

timeline2();
timeline3();

See the Pen KVXdrB by NerdOrDie (@NerdOrDie) on CodePen

[Animating Elements Loaded Through Javascript]

Hi Fakebook 

 

you should to define Tweens after appending ( when the new dom objects is ready ) , seems there's " customCallback " in that config object , and you can use that .

 

See the Pen Ioype by jasonmayes (@jasonmayes) on CodePen

 

Thanks Diaco.  Your idea works, but I was hoping there would be a way to do this without callbacks within plugins.  I wasn't sure if there was something within GSAP or maybe a smarter way to do this with jQuery or JS.

[Animating Elements Loaded Through Javascript]

I'm having a bit of trouble animating elements that are loaded through JavaScript.

 

Specifically, I was using Jason Mayes Twitter Post Fetcher to load tweets into my page.  However, when I try to animate the username, tweets, or any other elements that it loads, I am unable to.

 

I am sure my timeline and tweens are working properly, because when I add in static elements, they target the proper elements.  Is there anyway to target elements loaded via JS?

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

[Completing one animation at a time, with a pause, then looping]

I'm fairly new to GSAP, so I'm struggling with how to complete a certain task.

 

I'm trying to do the following:

 

Complete the animations for the first box > Pause for 2s > Fade out elements > complete animations for second box > Pause for 2 > Fade out >.... after all boxes do their animation separately, I would like to have another delay before the entire process repeats itself.

 

I wasn't sure if using methods like StaggerFromTo or Each would help / how to implement with GSAP.  Any info on where to start would be greatly appreciated.

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