Sahil

It's not really a GSAP problem, when you animate elements using className, GSAP animates whatever the difference those class create. In your case, you have box-sizing as border-box, which when you change padding causes the height to change. So in order to animate class GSAP MUST animate height, which gives your parent element inline height. So when your child element animates, parent element has it's own height instead of auto height, so it won't animate along with the child element. When animation completes, GSAP like usual will remove inline styles set while animating class which causes the jump. If you put together many such different classes that affect each other or parent and child in MANY different ways then you will see such weird behavior and GSAP can't put logic in the place to address such out of control situations. What you can do is, 1. force height auto by using !important 2. First change padding of parent element and only then animate height of child element. 3. Manually animate height of parent and when animation completes, set height back to auto. 4. Use content box as @Jonathan suggested and as you are using flexbox you don't need to set width 100%, element will set itself to 100% inside the parent.

Here is how you can snap on press. Check the comments in demo from following thread, it will explain how it works in details.

@GreenSock Would it be possible to pass scope/current tween or as third parameter to modifier function? So ratio can be accessed using this.ratio/parameter.ratio instead of using tweenReference.ratio? It can simplify some of the code. For example, any tween inside the timeline can be used directly instead of having to define it separately and then add it into the timeline. In my demo above, I had to loop through all elements and create reference to each tween, which can be simplified if there was way to access current tween inside modifier function.

I thought of testing performance, and created this demo. I don't see significant amount of drop in the performance on PC. On mobile though (Moto X Style and Chrome CPU throttling), you won't see drop for about 50 elements but for anything more than that your frames start dropping mainly because you are reading values from DOM on every frame. If you decide to optimize further and willing to complicate your code, you need to track your values on resize, scroll or whatever event that causes them to change. So if you don't read values from DOM on every frame then you get about ~50FPS performance for upto 100 elements and it starts dropping after that. So you should plan everything in a way that you won't need to use responsive tweens and use it for only scenarios where it is absolutely necessary.

Scale is going to be exception and few other properties like skew, you will need to use modifier on scaleX and scaleY. Though you can use same function as modifier on both properties. Performance, I have never noticed any negative impact on the performance but it depends on how much calculation you are doing. I wouldn't use it for every tween unless it is necessary. @OSUblake is master of modifiers plugin, he will know better.

Now that you are moderator, you will have option to claim topic. Though don't trust it too much. Congrats on becoming moderator.

@bparticle Blake has provided you really great and robust demo which will work in all scenarios with zero to minor changes, it all comes down to how you will implement it in your project. And when CMS gets involved it just gets broader. Like, what if you have different elements from different parents that open modal on click? What if then you want some modal to auto-open? Then what if there is already another modal open? etc scenarios. You can take different approaches with most basic approach of creating two modal objects that will respond to two different click events and will present text from two different sections. More flexible implementation will be where you pass different parameters for color, section etc and just use single modal object that will be used throughout the site. Then third way I can think of will be by using data attributes that will be used to create/track all modals throughout the page. Following is very basic demo of two modals, that you can implement if have few modal objects on your site. Anything beyond that just becomes general programming and CMS related question which is way too broad and beyond this forum. Somebody else might take interest to help you if they find the topic interesting but chances are slim.

Thanks Blake, those examples are identical. I looked up skia and it is interesting too for something advanced. I also read about paint objects though not sure if I read it somewhere else or through one of your posts. And thanks for intense clap. Actually I am below average and I think every regular member is a lot smarter than me. Except one I guess, though I can't name anybody.

@OSUblake I was going through the article about optimizing canvas performance and was moving my context state calls and path calls out of the loop because I was just using same stroke color. While doing that I removed beginPath method and noticed heavy lag. So I thought to ask you but later it didn't make sense to not use beginPath in any conditions. But as you are curious so here is the demo of what I was doing. I did few tests and when you remove beginPath your frames will drop completely(at least on my PC) and ram usage will spike, which makes sense as it will just create some super long path. About saving path, when I landed in android forum I noticed an object something like new Path but I was almost sure that HTML canvas doesn't offer anything like that. From what I searched, it is true that there is no such method to create path object. So I was just wondering if moveTo, lineTo calls can be used to construct path but using library would make more sense here or custom API that we can use to construct/save path. About the particles, I visited three js page and spent 5-6 hours going through every example. (maybe more ) So I was wondering if these libraries use some kind of particle engine or it is just magic of webGL or something else. Because I see great difference in three js examples and 2d canvas performance. But I wanted to go through it first before asking you too many crazy questions.

