themepunch

We are looking for a GSAP Professional who is interested in a full time or Project based position at ThemePunch. The job would involve working on the Slider Revolution Core and its environment. If you bring high level skills in the areas of GSAP, JavaScript, CSS and you have a portfolio you can present us, please feel free to contact us with reference material. Looking forward to hearing from you, Krisztian ThemePunch

Hi Guys, Testing GSAP3 in the latest Wordpress 5.3 Environment, loading your latest gsap and enque Wordpress Standard Plugin called mediaelement.js conflicts: - New Clean standard Wordpress Installation. - Load GSAP Library and use wp_enqueue_media(); will break the Page with JS failure. mediaelement-and-player.min.js?ver=4.2.13-9993131:7745 Uncaught TypeError: Cannot read property 'userAgent' of undefined mediaelement-migrate.min.js?ver=5.3:1 Uncaught ReferenceError: mejs is not defined wp-mediaelement.min.js?ver=5.3:1 Uncaught TypeError: n(...).not(...).filter(...).mediaelementplayer is not a function Please try to install a Clean Wordpress and install the Plugin attached (which only load GSAP and use Standard Wordpress Function wp_enqueue_media()) and you will see the issue. Hope this can be fixed. Thanks again and have a great day ! ThemePunch testpage.zip

Hi Jack, Thank you for your quick feedback. It seems that the issue is fixed, if there is any further issue i can see i will let you know ! You and GSAP Rocks ! A fantastic Update ! Thank you for all your hard work !

Thanks for the quick answer ! Yes, you are right, the definition is not correct, but as you also wrote, i think a warning would be more elegant in this case. The array filtering i show as "quick solution" above does the trick so far, however it maybe not that performant as it could be handling this inside greensock. Really appreciate your feedback so far ! And i forgot to say, I love the new version of GSAP ! It is simple the best ! Thank you for putting the amazing work into this fantastic engine ! Cheers, Krisztian

Hi, trying to tween any undefined element will break the rest of the code. See Console log in my example: gsap.fromTo(["#test",undefined], 0.5, { x: 100 }, { x: 0 }); will cause this: Uncaught TypeError: Cannot read property '_gsap' of undefined at W (gsap-latest-beta.min.js:10) at new Tween (gsap-latest-beta.min.js:10) at Object.fromTo (gsap-latest-beta.min.js:10) at pen.js:2 Of course we should try to avoid to run tweens etc. on undefined elements, however it always can happen that some selector etc. delivers undefined elements which is not tested by the sourrounding environment before providing it to gsap. Not to make a big thing about it, but in my opinion it would be great to make these checks inside Greensock to make it more stable ? Quick solution would be from the User side to filter out null elements somehow like this: gsap.fromTo(["#test",undefined].filter(function(el) { return el!=null}), 0.5, { x: 100 }, { x: 0 }); What do you think guys ? Thanks, Krisztian from ThemePunch

Thanks for the quick answer! Indeed, it seems that the Fix will help! Will wait for the next official version, until that using 2.0.2 I am glad for the great support and for this brilliant Software! cheers and happy Holidays ! krisztian

Hi Guys, I made two examples (same code). First is with version of TweenMax 2.0.2 the second one is with 2.1.2. TweenMax 2.0.2: codepen.io/themepunch/pen/OGQgYL (working) TweenMax 2.1.2: codepen.io/themepunch/pen/BEYdQj (not working) Please see how the clip-path attribute is break / different in latest version. Hope you can figure it out ? Thanks a lot, Krisztian from ThemePunch

Thank you for all Your Feedbacks. Yes, I also reported the issue yesterday to webkit Bugzilla and they acknowledge it as a bug. However i found a solution (i have better read your answer Jack earlier, than i could save some time) which force redrawing the content in Safari. I used the z transform and/or rotationZ in my case, but just like you sad a background-color or any other not used attribute on that element would help here. So i am good for now with this small change. The Problem with IE is still existing, i do agree with you Visual-Q ! For that i have some other plan Thank you again ! As always , you Rock Guys ! And i just can not imagine living without your Fantastic Greensock Plugin ! Cheers, Krisztian

Hi Folks, When GreenSock write matrix3d on CSS Transform based on force3D / Perspective / TransformOrigin the clip-path css attribute animation just break in the Latest Safari (12.1 (14607.1.40.1.4)). See our Example above in SAFARI Latest Version, or on any iOS latest version !! . Click on Working and Not Working version to see the Effect. The only Different between those functions are the "force3d:true" setting ! Hope you have a good idea for this ? Thank you, Krisztian from ThemePunch

