themepunch

Hey Zach ! Thank you. Really appreciate your quick answer. Will update my scripts. Cheers and have a great Thursday evening !

Sorry if this question has beed asked earlier and/or if i oversee some basic thing here. If you take a look on the example here: https://codepen.io/themepunch/pen/RwNzbPN You can see that the transform attribute set by css style of the "object" has been extended by the gsap set function from translate(-50%, -50%) to translate(-50%, -50%) translate(50,0) Is this the way it should work from now on in gsap3x or it is a bug ? Thanks in advance and cheers !

Thank you Jack ! Just seen the update and it works perfect now ! You guys are faster than a speeding bullet !

Lovely ! Somehow i overseen that page ! Great solutions i can see there ! Thank you and have a great Weekend !

Yeah, it costs 0.002ms per Tween. We have customers with over 250+ elements tweened dynamically. Even if it does not feel like a significant cost, I think a solution in core will be the better variant. Thanks again, i added the current workaround until the fix is released. Cheers and happy weekend !

Can you guys please help me with figuring out how to use skewX and skewY in the new GSAP3 version ? Looks like it has a different Behaviour than before in TWeenMax 1.18 i.e. See my examples: Older Version (i.e. TweenMax 1.18) : https://codepen.io/themepunch/pen/mdyoyKO Newer Version GSAP3 : https://codepen.io/themepunch/pen/GRgegOj TweenMax 1.18 ( use matrix) gsap3 ( use css skew now) Hope you can give me a hint ! Thanks a lot ! Really appreciate your help !

Awesomest ! That not just help but makes me the happiest Man alive The z fix for Safari is something i was fighting also since years. Do you think it will have big effect on complex tweens ? We have a lot happening in the same time, and i am afraid to call onUpdate from all kind of tweens, may have some side effect on things? Brilliant solution again! Thank you !

Guys, please help me to understand why things looks different when i use transformPerspective + transformOrigin vs transformPerspective + 'transform-origin' as shown in my example here: https://codepen.io/themepunch/pen/QWwYOYv If you inspect the elements you see that different transform origins get set on those objects. All animations use transform3d , however at the first example the transformOrigin get set via 2 axis (x,y) and the position of "pages" calculated via x,y,z,rotation BUT in the second example the origin get set by 3 axis (x,y,z) and the "pages" have on position x,y,z 0, only rotation is adapted. Older version GreenSock managed by matrix3d, and animation looked well. I would like to use the transformOrigin and the transformPerspective, however would like to understand why the pages shown up like in the 2nd example? ps: The reason why i dont want to use 'transform-origin' that the elements get "zoomed" versus solution 1. Perfect is Solution 3, however i must set transformPerspective 0 to achieve that...

Appreciate your quick answer. Question was for fallback in existing codes of course. Why would anybody go for long terms... Cheers.

Hi Folks ! https://codepen.io/themepunch/pen/WNbPEbE The most (all except Linear) easing can be referenced as string in old form ("Power3.easeInOut") in new form ("power3.inOut") and also as object Power3.inOut which is great. However the Linear ease has no "fall back" in this old string form. I guess at one point things like that will be depricated anyway, so you can maybe ignore this ? Thanks and greetings from Cologne to all the Brilliant Devs and busy Forum Geniuses !

Wow ! Cool ! I think it is great to have this on board. I will definitely remove my workaround and use your solution if it is on board ! Brilliant Jack ! Really appreciate all your effort and hard work on this ! Thanks a lot and keep up the great work ! Cheers!!

I totally understand that you try to keep things small and lite weight. Means i will manage from now on to transform margin, padding, border-width and border-radius by their 4 different "values". Since this issue is for all those style attributes the same: https://codepen.io/themepunch/pen/jOEvjgJ No Problemo ! Thanks for the feedback, and now i know what to do ! Wish you a great weekend !

That should be a simple example without giving too many inputs. Let me make it more interesting than: https://codepen.io/themepunch/pen/YzPOQGG As you can see, the interpretation is still wrong. And to be honest i was hoping that there is a solution without the needs to set individual sides/corners etc. This issue is the same for borderWidth, padding, margin etc. I think gsap should first check the calculated/computed style and animate from there and also convert short hand settings before animating. It worked well in pre versions. Maybe there is a better solution here ?

