Leaderboard

Hello @multivac and welcome to the GreenSock forum! To get a full cross browser blur effect you should animate using an SVG filter instead of a CSS filter. This is due to the limit of browser support for CSS filters. But it is getting better for CSS Filters support in each passing year. So i have 2 examples.. animates SVG Filter Blur animates CSS Filter Blur The below example uses the GSAP AttrPlugin to animate the stdDeviation attribute of the SVG <feGaussianBlur> element. And here is an example of animating CSS Filter blur() Happy Tweening!

How deep do you want to go down in this rabit hole? The least complicated is to have a global object that would be your manager. Have it emit events whenever something is done and use listeners to catch those events. If you want to go full on hipster-dev get your head around React or Vue, they have state management plugins that would help. Disclaimer: I'm totally biased towards Vue.

Hi @jorma Are you using the Angular CLI? If so, you can just add your scripts to the .angular-cli.json file, and it will import them for you. "scripts": [ "assets/gsap/TweenMax.js", "assets/gsap/plugins/DrawSVGPlugin.js" ] https://github.com/angular/angular-cli/wiki/stories-global-scripts

Hi @rag GSAP animations are frame independent. If it's recording at 30fps, you can slow your animation by half to get double the frames. But that's not exact. If you want 60fps, you will need to record your animation 1 frame at a time, like here. http://plnkr.co/edit/oZjPbgo9hvqwUYEV7RLi?p=preview

Hi @smallio! The best questions are the newbie questions! How else would beginners benefit otherwise I think I get your question. To pass a callback inside a callback, you need to have a reference to the said callback to be nested. Looking at your code, I struggle a bit because it seems to me you're using jQuery, not a criticism... I don't use it and get very, very, very confused with it as it has a lot of functionality that I am unaware of. So, help me out if I write something here that's wrong or you're already aware of. Side comment, what are all those libraries you are loading in your pen? Do you need them all? Again, sorry if I am missing something, I'm just trying to predict behaviour based on the libraries. Anyhow, back to the theory. It should be something as simple as: Mind you, there are several other ways of doing this. They will vary depending how you want to structure your code, handle scope and whatever library you are using. ps: Nice transition.

That is correct. That could be the issue Joe was remediating with his onUpdate technique. Sorry, only now it clicked what you are reporting. I can see that the blur itself is not tweening but simply toggling off at the end of it. I don't know what's going on from the top of my head. @Jonathan is really knowlegeable regarding browser quirks, maybe he'll stop by with some info. Otherwise, someone else might know. Last-ditch hope is that I will sit down at some point and look into the matter (don't expect a miracle cure, though).

The feeling is mutual. I really don't get the 25 and the 100... What are you counting? What is the 25? And the 100? Why do you need to pass 25 and 100 into the function? If you want to pass more than one value to your function, then you will need to amend your function to accomodate it. Do you want the 25 inside countItUp to be a param? You need to alter your function accordingly. // If your function isn't set to receive more than one parameter then, it won't do anything with the extra params function countItUp(numb, interval) { var secondsLabel = document.querySelector(".js-count-up"); var totalSeconds = 0; // If you want to use either a given param or a default value var intrvl = interval || 25; var countdown = setInterval(function(){ totalSeconds++; secondsLabel.innerHTML = totalSeconds; if (totalSeconds >= numb) { clearInterval(countdown); } }, intrvl); } // Then you will be able to pass two values in your onStart tl.from(countUp, 0.6, { opacity:0, ease:Expo.easeOut, onStart: countItUp, onStartParams: [100, 25] }); Be careful not to be invoking the method when defining the tween // this bad // it will fire immediately, not when the timeline's playhead starts playing this tween tl.from(countUp, 0.6, { onStart: countItUp(100) }) // you need to pass a Params as well tl.from(countUp, 0.6, { onStart: countItUp, onStartParams: [100] }) Notice how the Params is an array, it is so because a JavaScript function can have any number of arguments and therefore, Params must be able to accept any number of items.