You can use modifiers plugin to calculate values before applying them so your tween will continue playing on resize as if nothing happened. Though if your current tween inside the timeline is not active then you will have to manually set it's position on resize.

Check the demos in following thread by @OSUblake

Nothing specific, plus my question was silly. I will get back to you when I have more specific question.

Ya @Acccent is right about padding being animated and causing the problem. But I was wondering why that should happen? It is happening because you are using box-sizing as border-box so changing padding changes height and width of your box element. You can stop using border-box. Or you can set the parent element's height to auto !important.

@DevSaver We had few questions recently about this similar issue, some of them were caused by local files. And others were because CSS file that applies pseudo elements was being loaded after javascript file. You can see that happening in following demo. If neither solves the issue then we will need more information like, what kind of setup you have, whether you are using latest files and if it happens in all browsers or some specific browsers. A demo would help, if you can't reproduce it on codepen then a link to live site or reduced case demo from your server will be helpful.

Actually I have never played with these filters but what I managed to figure out so far is they are like pluggables. You take one or two filters and plug them into another, it is really interesting topic but I will have to dive deep into docs to figure out everything. So far I managed to do the following demo but it shows dark edges on circle. Maybe @OSUblake and @PointC can suggest something, but I guess using clip will resolve this as well.

Well nothing particular, just was working with particles and forgot to begin and end path so was just curious if we don't begin and end path for context then if it creates really long path until page is open. I will have a lot of questions in near future about canvas once I sort out things. One quick question for now, is it possible to save path we are drawing to canvas by using all moveTo, lineTo etc methods? or it makes more sense to define path first and reference it to draw on canvas? Ya I used to hate specs and would think, 'who can even read this stuff?'. But recently I have found that some of things are easy and in depth to understand there. Edit: that was silly question from me, obviously path will get really long with each frame. Sometimes I get fooled by per frame execution.

The thread you linked has all demos that only run on page load, most probably OP wanted it that way. If you want your clock to run like normal clock then it should track time every few milliseconds. So in your code you just need to update time inside your showTime function, all four variables datetime, h, m, s need to be updated so they will have new time. The clock hands are being positioned by using flexbox and yPercent as -50, that will center them at bottom end. Transform origin is set to '50% 100%' which is at the bottom of the div so it will rotate clockwise from bottom. The rotation value is post-fixed by '_cw' which makes sure that clock will only run clockwise.

You have typo, it should be TimelineMax. Also, are you just including TimelineMax? You will need TweenLite and CSSPlugin to make it work. You can include TweenMax instead that includes both CSSPlugin and TimelineMax and few other common plugins.

You need to use feDisplacementMap and pass two sources to it using in and in2, which would be result of turbulence and the source graphic.

I think Craig's both posts should be merged together and posted as blog.

Thanks Blake, I will continue then. About the beginPath and closePath, that is interesting. What if we draw to canvas without calling either method? Does that just create super long path throughout the execution? Because I noticed browser freezing if I don't use those methods. BTW just accidentally landed on android forum and realized whatever we learn to do with canvas can be ported to any platform without too many changes, which is really cool.

Here is the part 2, I should have just maybe made it into week long series rather than trying to finish it in 2 parts. After about 45 minutes in both parts, I could only finish the basic effect. Not sure if I should make part 3. I might just switch to making smaller videos rather than something longer like this but will see how it goes. As for making videos, it gets overwhelming at times but I am enjoying it and think it will only benefit me.

As far as I can imagine you just need to worry about current content and new content without worrying about other pages. You can write your timelines by using functions and feed your new content to it to perform transitions. Following tutorials show how you can create complex timelines using functions, which you can reuse by passing parameters.

Well it's okay, we all miss something obvious. The reason it shows up is because you are working with entire timeline so when you play from certain label entire timeline jumps to that point and it will affect all elements as if timeline had played to that point. Unfortunately I don't think there is way to prevent this behavior. I mean what if you have overlapping tweens? What should timeline do? It creates this complexity. You might want to take some different approach. Can you give us more details about what you are trying to do? so we can suggest accordingly.

Ya it should work unless you are using it locally then it won't work in chrome. You need to open your page from server, a local server would work as well. Also, TimelineMax is included in TweenMax.