Leaderboard

The trigger property might be what you're looking for.

Somebody touched on monitoring performance in this post... But if performance is a problem, you probably need to change what you're animating. If you're messing with SVG or HTML, you should look into using canvas or WebGL. And taking a page from game development, there's a reason some games are capped at 30fps. Animations will appear smoother running at a constant 30fps over a framerate that is constantly changing.

That's really useful Blake! Thanks so much. Now go enjoy your Saturday - even superheroes have a day off... Buzz

Yep. That's clearing and resetting the entire canvas. Setting the width and height attribute changes the internal dimensions of the canvas. And it's faster to set it directly. // This does the same thing... $("canvas").attr({ width: page.w, height: page.h }); // as this... canvas.width = page.w; canvas.height = page.h; One thing that is confusing about canvas is understanding width and height. Changing the internal size is different than setting the size with CSS. Changing the size of a canvas with CSS causes it to scale, just like an image. To match the resolution of HiDPI screens, like retina and phone displays, a resize should actually look like this. var resolution = window.devicePixelRatio || 1; // size/resize the canvas canvas.width = page.w * resolution; canavs.height = page.h * resolution; canvas.style.width = page.w + "px"; canvas.style.height = page.h + "px"; context.scale(resolution, resolution); And there's some other stuff that isn't needed in the code, like setting the globalCompositeOperation to source-over. That's the default. And the closePath() call isn't needed if you're drawing a circle. closePath() is the same thing as the "z" command on an SVG path.

You're placing a bunch of unnecessary restrictions on your animation. And I see transforms in your html that do the same thing as xPercent/yPercent. Transform origin does not affect x and y. If you want to move something from the center instead of the top left corner, then offset your points half the width and height of the object your animating.

It was because you were updating canvas height n width on every frame, though I don't know why it should cause the issue. I also changed the implementation, so instead of using for loop I am using delayedCall and looping through one element at a time.

Hi @anteksiler, The pen of @Sahil is showing such an example - even if you take the same labels. So what is your topic. A snippet is a snippet. Please show a complete pen where we can see your progress. Kind regards Mikel

Hi @anteksiler, Do you want this effect? Best regards Mikel

Hi @dgu, If you update all necessary variables and functions after each new point, it should work - @OSUblakecould say something concrete. Here only roughly matched Best regards Mikel

Hi @dgu, If you just change the path (id = "path"), the drag function works as desired. Is this your point "by adding points manually"? Happy dragging ... Mikel

I just posted my first question. Then I was browsing the forum and saw your post. I hope to be writing a post like this in 12 months. Awesome, Inspiring & Motivational. Thanks!

Oh, I haven't used Angular 1 in a long time. The problem is that you are creating all the animations inside a directive, which reference other directives, which might not be ready. So you're basically creating 3 timelines with 3 animations each, for a total of 9 animations. That of course isn't correct. A parent element should do that if you're trying to create a timeline, but only when all the child elements are ready. For this it would be better to use latest version of Angular 1, and use components instead of directives. https://docs.angularjs.org/guide/component So you should create a parent component for the voices components, and then inside the $postLink hook of the parent component, create the timeline and animations. I don't have any demos that do something like that, but here are a couple of demos that use components. And here are a couple good articles on using components and hooks. https://toddmotto.com/exploring-the-angular-1-5-component-method/ https://toddmotto.com/angular-1-5-lifecycle-hooks

That's pretty neat effect! The best alternative is to just animate each element individually. Yes, it requires more tweens, but performance should be the same or better, and you don't have to deal with weird rendering issues.

Nice! You should also check out this thread for a simple three.js plugin.

If you're talking about animating transforms, like x and y, HTML is faster. But keep in mind that you can animate SVG the same way by animating the root SVG element or by using an SVG as the source for an image, and animate the image element. SVG performance starts to drop off when you animate elements inside the actual SVG.

Hi @danehansen You might be looking at that wrong. In browsers that have implemented will-change, animating scale is going to behave a little different than other transforms. https://jsfiddle.net/OSUblake/h8j24tn4/

Hi @Bartonsweb Sorry for the delay. I've been out of town for over a week, and didn't get a chance to check out the forums. I'll make that demo this weekend.

My circles are set to cx="0" cy="0", so there is no need to find the center. All the x and y movement can be read from the _gsTransform object.

I don't know what the code looked like before, but changing the width or height of a canvas erases everything and resets any changes made to the context.