Passing params is simple, from the docs (https://greensock.com/docs/TweenMax) (in the gray box): So, in your code you would do something like: tl.from(countUp, 0.6, { opacity:0, ease:Expo.easeOut, onStart: countItUp, onStartParams: [100] }); I make no recomendations. I do not criticize jQuery. It has its place and applications. It is just that when I started back into web development, I was working in banner development and we cannot afford libraries that are not 100% required. GSAP is, otherwise no animation. jQuery not because as @OSUblake says: 'http://youmightnotneedjquery.com/' So, nowadays I'm just more comfortable without it than with it.

Ok so, I had a quick skim over CCapture's intro page and saw that it calls a render() function so, in theory, you could do as I suggested. Have your animation paused and on each call to the render() you move it by one frame.

Hi @mdelp, Welcome to the forums! GSAP is a Tweening library, it will interpolate values of any JavaScript object ( and a bunch of other stuff thanks to plugins). It does only that. It will handle the animation (tweening) bits of what you are after nicely but it will not handle the loading of other assets or managing states or anything else that's involved in page transitions. What you are after (page transition) sounds pretty simple but it is acually a combination of several moving, and independent, parts that together makes is not so simple in the end. You can definitely use GSAP for animating the transition, triggering a callback to load new content and animating the transition in reverse after the content is loaded. You will need to to the loading and state management yourself (or with another library). Hope this helps. Happy Tweening!

@OSUblake my love/jealousy of you unhuman ability to be here, catalogue and remember information never ceases to increase. Please never reproduce, there would not be any webdevelopment work left if there were more than one of you.

How did I not come across this before?!?!? Must set aside time to deconstruct this plugin and understand it. MIGHTY CODEGOD! WE THANK THEE BOUNTIFUL! *bow*, *bow*, *bow*

Hi @simonb, Welcome to the forums! There's going to be no end to talented individuals and agency teams here. You're in for a ride I'm a freelancer myself, based in the UK. Here's some work from last year - you might notice a theme with these as this one client kept me busy for most of the year https://flowers.penhaligons.com/ http://www.penhaligonstimes.co.uk/ http://mysterymansion.penhaligons.com/ - (notice: has music)

Hi @Awmat, 1. Look at this part of the docs: autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); 2. Please take a look at these explanations: https://greensock.com/position-parameter And: try the GSdevtools (more here) - its a great help. Just a few modifications here: Happy tweening ... Mikel

Hm, that's a little tricky in Three.js, but I think this'll do it: var _gsScope = (typeof module !== "undefined" && module.exports && typeof global !== "undefined") ? global : this || window; (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push(function () { "use strict"; var _xyzContexts = "position,scale,rotation".split(","), _contexts = {x:"position", y:"position", z:"position"}, _DEG2RAD = Math.PI / 180, _visibleSetter = function(target, start, end) { var time = end ? 0 : 0.999999999; return function(ratio) { var value = (ratio > time) ? end : start; if (target.visible !== value) { target.visible = value; target.traverse(function (child) { child.visible = value; }); } }; }, _addFuncPropTween = function(tween, func) { var proxy = {setRatio: func}, backward = !!tween.vars.runBackwards, pt = {_next:tween._firstPT, t:proxy, p:"setRatio", s:backward ? 1 : 0, f:1, pg:0, n:"setRatio", m:0, pr:0, c:backward ? 0 : 1}; tween._firstPT = pt; if (pt._next) { pt._next._prev = pt; } return pt; }, _degreesToRadians = function(value) { return (typeof(value) === "string" && value.charAt(1) === "=") ? value.substr(0, 2) + (parseFloat(value.substr(2)) * _DEG2RAD) : value * _DEG2RAD; }, i, p; for (i = 0; i < _xyzContexts.length; i++) { p = _xyzContexts[i]; _contexts[p + "X"] = p; _contexts[p + "Y"] = p; _contexts[p + "Z"] = p; } var ThreePlugin = _gsScope._gsDefine.plugin({ propName: "three", priority: 0, API: 2, version: "0.0.2", init: function (target, values, tween, index) { var context, axis, value, p, i, m; for (p in values) { context = _contexts[p]; value = values[p]; if (typeof(value) === "function") { value = value(index || 0, target); } if (context) { i = p.charAt(p.length-1).toLowerCase(); axis = (i.indexOf("x") !== -1) ? "x" : (i.indexOf("z") !== -1) ? "z" : "y"; this._addTween(target[context], axis, target[context][axis], (p.indexOf("rotation") !== -1) ? _degreesToRadians(value) : value, p); } else if (p === "scale") { this._addTween(target[p], "x", target[p].x, value, p + "X"); this._addTween(target[p], "y", target[p].y, value, p + "Y"); this._addTween(target[p], "z", target[p].z, value, p + "Z"); } else if (p === "opacity") { m = (target.material.length) ? target.material : [target.material]; i = m.length; while (--i > -1) { m[i].transparent = true; this._addTween(m[i], p, m[i][p], value, p); } } else if (p === "visible") { if (target.visible !== value) { _addFuncPropTween(tween, _visibleSetter(target, target.visible, value)); } } else { this._addTween(target, p, target[p], value, p); } this._overwriteProps.push(p); } return true; } }); }); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } Does that work for you?

