Leaderboard

Hard to tell how you can build entire website, following are some of the threads with similar ideas or animation. It is just a lot of tiny steps and then putting them all together.

Hi @Dennisat, welcome to the forums! It's very hard to troubleshoot in the dark, can you create a reduced case demo? CodePen or JsFiddle or anything where we can see and manipulate the code? Otherwise, we have no idea what might be involved in your situation that may or may not be interfering.

Hello @chris_hengst, Welcome to the forums! I'm not a sound designer nor have experience with sounds and the web other than having the occasional background elevator soundtrack added to a cheesy site. But, I think this issue of yours will be more a case of the "sum total" of the things that are going on in your app than a GSAP thing. GSAP alone only, at its core, just crunches numbers, it won't touch your sound files unless you tied them to a timeline and, even there, it won't cause it to play unless you have conflicting code trying to play and stop said timeline at the same time. As you said yourself, you're recoding it all. Better to wait until you clean your codebase up first before spending time troublesooting something that might go away after the spring clean.

Uh-oh! If Jack is playing then @Sahil and I get to be on the same team. We should probably grab the rest of the mods for our team too.

Yep, all these solutions are good. Here's one more: var tl = new TimelineLite(); tl.staggerTo(".box", .6, {x:100, opacity: 1, ease: Back.easeOut}, 0.2); var children = tl.getChildren(); children.pop().duration(1.8); //last children.pop().duration(1.8); //2nd to last This is fun.

We had same question, check the following thread.

It would be if that array was something GSAP taps into internally, but it's not. When you call getChildren(), it creates a new array, populates it, and spits it back to you. So you can do whatever you want with that array. In our example, we really only needed the last 2 elements anyway.

That's o.k. @ani7a - it's a good idea. Something else to keep in mind with those mask animations is adding a slight rotation. Some of the browsers are getting fussy with mask animations (especially strokes) so you have to add a slight rotation to force the mask to be redrawn. I should probably add that tip to the SVG Gotchas thread. Thanks for jumping in and welcome to the GreenSock forum. Happy tweening.

This one is based on Diaco's idea, but with NO solid background EDIT: I've just saw @PointC idea, seems that is the same

Thanks PointC! Thanks for the real support!

was messing around running some tests. Let me know if this illustrates the features clearly Feel free to change the values

@OSUblake Would be on our team. Let's have a code off between Blake and Jack. I will some popcorns.

Hi and welcome to the forums. a function I've created that uses the _next, and _prev properties on a tween object Those are private properties that are intended only for internal use. As such they are not documented or supported. It is strongly advised that you don't tap into these types of properties as its totally possible that we could change them at any time and your app would stop functioning. Please provide a reduced test case as Jonathan has suggested, it would help if you think you found a legitimate bug. Also, once we see what you are trying to do we can most likely suggest an approach that does not rely on these private properties.

I thought I had winning move but @Acccent already pointed out same thing I was concerned about.

Isn't it potentially risky to pop the last element of the children array? What if it's needed later? // Maybe this children[children.length - 1].duration(1.8); children[children.length - 2].duration(1.8); // or children.slice(-2).forEach(t => { t.duration(1.8); });

Hello @ryanpwaldon and welcome to the GreenSock Forum! That will be pretty hard to debug without code we can test in an editable environment like codepen. Here is a page on how to create a codepen demo example: https://www.youtube.com/watch?v=g13vpXbs34I But here are 2 codepen examples of a different approaches to a GSAP typewriter effect: And a slightly different way to do a typewriter effect in GSAP: Happy Tweening!

Your wish is our command. Should be wedged in there now.

I use .to({}, 1, {}) somewhat often. I wouldn't want the tween to just get ignored when I use it specifically to measure time, and I'd also want to be able to tell if it's active or not

Absolutely. You can tell GSAP to cap the FPS at whatever you want, whenever you want. TweenLite.ticker.fps(15); //caps at 15fps Not sure that's the best solution, though. Each browser has its own quirks and strategies for "optimizing" the rendering pipeline. Chrome and Firefox may have an algorithm that's working better in your particular scenario. As far as "don't do ___ in Safari", the only thing I can think of right now is just related to animating SVG masks inside <defs>, as discussed here: Probably won't help. You're welcome to set force3D:true on those tweens, but keep in mind that it won't help anything on SVG elements since there's no such thing as 3D in SVG and most browsers cannot GPU-accelerate SVGs.

Finally figured it out! I applied a fix in the upcoming release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Better?

See... this is why it's Jack against the whole mod team. (and we'll still probably lose)

No, there isn't something like that but it's pretty easy to figure out: var repeatCount = Math.floor(tween.totalTime() / (tween.duration() + tween.repeatDelay()));

I wonder if you're animating masks or something. Please see Safari definitely has some odd graphics rendering bugs (totally unrelated to GSAP).

Right, the ticker.fps() controls how often the whole engine updates. If you only want to update certain tweens less frequently, you could pause() them and then manually adjust their playhead positions however frequently you want (perhaps with an empty tween that has an onUpdate with logic that only runs ever X number of frames). Frankly, this strikes me as a much less effective strategy than addressing the broader issue of how things are built (in a way that's really tough on the browser graphics-rendering wise). Totally up to you, of course. Good luck with the project.

Thanks for all the suggestions on how to solve this! I went with Jack's solution. It was exactly what I was looking for

1) There are many, many ways to do it (with varying complexity), but here's a very simple example: 2) Sure, the best place to start is https://greensock.com/get-started-js/ and the learning section, https://greensock.com/learning. There are tons of tutorials online and videos. Hopefully it'll be easy to get going for you, but feel free to ask questions around here. Be careful - you may become addicted. Tween responsibly

Oh, that's very intentional. If a developer tells a tween that its duration should be 1 second (or whatever), it'd be pretty weird if we were like "Nope, sorry, we're gonna make that 0." It's common for developers to write code that depends on specific timing and the values that get plugged into the tweens may be dynamic, so it might cause a lot of confusion if we shifted timing like that. Reporting isActive() as false when the parent timeline's playhead is overlapping that tween's placement would be inaccurate and likely cause confusion. If you want that behavior, I'd encourage you to just run conditional logic: if (obj.value === 100) { doStuff(); } else { TweenMax.to(obj, 1, {value:100, onComplete:doStuff}); } Does that clear things up?

Thanks for all the info guys now I think I finally get invalidate. Could never quite wrap my head around it before. You should reference that video in the docs would help a lot of people out I'm sure.

So I guess this means @Dipscom is alive and well? Welcome back. I thought perhaps you had written some amazing code, sold it to a mega-corp and retired to a tropical island somewhere.

Wow this was very helpful @dipscom! Thank you so much for that explanation.

What.. no more IE8 support coming soon. But I love IE, I was just getting used to the no more IE6 being supported. (that was a joke, good riddance)

You guys are nuts. I love how this community pounces on opportunities to get creative with solutions and inspire each other. Way to go, guys.