Leaderboard

Did you see Rodrigo's comment where he pointed out that you have your onStart call inside the pixi:{} config object? That's not meant to be there. If I move it outside the pixi config object and put a console.log call into the onStart, I see it fire according to the delay as expected. Your problem here is not with GSAP but with JavaScript scoping. You are asigning new values to the same variable and because it's the same variable, its value gets updated every loop call. So, you think something's wrong but it's not. It's expected behaviour. What you want to do is create a brand new variable inside the for loop to store the values you need. So. Instead of: for (k in js1["slides"]) { // Wrong way to set these variables up v = js1["slides"][k]["snips"]; text.x = 0; dur += 5; textTitle = js1["slides"][k]["title"]; console.log(textTitle + " start at sec:" + dur); TweenMax.to(text, 1, { pixi: { x: 720 / 2, }, onStart: function() { text.text = textTitle; } delay: dur, ease: Power2.easeOut }); } You need: for (k in js1["slides"]) { // Wrong way to set these variables up const v = js1["slides"][k]["snips"]; text.x = 0; dur += 5; const textTitle = js1["slides"][k]["title"]; console.log(textTitle + " start at sec:" + dur); // You will also need a new "text" reference if you are planning on having two lines appear staggered TweenMax.to(text, 1, { pixi: { x: 720 / 2, }, onStart: function() { text.text = textTitle; console.log(textTitle) } delay: dur, ease: Power2.easeOut }); }

Agreed, is necessary some sample code to get the real issue you're facing. In the mean time here is a simple example of using GSAP in a for loop changing a the string in a PIXI text instance: Also the issue in your code could stem from the fact that you're adding the onStart callback inside the pixi:{} config object, note that I don't use the pixi wrapper in this case, since I'm not tweening any PIXI related property, just updating the text. Try removing the onStart callback out of the pixi config object, try again and let us know how it goes. Happy Tweening!!!

Hi Rick, Well, actually passing anything between sibling components or up the chain in React and Vue is a bit complex actually, that's why you can rely on Redux, MobX and VueX. If you're starting with React, I think that @OSUblake's approach is the best. Is simple and works in the way you expect. Right now my recommendation would be to get more familiar and comfortable with React and then move onto using Redux for more complex tasks and when your apps need to observe changes in the app's state. In that case you could use redux observable, but as I mentioned, it would be better to start with the basics of redux and then move into more advanced stuff. You can watch this free course by Dan Abramov (creator of Redux and part of the React team) about getting started with React and Redux: https://egghead.io/courses/getting-started-with-redux Also this article by Lin Clark is very good as well: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6 Happy Tweening!!!

Thanks! Ok, I can clarify: When the GSDevTools script is simply loaded (not instantiated with GSDevTools.create()) the onComplete in your callback fires twice (strange and unexpected). When GSDevTools script is removed the onComplete fires once (good and expected). When GSDevTools script is loaded and GSDevTools.create() is called the onComplete only fires once (good and expected) When GSDevTools script is loaded and GSDevTools.create() is called GSDevTools is really small and has a big red square ( strange, yet expected once you realize thereis a css rule for div in the css panel ) We will have to look into this deeper. Sorry for the confusion.

Hi dazzafact, Welcome to the forums! Could you provide us with a reduced case example? It's very hard to troubleshoot blind. You speak of runing a loop for a video slide show but, I am not sure when this loop is being called, what else is happening at the same time, where you are setting your tweens. I also see a reference to the pixi plugin and so on. There are too many variables here, not enough for us to help you with. We suggest making a demo in CodePen but any online editor is fine as long as we can tinker with the code and see the bare minimum to reproduce your issue. In case you need help with CodePen:

Hi @Racke1940, Welcome to the GreenSock Forum. Look at the GreenSock Learning Center. And try something on CodePen ... Here's a taste: Start happy tweening ... Mikel

You're using global, var, and let variables inside a loop. That's asking for problems. And you probably shouldn't loop through a object like that. Fixed. const tl = new TimelineMax(); js1["slides"].forEach((slide, i) => { const delay = dur + (i * dur); tl.set(text, { text: slide.title, x: 0 }, delay) .to(text, 1, { x: 360 }, delay); });

Hi, Is not completely clear to me what you're trying to do here. You want to delay the animation of the x position but not the text or you want different delays for the text and the position?. Something like short delay for the text and long delay for the x position tween?. Please clarify this in order to understand correctly what you're trying to do and how to solve the issue. Happy Tweening!!

Hi Racke, Welcome to the forums. If you are using spans and divs chances are you will not want to use Animate CC. Animate CC exports to HTML5 canvas which doesn't contain any divs or spans. I would strongly recommend Mikel's advice above. Start small. Learn a bit of the GSAP API with just a few elements in CodePen. Carl

It'd be super useful to see a codepen, as @Shaun Gorneau suggested, but I think I know what you're referring to and I'm sure there's a solution. Remember that in any animation, things update at certain intervals which very likely don't land EXACTLY on top of your start/end times of your animations. So let's say your animation is running backwards and it's ALMOST at the start, like at 0.01 seconds in, and then the next update the parent's playhead lands at 0.02 seconds before that animation's startTime. Of course at that time it'd fire the onReverseComplete...but remember, we're 0.02 seconds off, so if you jump to the end at that time, of course it'll follow your instructions but if you're expecting it all to be synchronized with other animations that don't have that 0.02 seconds offset, it ain't gonna happen. See what I mean? This is actually one of the things that makes GSAP special - we factor all of this in when we do repeats whereas most other engines simply trigger a restart onComplete (meaning those gaps/inaccuracies creep in on ever iteration and things get out of sync). In other words, they do it the way you're doing it (manually reset the playhead in a callback) which isn't entirely accurate. Solution: //you can use this in your onReverseComplete to factor in any time gap... //offset is how far the parent's playhead has moved beyond the start of the animation in reverse var offset = tl.startTime() - tl.timeline.time(); tl.time(tl.duration() - offset); There are actually a bunch of other ways you could do this too, but I don't want to overwhelm you Does this help? If not, please provide a codepen and we'll take a peek.

Please try svgOrigin: TweenLite.set('.home__links-container', {svgOrigin:'250 250'}); More info: https://greensock.com/gsap-1-16 Hopefully that helps. Happy tweening.

I actually had this happen to me a few months ago and then completely forgot to ask about it. Whoops. I encountered the same thing Carl mentioned. I had DevTools loaded in a pen but didn't use it with create() and I got a double fire of the onComplete. It happens in all modes of CodePen and I just tried it on a regular web page with the same result.

Hi @RolandSoos Sorry your having this issue! Have you tried to run your codepen in debug mode instead of in edit or full mode. The reason being is because edit and full mode run in an iframe. Whereas debug mode runs without an iframe. I frames can cause issues with browser console and the javascript parser. In your codepen URL change /pen/ to /debug/ and check the console and see if you see it fire twice. Like this /pen/ to /debug/ : https://codepen.io/anon/debug/ZmVoXQ See if that helps, this way we can rule out if codepen is causing an issue with GSDevTools? Thanks and Happy Tweening

Hi, Sorry, I forgot to implement some onComplete. Its complete now ... Let him dance ... Mikel P.S.: If somebody could hide 'view resources', it would be great! Jack (?) - thank you! Occasionally, I'll reveal what the coder says.

I'm sorry but I'm not seeing GSDevTools in your demo. When I added it I did not see the onComplete fire twice. Perhaps I'm missing something, feel free to clarify or provide a demo that clearly illustrates the issue without us having to edit it. Thanks

Hm, I'm not aware of any complex tutorials that'd show you exactly how to recreate something like https://www.sartobikes.com, but I guess I'd just say to think of PIxi like the rendering layer, and GSAP is simply the tool that can animate anything you want. So it isn't as if you need to learn some secret ways of mashing the two technologies together - just build in Pixi and reach for GSAP whenever you want to animate any properties. If you're not familiar with Pixi yet, I'd definitely recommend spending some time getting up to speed. From what I understand (and I'm no expert), it's a very rich canvas-based platform. @OSUblake is our resident expert around here. And there is a GSAP PixiPlugin to make things easier. Good luck with your project! I'm sure that as you get up to speed with both GSAP and Pixi, you're gonna be really excited about what you can accomplish.

Without seeing the code driving this, it's pretty tough to diagnose. I would recommend putting this in a CodePen (as simplified as possible while illustrating the issue). Perhaps one thing you want to look at instead of reversing the timelines is "yoyo". https://greensock.com/docs/TweenMax/yoyo

Hi Carl, This was super helpful! I'll reply further if I run into any other issues. Thanks again!

Hi and welcome to the GreenSock forums, Yeah, you can use splice() to grab any number of elements from the end of the chars array that is created by SplitText. //grab the last 3 characters and reverse them var lastChars = myText.chars.splice(myText.chars.length-3,3).reverse(); Here is a simplified demo: Here is an explanation of splice() http://www.tothenew.com/blog/javascript-splice-vs-slice/

There's a bunch of different ways to pass stuff between siblings. I guess it matters what you mean by "stuff", as in is this stuff something that should be kept in sync with your app's state? Maybe @Rodrigo can chime in and offer some advice since he's the resident React expert around here. For something fast and simple, you can't go wrong with an event emitter. I added EventEmitter3 along with the ThrowPropsPlugin to your demo. When a throw ends, that component fires off an event along with its end y position. The other component will do a short animation, and log out the end y position. You could have your listeners setState if needed. https://codesandbox.io/s/x9y5m6qvyo

Hi, QuickTip of the day ... just do it ... Mikel

Performance. Rendering textures is significantly faster than rendering vectors. Animating 1500 circles. Rendering the circles as vectors is giving me around ~15 fps in Chrome. When I switch to rendering the circles with a bitmap/texture, I get a solid 60 fps.

You should not need over 1000 lines of code to accomplish this animation, which is relatively straightforward. I think the original developer of this banner ad was trying to make it responsive so that the assets resize and reflow according to the browser window, which makes the code more complex than it needs to be. I've done some experimenting with responsive ads and found it not worth the effort in getting it to work properly on different browsers. IMO, it's much more efficient to create individual sized banner ads since I don't have to go through such rigorous testing. Banners are not web-sites after all. It might be a lot simpler for you to redo this ad from scratch vs modifying someone else's code. You'll also get some valuable experience writing code on your own. You can write the HTML / CSS / JS from scratch or use a HTML boilerplate. In either case, you should only include what you need i.e. remove CSS, HTML or JS that you don't need thus making the code easier to read / maintain and for a smaller file size. Most banner ads like this should also not need jQuery, SASS, etc.

Hi @merchantcantos Welcome to the forum. Edge is super duper fussy when it comes to masks. (& many other things) The main thing to try with Edge when you have a drawSVG mask is to add a tiny rotation that will force Edge to draw it correctly. I wrote about that here. Edge also doesn't like when you group things in a mask element. Another thing I always recommend is to mask a group rather than an individual element. Even if you only have one shape, I still recommend grouping it and masking the group. Here's a fork of your pen with those changes. It seems to be working correctly in Edge for me. Hopefully that helps. Happy tweening and welcome aboard.