To stay at your Example for BorderRadius. A border radius Animation with different amount of digits will come up with an odd result -> https://codepen.io/themepunch/pen/YzPOQGG This worked well in the older GSAP (2.x). Since we have a lot dynamic values, where we did not have any protection against this in earlier version, i thought it worth to ask if you already have a solution, or a gsap util, converter, option for this ? Thanks a lot and cheers !

Yes ! They work perfect for my case ! Thank you Jack for the super quick update ! Love it !

Amazing ! Thank you for the Answer ! Whatever direction you will go it will be good. I can understand the idea behind keeping things simple, and i guess the utils.shuffle would maybe the better way on long term since it has more effect with same amount of code at the end on the library side instead of only extending the "from" in stagger. Just like always, awesome Answer awesome solution ! Have a great weekend guys !

Hi Guys, I just enjoying the brilliant possibilities of the new gsap 3.0.5 Library and wondering if there is a better way, or maybe a possibility to extend the stagger from option like shown in my example. You have already start, end, center, edges which is nice. However i miss 3 interesting art , "random", "center single" and "edges single". In the Example i made you can see that the original from stagger animates in pairs by center and edges option and not single. Also a Random i was not able to find. So if you have a better, quicker solution than i done in the pen, or you maybe can integrate those options in the future please let me know ! Thanks again, and just amazing how lovely gsap works after update from 2.x to 3.x !! Great Work ! Cheers, Krisztian

I thought @GreenSock fixed that, but it looks like this might be a separate issue. On my side the beta file worked well. If there is anything else i can see i will let you know ! Thanks a lot for your effort and update ! As Always, brilliant Support and Great Product ! Cheers, Krisztian

Hey Guys ! Thanks again for all your effort and help hier ,just like with any other issues we had before. We all love GreenSock here at ThemePunch and are Big Fun Boys. We have to say a Big thank for all the guys like OSUblake, Sahil, ZachSaucier, Jack and all the others who are Hard working for Free !! (Amazing) to give us always a Hand and show us the direction if we lost. Respect Guys ! Just keep up the great work and wish you all the best for GSAP3 ! It Rocks !!

Hi Guys ! Really appreciate all your effort so far and happy that you dive into this. What my (limited) understanding / worry is, that even Mediaelement fix the issue their side, it would not hit the few hundred million installations which already exiting and running outside the world, means GSAP would break the site so far its loaded before the mediaelement libraries (even if it is not GSAPs fault). I don't think that all the WP folk will just make an update that quick. So if you have a solution / workaround here without relaying on mediaelement / wp, i think you are on the safe side. Thank you again and wish you a great weekend Krisztian

https://codepen.io/themepunch/pen/ZEEZKmR Loading the two scripts shows the error. This mediaelement.js is loaded almost in every Wordpress installation in the backend.

I totally agree with you that this part might be a problem caused by WordPress but since WordPress is used by 35% of all websites worldwide currently I thought it might be worth checking if there is a workaround. Otherwise Greensock would run potentially into trouble on millions of websites. Please correct me if I am wrong here!

Hi Guys, Really appreciate all your Feedback during the last 24 hours. Amazing Resonance ! We get know a lot great developer and we are happy that we could find less than 24 hours a perfect Candidate. Thanks again for this great Product, thanks for the brilliant Forums and have all a great Year ! Cheers, Krisztian from ThemePunch

Yes, the error comes from the Standard Media plugin from Wordpress, however this happens when GSAP loaded. If we dont load GSAP, or we load GSAP after the media plugin from Wordpress loaded, the error is not existing. If you download a clean new version from Wordpress and load GSAP and than enqueue the media plugin (wp_enqueue_media(); ) which is standard Wordpress function, you will get the error. Means GSAP set / change something on a global level which is than not anymore available for the next coming Wordpress standard plugin. So it is GSAP related. I sent you in the first message a simple demo plugin which shows the case. The problem even if i load the GSAP after the mediaplayer, it is not guaranteeed that the next loaded plugin not breaks than. I hope you understand what i mean ? If you need more details, please let me know, Krisztian

Good Morning ! yes, this is a workaround we use also, somehow still don't feel safe. Would it be possible to take a look into the root of the conflict and check if something else maybe need to be more "sandboxed" in gsap ? Thanks for all your effort and for the best Tool ever ! We really appreciate your hard work guys ! Cheers, Krisztian