There are a ton of browser inconsistencies and "gotchas" when animating SVG with CSS. For example, transform-origin issues: https://css-tricks.com/svg-animation-on-css-transforms/. There are many, many more that GSAP solves under the hood. Another example, IE and Firefox both have bugs that affect progressively drawing SVG lines, measuring path length, and Safari can leave rendering artifacts in certain cases. I'm curious: why did your client disallow JS for the animations? I'm biased of course, but I think it's a pretty bad tradeoff to dump JS for buggy (and headache-prone, verbose) CSS. Are they concerned about security or something?

Although SMIL never gained popularity in the post-Flash, modern web era I know some people were pretty impressed with it. My guess is that it will probably be more reliable and powerful than CSS where supported, but as Jonathan noted it's official support isn't something you can put too much stock in. If javascript is out, I think you'll have to proceed cautiously with fairly low expectations.

Hello @SteveSargent and welcome to the GreenSock Forum! You can see here that SMIL is not widely supported and has been deprecated in many modern browsers. https://caniuse.com/svg-smil Chrome has it deprecated, but un-suspended it in 2017, but still SMIL was replaced by the web animations API and CSS animations which in itself is still not very compatible or very consistent. And you wont be able to use SMIL in IE or MS EDGE since its not supported. I really don't see you using SMIL unless you want inconsistent animations that wont work cross browser. You could use CSS animations but you wont have the control like you have with GSAP for complex transforms on the fly. But that is just my two cents. Happy Tweening

GSAP has some built-in mechanisms to adjust for lag on-the-fly. Take a look at the videos and info on lagSmoothing() here: https://greensock.com/gsap-1-12-0 If you still have questions or problems, let us know. Unfortunately, there is really only so much you can do to make things look nice while you are hammering the processor.

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

how about this

and also go through a few pages of @OSUblake's public CodePen demos: https://codepen.io/osublake/pens/public/ Lots of spliney stuff in there.

Hi @hisco, Here's a little playing around - because I like coffee and enjoying the slowness ... Enjoy slow food animation ... Mikel

@Lovestoned Yes technically you can use ThrowProps with Draggable. But the way it is setup now the drag only allows it to animate a certain distance. You would need to add the GSAP ThrowPropsPlugin (which is a Club GreenSock Membership plugin). Then you will need to add the GSAP ThrowPropsPlugin JS script and then add throwProps: true to the Draggable.create() parameters. But again you would need to change the functions of next and previous to go past their predefined distance of just moving to the next or prev slide. GreenSock allows you to use the GSAP ThrowPropsPlugin JS on codepen so you can play and test with it. But keep in mind that the GSAP ThrowPropsPlugin will only work on codepen and not outside of it.

Your timeline and draggable were competing against each other to control the same element. I have removed timeline and updated next/prev events. Though there are still issues, like if you click quickly, resize etc. But this should point you in right direction.

setInterval seems unnecessary because you can listen to event directly. Even that is unnecessary because on play you are listening to tick event and updating everything. GSAP uses requestAnimationFrame so it reduces update calls to 60 per second, that will be best way to go. Also the jQuery UI slider doesn't work on touch screen plus you are not using jQuery, so I think it will be better to go with draggable. In following fork, I have removed many unnecessary calls. If you can't picture what is updating what then writing down will be helpful. But don't worry about it too much even I write unnecessary code many times, just eliminating it simplifies your code. Lastly, for any reason if you feel like you need to use setInterval/setTimeout, I will suggest to go with TweenMax.delayedCall.

Hi @jSwtch, Please take a look at this code: Also try a separate 'pulse' function for the startup animation. And - as an alternative: bind a hover function for the start animation to a container or maybe to window (?). Happy looping ... Mikel

It would be great if in cases like this you could reduce your demo so that it only includes the code necessary to replicate the problem. No need for loops and multiple timelines. It just adds an additional layer of complexity. Being that every time I ran your demo it gave different results of showing different images in different places my guess is that your javascript code is running before your images are loaded and thus the engine has nothing to take a height measurement from. Try adding height attribute to your images or waiting until all the images are loaded.

Hello @Lovestoned and welcome to the GreenSock Forum! Just to add to the Mighty @Carl and @Sahil great advice and examples! I made some quick optimizations so when you animate it animates each slide using matrix3d() instead of matrix() for a smoother animation, by adding a slight rotation of 0.01. Since i was seeing some jank (lost frames) on windows 10 latest Firefox when animating left or right. As well as adding the CSS transform-style: preserve-3d on the .slide CSS rule elements for cross browser compatibility and preventing some browser bugs. Happy Tweening!

Hi @mikel & @OSUblake. Thank you for the great examples, i made it work, and it works incredibly well. I will make sure to post a link, gif or small video when its done Huge thumbs up from here! - Plenge