I wouldn't say no to being taken to taste one of those cakes from miss Emma Dodi.... I'll be in London tomorrow and thursday...

It is not mandatory to use the callback. If I remember correctly, the reason why Joe did that was because, at the time, there was an issue with how the filter was being rendered and something was bugered up. It's fine to use just the CSS plugin. Just make sure you test on the browsers your target audience uses the most.

Hi I've tested again it was something else causing the issue, my bad. The objects were being cleared from GSAP after 2 seconds. Is there a way to customise or disable this cache?

is xxx.vars.onComplete carry any event? is the callback example available in As2 too? thanks Update: Ok I found that adding onComplete:MyFunction,onCompleteParams:["{self}"] it will return the event with its target. thanks

You can have a look some of my works at: https://www.adsspirit.com/portfolio/ I can design beautiful STATIC, GIF and HTML5/Responsive banners for your advertisement needs.

OooOOOooo! Gossip! ! ! ! It ain't me so, now I'm curious!

Nice job @mikel!

Thanks for the response. I thought this but for some reason in my test the objects just hang around indefinitely and build up in memory. Could be something to do with the dev tools / what I'm logging to console, so I'll build a proper test to post here. For now I am manually removing the target from _internals.tweenLookup when I kill() and its back to using no memory again. Thanks

Hi @Awmat, Some typos eliminated and this is your pen: Is the process as you expected? Kind regards Mikel

Wow Blake, I really appreciate how helpful you are in helping the participants in the forums, I really do leave to ask you here after you have researched a lot and have not found any solutions and it is of extreme importance these supports that you give, I will make an outburst here if you have someone who indentify, I started to venture into web development about a year ago and I decided to do it myself, I never worked in an agency or any other place that had someone to give a direction on front end development. I was learning alone as the need arose and I wanted to make my projects more interactive. And thanks to you I see that my development improves every day. Sometimes it seems kind of lazy to come here to ask you something that is simple and obvious to you. But for those who are starting it is a super challenge and every detail that you show in the code of support that you make of a horizon for those who are in search of new knowledge. Something that maybe alone would never be able to achieve. Thank you sincerely on behalf of all these helps that you give us, it is very Important! Thank you.. @OSUblake @Sahil and the other moderates.

It likely has to do with the unique id in the default code in the html file. From 2017.1 - 2017.5, they introduced a unique number called "composition id" that gets created for each "new" FLA created. I put quotes over 'new' because if you copy the FLA file it still uses the same comp id (You have to create a new file from the menu up top to get a new unique comp id). In the JS file it exports out from a normal HTML canvas export, you'll see something like this > lib.properties = { id: '24565gh6788...blahblahblah'... This gets referenced in the default HTML that is exported out. Animate Commons probably doesn't have that included in it since that was created before that change was made by Adobe. You can probably get it to work by implementing that compID check in the file that gets exported.

Hi @mannycode, The code, the CSS and especially the concept of mediaqueries are indeed too complicated. I can only agree with Carl. Here is just a rough implementation of my view of things in the sense of KISS: Keep it simple and stupid! In this sense Mikel

It's probably just a scope issue. Since you're trying to call gotoAndPlay() on the "this" object, it should actually look like: TweenMax.delayedCall(3, this.gotoAndPlay, ["seq2"], this); Does that help?

It's Plugin Plursday! hmm... maybe not.

Hi venn pls try like this : var MasterTl = new TimelineMax(); var redMove = new TimelineMax(); var redRotate = new TimelineMax(); var blueMove = new TimelineMax(); redMove.to('.red',1,{x:200}); redRotate.to('.red',1,{rotation:180}); blueMove.to('.blue',1,{x:200}); MasterTl.add(redMove); MasterTl.add(redRotate); MasterTl.add(blueMove); document.querySelector('.blue').addEventListener('click',function(){ MasterTl.remove(blueMove).reverse() }); http://codepen.io/MAW/pen/YwxZmO