Please close the Ticket. Issue has been solved due some Timeline / Tween Reorganisation. As always, GreenSock Rocks ! Thanks you and cheers, Krisztian

Hi folks, i have a very strange issue where Tweens and Timelines "pauses" during the Page is scrolled in Google Chrome. Seems that this happens until the Timeline / Tweens runs at least once. I can not reproduce this in a CodePen, however i was hoping that you can give me some direction i could look for. Basically i have multiple Timelines (using latest TweenMax engine 2.02, TweenMax and TimlineMax) where a few dozens of Animations happens. When I scroll (continuously) the timelines and Tweens pauses. Short breaks in the Scroll let the Animations continue immediately until next Scroll event triggers. I added an onUpdate event listener on the tweens and timelines, and it clearly shows that it is not triggered (Tween paused) during the scroll. I made for fun a test and it shows that by creating an own Scroll Listener and triggering the Timelines / tweens from there works fine. (Like tween.time()). Any Idea would be great ! I am looking for this since days. Thanks and cheers, Krisztian from ThemePunch Ps.: In case you may want to see this, the video here shows the issue very well: https://we.tl/t-jYeIIZplVH

Thank you for the clarification here, really appreciate it. Indeed "disabling" 3D would hurt in the most of the case how Customers use our product, so will check if i can somehow reduce the parameters and needs on splits on demand, or optimize DOM Manipulation by preparing things in "CPU Free time". Thanks again and wish you a great day ! Greensock forever ! You are the best ! Cheers from the ThemePunch Team.

Hi Carl, i think you get me wrong here. I dont claim about the overall time it takes, i can totally understand what happens in the background, and i am aware that using split text will have influence on the DOM creating hundreds of elements and tweens. The Question was, if you have an idea, why IE Edge needs almost 12 times longer than Chrome, and Safari around 9 times longer. Browsers are different, And if so, maybe there are better way to have different paths in the engine which use more optimal calculations for Safari and Edge than for Chrome and Firefox. Maybe it is worth to take a look on that ? Thank you for your feedback again and greetings from Cologne, Krisztian

Thank you Jonathan again for your time ! Indeed i used some dynamic switch which will auto add z transform to elements which would may interference iwht other objects. It is a pity that thing need to be browser based limited. Customers of our products can create amazing things with a WYSIWYG Editor, and at the end we need to limit their Creativity by browser issues and bugs. Still, i am more than thankful for your ideas and inputs here ! Awesome Service as always and awesome Tool ! Cheers and happy Tweening to you al l!

Amazing Guys! Really appreciate it ! You Guys truly are the best, does not matter how this ends. Greetings from the ThemePunch Team, the Rock Solid users of GreenSock since ages !!

Hi, Thank you for your answer Jonathan. I am sorry to tell, but the result of your changes are just exactly the same like my one. They break in Safari on a Mac OsX (Tested on 3 different Devices). It works on Mobile Devices which is great for the first but not in Safari on Mac OSX. Also it works only due the fact that the parent element gets relativ position. if i change the relative position to absolute on the wrapping layer, it just brakes as well on mobile devices which shows that somehow the stacking container structure is handled there differently. Also, using relative position with top/left definitions on the layer_wrap (see my last example) behave differently on Safari Mac and on Mobile devices and in Google Chrome. I was hope that some kind of preserve-3d transformstyle would force a new stacking container on the layer wrap. Moving things on the "z axis" would change also the distance to the viewer, getting the feeling that the layer is somehow scaled/zoomed so it is definetely not a solution for me. Until Chrome creates a new "rendering area" for the layer_wrap and using the z-index of those containers to decide which elements rendered over which one, seems that Safari somehow merge those different "stacking" areas and shows us a combination of those. I understand well why the layer is cut, and half is not visible, but i want to split those worlds, rendering them independent but still profit of the mix-blend mode and further css futures. Sorry to being a pain and for disturb you guys with something which is not GS based at all. If you wish, please just close the blog, since it is a Safari Issue and not a GS issue. With the deepest thank you and have a great day ! Krisztian