Thanks for the demo. It seems you were passing bad strings into document.getElementById() You were passing in something like "#bird" as the SectionC param in sceneHelper(sectionA, sectionB, sectionC). when you called the function sceneHelper('#section1', '#owl', '#bird'); Inside of sceneHelper() you were doing var x = document.getElementById(sectionC + i).style.fill and the sectionC + i expression was evaluating as "#bird1" or "#bird2" etc. You can't pass the # into document.getElementById(), you just want to use "bird", "horse", "lion" I've probably made the same mistake a hundred times. Without changing a bunch of code just use: var x = document.querySelector(sectionC + i).style.fill

Hi @jSwtch, The lines 14, 24 and 32 are not necessary - a little mistake ("invalid morphSVG tween value: [object Object]"). The function 'start' unintentionally (?) flashes some objects. Happy tweening ... Mikel

Glad you got it working. Yeah, SVG sounds like a good fit for this. Not really sure what you need for the colors, but if you want a random color on each mouseover you could randomly pull from an Array like:

Thanks a lot for doing that mikel! So helpful. @bparticle I'm in the same boat as Mikel, not really sure what the desired results are. It might help if you could provide a set of keyframes (static) for what the beginning, middle and end state should look like. I'm kind of assuming you want something that looks like an A to morph into a rectangle or square. The hollow part of the A is always going to give you trouble. I did a quick experiment by drawing something that isn't an A and putting a triangle over it For the the thing that looks like a sqaure (#end) I drew a square using the Pen tool starting in the top center and when I was done I added 4 additional points along the bottom so that the bottom points in the A thing had matching nearby points to move to. I also added an additional point in the top center of the A thing so that it would split the A in half and that point would go to the top-center of where I started drawing my box thing. The end result is this. The moral of the story. You may need to finesse things a bit. The morphing algorithm does what it finds to be most efficient. It can't always be what you want, especially with complex shapes with non-matching numbers of points. Note: I left the little triangle white so you can see it as an individual element. In real life it would match your background color.

Hi @bparticle, I looked at the individual parts of the SVG. https://codepen.io/mikeK/pen/5640f95d0efe846102b806e64b98a5dc/ It is difficult for me to imagine what intermediate levels or which final "picture" should arise. One way to control morphing is if both paths contain the same number of anchor points. Best regards Mikel

It was pretty trivial to figure out what is updating what. Actually you need to seek the audio so it will resume from exact time where slider is. So on click event I am setting current time to tl.progress() * audio duration. Also, check this thread as it states some browsers don't return duration so you have to listen to event when metadata is available. Maybe using a audio library will be more useful. https://stackoverflow.com/questions/11203773/how-can-i-get-the-html5-audios-duration-time

BTW you can mimick those dev tools features just from console. Pause from debugger and it will pause ongoing animations. or enter TweenMax.pauseAll() in console and it will pause all ongoing tweens/delayed calls. TweenMax.resumeAll() to resume everything. TweenMax.globalTimeScale(0.5) to slow down everything that GSAP does and TweenMax.globalTimeScale(5) to speed up.

Ya those are for pure CSS animations, maybe you can use GSDevTools to debug what you are doing. https://greensock.com/gsdevtools

Hello @krs! Well, I wouldn't claim that as being 'pure css' as you're toggling the classes with jQuery. There are dozens of ways to animating all divs when one is clicked. You could target a specific class they all share, target all divs that are children of another, or any other way you could think of. But taking the example you have given on the previous post, I've made the following, see if that helps:

Demo that fixes fast clicking, Demo with swipe only. I think to take advantage of all features of draggable, it will be a lot better to create a fixed rotating cube and change the images on the fly as it rotates.

can you post a reduced code pen demo with this specific problem? Following is demo that works fine on play and reverse. If you meant, they should stagger on reverse then you can create two separate master timelines for play and reverse. One with label another without label.

