Leaderboard

You are using HTTP links on HTTPS site so they are getting blocked. Change your cdnjs urls to https. Also note that you are using 'latest' link that actually points to really old version of GSAP. Latest version is 2.0.2. https://cdnjs.com/libraries/gsap

Hello Gabriel, I do not know if this is what you wanted to do, but I have adapted your pen so that it changes the contents of the hover text according to the clicked dot, to achieve this I used the date attribute in the dots, inserting the desired text. Making it easier to manipulate via html, but could create the texts in other elements or via JavaScript. And includes navigation with the prev and next buttons. I hope this helps you in some way: Bonus: I put an opacity system in the dots to know which one is active.

A few comments: filters (especially blur) are very CPU-intensive, so be careful. This has nothing to do with GSAP - it's a browser rendering thing. Various browsers render the same blur value differently. For example, a stdDeviation of 3 is barely blurred in Chrome whereas it's very blurred in Firefox. If you crank it up to 10, you'll notice it in Chrome (and of course it'll be SUUUPER blurry in Firefox). Be very careful about running logic on every scroll event (as in $(window).scroll()) because the browser will fire those VERY frequently during scrolls...like it could be over 100 events in less than a second. That's wasteful because the screen isn't updating any more frequently than 60 times per second in most cases. I'd recommend throttling those. If you look at DevTools, you'll see that GSAP is doing exactly what you're asking it to do (update the stdDeviation value of the blur), but various browsers render the values differently, as mentioned in #2 above. I also believe that some browsers will only render whole values for certain things. So for example, if you animate between 0 and 3, GSAP will appropriately interpolate (with lots of values, like 0.1, 0.1247, etc.) but the browser may only actually render the closest integer value, like 0, 1, 2, and 3. Again, this has nothing to do with GSAP - it's a browser thing. You might want to look into using <canvas> instead of SVG. I'd bet it'll perform better and give you more consistent results (though it's a bit more work). I hope that helps.

What you are trying to do is more suitable for canvas. It seems you are creating really long paths, which gets overwhelming for browser. It can be achieved using 2 canvas stacked on top of each other as layers. Draw your lines on bottom layer with lineCap set to round. And draw your circles on top layer. This way you won't be drawing too many paths unnecessarily.

Where did you read that was a best practice? Get your money back because there is nothing true about that. <use> elements require more memory and can be SLOWWWWWWWWW to render. http://slides.com/rovolutionary/tuning-svg-performance-in-a-production-app#/ Haven't you've asked about the Shadow DOM before? You cannot, under any circumstance, access the shadow DOM of a builtin, e.g. <use>, <video>, <input>. You can access the Shadow DOM of a Web Component, but you probably shouldn't do that either. They are not designed to be manipulated from outside the component. Summary. Don't use <use> elements unless there is an obvious reason. There are reasons, but they aren't common.

Welcome to the forums, @jukoor. It's very difficult to troubleshoot blind - is there any way you could create a reduced test case in codepen with only the essential code to reproduce the issue? My guess is that your _mainmenu.splitAnimationTimeline reference isn't what you think it is. Maybe try to console.log(_mainmenu.splitAnimationTimeline.progress()) before your reverse animation is created and see if it's already at 0 on the second time. Again, a super simple codepen would be extremely helpful in troubleshooting.

Hi @selfishound and Welcome to the GreenSock Forum! Sorry your having issues! To add to all the helpful advice given above When i look at your SVG markup in the HTML panel, it looks malformed, its missing the ending </svg> tag. You will notice after the </filter> ending tag there is no ending <svg> tag. Some browsers can render your code wrong when it is malformed, and cause some havoc when rendered. You should run your SVG code in an online svg optimizer to make sure its optimized and clean from uneeded whitespace. Online SVG Optimizer and Cleanup tool: https://jakearchibald.github.io/svgomg/ Also you might want to place your <filter> tag inside an SVG <defs> tag. SVG <defs> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs <defs> <filter id="logo-f"> <feGaussianBlur id="logo-blur" in="SourceGraphic" stdDeviation="0"/> </filter> </defs> Here are some examples of animating SVG filter blur using GSAP: And this other one animating SVG filter blur: And then there is also animating CSS filter blur property examples: And this other using GSAP to animate CSS filter blur property with the GSAP SplitTextPlugin . Just my 2 cents, hope this helps

this question comes up quite a bit. the demos below each contain a looping sequence of blue, pink green divs fading in and out. they reach repeat 3 times but do something different on the last iteration. this demo shows how to stop an animation before the final green frame fades out on the last frame: This one plays a custom ending animation after the third iteration for the most flexibility and code-reusability combine this method with what GreenSock suggested about using functions to create each individual part of your animation.

Welcome to the forums, @t.marty. As far as I can tell, the GSAP code is working exactly as it should. The reason that last animation doesn't happen is because you're calling pause() immediately after adding that animation to the timeline...so the playhead sticks there (before the animation actually plays). It's sort of like adding something to a playlist on your phone and then immediately hitting "pause". I assume that maybe you meant to set things up so that it pauses AFTER that animation plays, which you can easily do by using an onComplete or a call() or even an addPause(). Lots of options. Frankly, however, I think the way you're building things is rather convoluted with all those conditional statements, keeping track of how many loops manually, building and triggering other animations part-way through, etc. I'd strongly recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/ If I understand your goal correctly, I think you'd be much better off just modularizing your animation code into functions that spit back timelines (or tweens) and just drop them all into a master timeline. That way, you get everything built and sequenced at one time and you're done. No conditional logic, no manually tracking repeats, etc. Let us know if you need anything else. Happy tweening! PS You do know about TimelineMax's "repeat" and "onRepeat" abilities, right? Are you just using TimelineLite to keep file size down? If so, TimelineMax isn't much larger and you're not charged for the file size on any of the major ad networks because all the GSAP files are whitelisted as long as you use their CDN.

Ok i solved it after some extensive logging. It had nothing to with TweenMax, but with my add / remove event listeners for changing scenes. They had wrong / different references to their callbacks, so they didn't got removed. This caused some kind of reference error which was the reason for the animation running only once. Nevertheless thanks, this topic can get closed.

I'm wondering if @OSUblake or @Sahil will be the first to launch: youmightnotneedsvg.com. Or maybe it'll be a joint effort: blakeandsahilsayyouwillgetbetterperformancefromcanvas.com

Reducing the progress value to 3 decimal places ... in Chrome, Safari, and Firefox I don't see too much jumping around (minimal and infrequent ... which is par for the course as far as any of my experience with parallax). 2. I'm not seeing this ... but I do see browser inconsistencies with the way this attribute is tweened. Firefox tween smoothly between the values ... Safari seems to tween in whole integer steps, and Chrome seems to not tween the value at all. 3 + 4. I think this has to do the browser you're viewing this in and the fact that the values are small (0 to 3 then 0) and it is simply jumping quickly to the values (without tweening between the values). ? I tweened from 0 to 40 to 0 just to get something visual happening for my tests (in item 2) I wish I had a better answer Hopefully someone else does

Thanks ...Its Working...Awesome Forum...

No problem. But like I said, every ad network that I know of has whitelisted GSAP, meaning it costs you NOTHING (kb-wise) to use any of the GSAP files including TimelineMax. As for building banners, it's super useful to be able to just do this: var tl = new TimelineMax({repeat:2}); And then it'll run the animation 3 times total. And if you need to run some logic each time it repeats, just slap an onRepeat on it and you're done. But it's totally fine if you prefer to stick with TimelineLite and do things like that manually. Happy tweening!

Thanks for your fast reply @GreenSock I appreciate the detailed explanation of possibilities for this issue, which I will go through one by one. If I still am not able to solve my issue after this, I will post it here. About your note regardin TimelineMax we really use the lite Version because of the file size which many publishers want to keep as low as possible. As long as I can solve all problems I currently face, I will keep using TimelineLite, so I don't have to rewrite the code in case TimelineMax is unsupported. Anyway, I may reconsider switching to TimelineMax when I find a feature that helps making banner animations simpler.

That's great, tks for all support

@selfishound When it comes to animation/tweens/motion ... I would choose GSAP exclusively (I know, surprise there ?). What I mean is ... choose one, not two. Also, you're affecting the same property on the same element, which is why it will jump around. So ... I think it would be best to apply one tween to #logo, and the other (parallax) tween to a parent wrapper. That should give you better control. Here is a CodePen illustrating what I'm getting at.

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); });

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 }); }

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!!

Extensions are published by Google/AMP Project, so it's not something GSAP could just make. They are working on an Animate CC extension, so there is a possibility that they might allow an animation library if it meets their guidelines.

Hi @tri.truong, This is an option, a bit tricky Happy tweening ... Mikel