I recognised using stagger in Safari the pre- rendering time can take 6x so long than in Chrome or Firefox. Depending on some further options and combination i.e with cycle it goes up to a 9+x. For dynamic calculated Animations based on interactions these delays and lags in Safari are too big. If you click on the "chars" button in the Example below, and open the Inspector, you will see the rendering time differences between Safari and Chrome. (62,87ms vs 344,54ms) Do you have an idea why this happens, and if there is any way to avoid it ? Thanks and Greetings !

Thanks Carl for the quick answer ! Really appreciate it. Yes, it is also reproducible without GS: I was hoping that one of the Rocket Scientist at GreenSock has some good idea for this. Indeed i reported the issue on different Forums, hoping on some easy workaround. Other way i will need to go extra rounds to build the structures differently. Happy Tweening and thanks again ! Krisztian from ThemePunch

Hi, an issue which maybe has been discussed already, however could not find a solution yet. In the example the bg container and the layer_wrap container must be on the same level to be able to use mix-blend-mode. The Results how it is rendered in Safari and Chrome are different. Wrapping the layer_wrap to set perspective on that container is not a solution for me due the mix-blend-mode needs. rotating the layer_wrapper also not due some other restrictions i have in the project. Would be interested on some nice ideas for this. Hope you guys have an idea ? Thanks a lot, Krisztian from ThemePunch

Thank you ! I read the other post and it brings some light in the darkness. I think i will need to give a second look on the suppressEvent variable as well. Even using Greensock since Flash Time i can learn tons of new things . So again thanks for your feedback and have you all a great day ! Greetings from the ThemePunch Team !

I understand your point however I do not expect to see real "inherited" values by rendering or calculating computed style on demand by greensock. I am just curious why the element get a color:rgba(255,255,255,0); background-color:rgba(255,255,255,0);border-Color:rgba(255,255,255,0); at setting or tweening things to "inherit". I would except color:inherit; background-color:inherit... on the element. I guess i am maybe looking for some kind of clearProps:"color, borderColor, backgroundColor" on the element inside the timeline chain at the right position. However it seems if i add clearProps in timeline, i do not get the same result than i use it as set and let things render immediately. And this makes me my life hard now I am building the new generation of Slider Revolution Builder (see below the editor) and as you can see i allow things to animate combined on element, splited element (chars, words, lines) and even further splits. Setting color behaviour on different levels makes me a headache... Anyway, thank you for your suggestion ! As you also suggested i will need to cache things back to the "roots" of the element to be able to handle always the best way. Have a great one again, and thanks for this amazing Tool GreenSock which is just simple the best out there !

Hi Shaun, Thank you for your feedback. I was hoping to have some kind of "low budget" solution Of course i could pre cache all kind of values and attributes, however in complex environments handling tons of different interactive issues i was looking for to save some extra work. In case this is a "bug" , the developers may find a solution, other way i will need to go the hard way Thanks again and have a great day, Krisztian

Hi Folks, i made an example below. Seems that animating some attributes to "inherit" (i.e. Color, Background color, Border Color) will pick some kind default rgba(255,255,255,0) value instead of picking the parent elements value. I have a complex animation structure with split Texts, where i need to be able to go back to Inherit color which seems not to work right now. The Simple Example i shared below should explain it. Hope you have some solution for this ? Thanks a lot and have a great day guys ! Krisztian from ThemePunch

Yes, i removed the long Post since i am afraid i wont be able to build a proper Test environment for that within CodePen. The problem is already reported by me last year when 1.18 came out and with the latest 1.19.1 the issue still exists. Short sad, on iOS 10 in complex Multi stacked Timelines (TimelineLite and TimelineMax tested also) the Timelines ignores Pauses and delays and jump to the end of the timeline. To reproduce it: - Build a Stacked Timeline structure - Reload the Page on iOS 10 (on iPhone or on Safari Dev Mode) - Scroll the page up/down during the Reload phase In most cases some of the Timelines will simple jump to the end skipping all other frames. Using version 1.17 the problem is not reproducable. Using newer version than that, the problem exists. We are more than interested to use the latest features and being up to date. However we have over 3Million customers using our Product, and having this issue on board presses us to go back to the last working version. Please let us know if there is any way we can discuss about this in some kind of direct form ? Thank you for your understanding and your patience, ThemePunch

Please Remove the Topic. Issue relays on latest TimeLineLite (1.19.1). Issue is not reproducable on version 1.17 or older. So we are back to version 1.17 Thank you, ThemePunch