I recently implemented something like this based on that codepen. I tried to lower the animation stress to try and improve the fps. when the fps drop below 30 twice, I kill some of the animation and scenes in order to try and get a better performance for the user. I tried to think of a way to do this before the animation actually starts, but wasn't able to find one. But gracefully degrading the animation seems like a good start Here is my take on it: FPS(30 /* minimum acceptable fps */ , 2 /* how many framedrops is too many */ , false /* true = trigger drops-limit more than once */ , true /* show fps info */ ) .on('drops-limit', function(numberOfDrops) { console.log('~= Animation degradation triggered =~'); /* stop animations and simplify things here. if you want to have several degradations in quality, turn alwaysTrigger to true and change the behaviour based on numberOfDrops */ // MY EXAMPLE: if (ANIMATIONS.complicatedAnimation) { ANIMATIONS.complicatedAnimation.seek(0).kill(); ANIMATIONS.complicatedAnimation2.seek(0).kill(); ANIMATIONS.complicatedAnimation3.seek(0).kill(); // destroy scrollMagic scene SCENES.fightScene.destroy(true); // go to end of animation before killing it ANIMATIONS.fight.seek('-=0').kill(); // just a fix for now, instead of adding a condition in the SCENES // functions ANIMATIONS.text1 = ANIMATIONS.text2 = ANIMATIONS.text3 = { play: function() {} }; } }); function FPS(framesThreshold, dropsThreshold, alwaysTrigger, showDebugBox) { var self = {}; self.framesThreshold = framesThreshold || 30; self.dropsThreshold = dropsThreshold || 2; self.firstDropsTrigger = true; toEmitter(self); if (showDebugBox) { $('body').append([ '<div class="hud">', 'FPS: <span id="framerate">0</span>; ', 'lowest FPS: <span id="lowest">null</span>; ', 'DROPS Below ', self.framesThreshold, 'FPS: <span id="drops">0</span>', '</div>' ].join('')); } var $framerate = showDebugBox ? document.querySelector("#framerate") : {}; var $lowest = showDebugBox ? document.querySelector("#lowest") : {}; var $drops = showDebugBox ? document.querySelector("#drops") : {}; var prevTime = 0; var frames = 0; var ticker = TweenLite.ticker; var lowestFrameRate = -1; var numberOfDrops = 0; ticker.addEventListener("tick", update); return self; function update() { var current = ticker.time; frames++; if (current > prevTime + 1) { var fps = Math.round(frames / (current - prevTime)); $framerate.textContent = fps; prevTime = current; frames = 0; if (lowestFrameRate === -1) { lowestFrameRate = fps; $lowest.textContent = lowestFrameRate; self.trigger('lowest-initialized', lowestFrameRate); } if (fps < lowestFrameRate) { lowestFrameRate = fps; console.info('lowest framerate: ' + lowestFrameRate); $lowest.textContent = lowestFrameRate; self.trigger('lowest-updated', lowestFrameRate); } if (fps < self.framesThreshold) { numberOfDrops++; $drops.textContent = numberOfDrops; self.trigger('drops-updated', lowestFrameRate); } if ((alwaysTrigger || self.firstDropsTrigger) && numberOfDrops >= self.dropsThreshold) { self.trigger('drops-limit', numberOfDrops); self.firstDropsTrigger = false; $drops.textContent = numberOfDrops; } } } } function toEmitter(obj) { obj.eventHash = {}; obj.trigger = function() { var eventName = arguments[0]; var args = Array.prototype.slice.call(arguments, 1); if (obj.eventHash[eventName]) obj.eventHash[eventName].forEach(function(handler) { handler.apply(this, args); }); } obj.on = function(eventName, handler) { (obj.eventHash[eventName]) ? obj.eventHash[eventName].push(handler): obj.eventHash[eventName] = [handler]; } } Here's the code added to a fork of an animation on codepen. On PC, I don't get anywhere near 30fps, but on mobile, if I release enough confetti, I can create lots of frame drops, and the event triggers. I still need to check this on tab change. there might be a problem there. I also implemented this on one of my animations (WIP. link might change): http://kibibit.io/achievibit-demo

Those are all great ideas you have listed. But each browser vendor handles devices and displays differently. And there is no one size fits all type of thing when detecting for features or specific mobile properties. Basically all the things you listed would happen outside of GSAP. GSAP add its core is an animation platform, being able to animate any javascript numerical object or property. So its up to the developer to use various event handlers or feature detection to apply the animation they see fit. To detect the device pixel ratio for retina you can do feature detection and check for devicePixelRatio window.devicePixelRatio: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio But the browser support is limited. http://caniuse.com/#feat=devicepixelratio There is a spec right now to check for device resolution with CSS media queries, but that is still being worked on in the spec. The most important thing to consider is that when animating you want to stick to animating CSS properties like transforms and opacity. Which will give you the best performance. Since those CSS properties can take advantage of rendering with the help of the GPU (hardware acceleration), if you focus on that then you can make sure that the elements get animated without jank (lost frames) at 60fps. Then you don't have to worry about wanting to check for RAM or CPU since the elements will be animating at the highest possible frame rate the browser allows, regardless of RAM, CPU, or display type. Articles i suggest you read: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ https://developers.google.com/web/fundamentals/performance/rendering/ https://www.html5rocks.com/en/tutorials/speed/rendering/ https://www.html5rocks.com/en/tutorials/speed/css-paint-times/