Jump to content


  • Posts

  • Joined

  • Last visited

srmark's Achievements



  1. Hi, the issue was resolved by removing the jquery plugin, thanks again.
  2. Hi, thanks for the replies. The greensock-based library is provided as is, I just call the pieces function on an element with some options, and it animates it. I'm not at work until next tuesday, so I can only run it and check if it works without the plugin then. It is in the system for a long time, so I don't remember how exactly it is being included, but it might be necessary.
  3. Hi @Jonathan Thanks for the help, I well understand the solutions you linked, but there is a difference in my case. One widget is initialised something like this: $(widget1).wowSlider(widget1Options); The other is initialised something like this: $(widget2).pieces(widget2Options); And the options object does not contain any direct reference to or mention the easing used for the animations in these widgets, the pieces library (which is using gsap), and the wowSlider library both select easing used on their own, based on properties inside the options provided, such as a name for the animation. My issues comes from the behaviour of these specific libraries. It is the gsap jQuery plugin's feature that it overrides/adds the properties on the global jQuery object used by the animate function ("under the hood"), so old jQuery codes automatically run that. The other library, the wowslider does this very similarly, I don't know for what reason (under the same hood), and the properties that conflict (that I found so far) are in the jQuery.easing object, for example jQuery.easing.easeInOutExpo, which are selected and used inside both of those libraries, that's why I mentioned modifications on the libraries, because if I were to create the two definitions named easeInOutExpo and let's say easeInOutExpo_wowslider by the techniques you linked, I would also need to refer to that new name inside the wowslider library, which I want to avoid. Both libraries are already written inside an anonym function closure as you suggested, but they are both given the same jQuery object reference as the one paramter at the start, which they modify by reference, so what I was starting to think as a solution, is to create a second instance of that jQuery object before including those libraries, give that other instance to one of the libraries, so the easing they add are not overriding each other, and when initialising the widgets of the second type, use the second instance reference, something like this: (function ($){ /* library1 defines easings on jQuery.easings object */ )(jQuery); jQuery2 = jQuery.noConflict(); (function ($){ /* library2 defines easings on jQuery2.easings object */ )(jQuery2); jQuery(widget1).wowSlider(widget1Options); jQuery2(widget2).pieces(widget2Options); But I'm not sure if that wouldn't cause any errors, or if there would be any better alternative, please tell me what do you think of this solution. Thanks, Roland
  4. Thanks for the quick reply @Jonathan I don't think this would work in my case because the parts referring to the easing is inside those libraries, and not in my own code, so if I would put one of the definitions under a different property name, I would also need to modify one of the libraries to refer by the new property name, which I want to avoid because it would be complicated, and imo a bad practice, I worry it could cause other bugs. If you suggest this is still the way to go please give some insight. So far I'm thinking about just creating a second instance of jQuery with the noConflict function and give the reference of that instance to one of the libraries, but that also requires modifying one of them. Thanks, Roland
  5. Hi. We have a digital signage content editor with many widgets, and 2 of the widgets use gsap with jquery plugin, and we added another jquery plugin for a new widget (http://wowslider.com/), and a few of the features in that library didn't work, I was debugging for a long time when I found that it conflicts with the gsap jQuery plugin, more precisely the easings defined on the jQuery object, for example jQuery.easing.easeInOutExpo, because the easings share the same name in both libraries, but they work differently, the variable has different function references in the two libraries. Currently the gsap definition is in place, which causes some wowslider features to not work. I tested removing gsap, and then those features worked. I already contacted their support, but they couldn't give a solution, and I want to avoid modifying the code of these libraries. All I would like to ask for is some tips to avoid this issue. Is there a no-conflict option in gsap plugin? Can I separate two jQuery instances for the two libraries? Thanks in advance! Roland
  6. Hi, Thanks again for the replies. After a nice debugging session I found the problem that was causing the moving animations not to be working on our android devices. I had a routine at the start of the page which copied the inline transform values into the browser-specific transform styles such as -webkit-transform, -moz-transform etc, to make it work on all of our devices (this was the intended behavior). I logged one of the element's transform and -webkit-transform properties while the animation was running, and on Windows GSAP modified both of them, while on Android GSAP only modified the transform property, and not the -webkit-transform at all (which hold a basic value of scale(1) rotate(0), that was set only once at the beginning). So it seems like GSAP detected that the device supported the simple transform property, so it didn't bother setting the webkit prefixed one, but the browser actually used the webkit prefixed one when both was set, and I saw from the periodical log that GSAP was working, because the transform property got modified and hold the correct values, but it didn't prevail. I had to disable the above mention routine of mine to make the move animations work. EDIT: The above problem only occurs if both transform and -webkit-transform are set inline, and the -webkit-transform is after the transform, I was able to make a pen to show this problem: http://codepen.io/srmark/pen/PNWXEO It works on Windows, the rectangle moves back and forth, but on Android it doesn't move at all. Making the -webkit-transform come first in the inline style followed by the transform solves this issue, because it seems like the latter one prevails. Overall, using the x and y at the animation seem to help a lot on the performance after I could make it work. About the value calculation, I reverted setting the top and left properties of the elements 0, and instead I leave them at their original values (always set), and substract their original values from the x and y before adding them to the animation, this yields the correct position. I also applied the autoAlpha property, instead of the opacity, but didn't see any noticable impact on the performance. We also tested, and removing the filter effects also had huge impact, so I'll keep this in mind, but also these contents are made by our customers, so we can either remove the full functionality from our software, or just warn them to not use too many of them, but in the latter case the user can still make a screen full of 8px sized text blurred, shadowed spinning zooming and moving if they want, and it will fry their device (this was an actual test page I made for stress tests ). Please remember that these contents are auto generated in our system, so there are some restrictions and limits in the coding practise, some of them are because many contents exist with legacy code. I'm well aware that techniques like adding the shadow to the elements as an image instead of pure CSS is much easier to render for the browser, as Jack suggested, but these are improvements that are simple and convinient only for regular websites' static content like logos, but In my case I would have to find a solution that makes it for dynamic contents, every time a user makes a content in our system, then run it to generate images, store them etc, so it is complicated and resource-hungry (at the generation). Jack, the markup you copied only appears so in the debugging tool of the browser, in the page's source it appears like this: data-styleobject="{"left":"1318px","top":"90px","width":"350px","height":"350px","opacity":"0"}" so it doesn't cause any problems . This is the result of making a javascript object a string by JSON.stringify and setting it as an attribute of the element.
  7. Hi Jonathan, Thanks for the quick reply! While I was making a codepen I found a bug in my generator code which produced the shadow CSS, that caused the drop-shadow to be applied 4 times. I fixed that, so its a bit better. Here is the codepen I made, it's not as laggy as my generated page on android, but there is still a big difference between the PC and the android speed on this: http://codepen.io/srmark/full/YqNrXe/ I also applied the changes you suggested about left top x y, but the main problem is still the opacity fade being slow. I also noticed that the background picture on the page had a hue-rotate filter, just as in the codepen, and that also has some impact on the animation speed. So overall my question is, can I make that codepen faster by maintaining the same functionality? And as a secondary problem, changing the left and top to x and y, caused another weird bug. First all the elements positioned had their position applied twice, or seemed like so. I think this was due to the element having top left inline, and when the animation changed the x and y, it just added a transform to the element inline, not changing the top and the left at all, but the transform values were not relative but absolute to the element's original position. So I also added that wherever I add an animation that changes x or y, I also set the left or top of the element to 0, like this: if (propertyNameAsParam == "x") { propertyTimeline.set(currentTag, {left: 0}, 0); } if (propertyNameAsParam == "y") { propertyTimeline.set(currentTag, {top: 0}, 0); } propertyTimeline.to(currentTag, duration, valueObject); This code fixed the problem on Windows/Chrome completely, but caused a problem that on android all elements collapse to the top left corner, and they dont animate their position properties at all. This is the new page: https://storage.googleapis.com/content.myshopdisplay.com/193/1377/8551/index.html This is a preview image taken on the android device: image link It seems like GSAP can't animate the x or y on android (5.1) at all. I can make another codepen for this later if you want, but my work hours are over for now, and I wanted to share, so hopefully you can spot the problem in this. Thanks again! Roland
  8. I'm working on a digital signage system's content editor interface, which produces HTML5 pages. I've recently replaced the animation engine of these generated pages from pure CSS3 to GSAP and I'm experiencing some cases when the content animation has strong lag and freezes on our android devices, while on Windows/latest Chrome it runs well. I also tested some GSAP codepen demos on the android devices, and those run well, so I think I'm doing something wrong here, and would like to get some help. One of the devices I tested on (possibly the strongest hardware): http://www.gearbest.com/tv-box-mini-pc/pp_282317.html The example page: https://storage.googleapis.com/content.myshopdisplay.com/193/1377/8401/index.html About the code in the page: The page has a transform scale applied to stretch the content to full screen (this is not animated). The page first moves in letters one-by-one by animating the top and left properties, to make the word EURONICS. This runs laggy but still ok on android. After that a big background picture fades in by opacity animation, then 4 stars also appear on the right side by opacity animatin in a delayed sequence. The strongest lag happen when the big background picture fades in. It takes about 1 second on PC to animate that, and on android it takes about 30-60 seconds. Each page element has their custom CSS values in the inline style attribute. The animatin timelines are generated at the start of the page: I create a timeline for each element new TimelineMax({repeat: repeatAnimation, repeatDelay: 0, paused: true, smoothChildTiming: true}); Then I iterate over the style properties that should be animated (not all on an element's style attribute, I store the animated properties in a separate container), I create a timeline for each of these, this constructor function gets no arguments. After that I iterate over the time positions I stored. If this is the first value at position 0, I use the set() function: propertyTimeline.set(targetElement, valueObject, 0); If it's not the 0 position I calculate the exact duration of the tween and add it to the timeline with the to() function: propertyTimeline.to(targetElement, duration, valueObject); When all values processed for a property I add the property timeline to the element's timeline at position 0. The element's timeline contains only these property timelines. When this is done to all elements I iterate over all of the element timelines and call play(0) on them. I do not add the element timelines to a main timeline because they can have different length, and they can repeat, and they need the ability to restart at different times. It's understandable that too many effects can cause lag, but this page is not too effect-heavy in my opinion, so I'm clueless why is it so laggy. It is also very inconvenient that this lag actually extends the full duration of the animation, while with CSS iirc it only skipped frames when it was too laggy, but It finished the animation at the desired time (this is important for our system because these pages are being played one after one, and the pages change at a fixed time) What could be wrong here? Thanks in advance for your help! Roland
  9. Hey, I still have some questions in the above comment and I would appriciate an answer, thank you!
  10. Well, my guess on why is it laggy was your first thought too, using too big images, and also animating the whole page. I meant to say that I reverted only the onupdate manual calculation things only. I left the plus container in, it was included even when you checked yesterday, and it does have relative position. For this particular effect I set the transform-origin right before the animation started on the timeline, and that was with jQuery, but now I replaced with gsap set. The other jQuery css property setter and append methods run at the loading of the page, only at the beginning, so I thought they don't affect the animation. As I mentioned, this page is generated with our content editor, and the elements' style is set inline since a long time, many contents were generated this way, so even if I wanted to change some things that are in the source of the index.html itself, I couldn't, because we don't have a way to modify all of our generated html files yet. I can only modify my js file included in all pages, and a style sheet included in all pages, containing basic stuff. So after clarifying these I would have some specific questions about what should I do: 1. Should I define the top and left properties of the main containers, even if they are constant 0px? 2. Should I take the elements' inline css properties when the page loads, and generate a style tag to put them into via javascript before the animations start? 3. Anything else? Thanks again for the help!
  11. Hi, Thanks for the quick replies. Here is an example page of the animation I described. Now I understand the effect of force3D and what it does. I was working on the performance of this, but couldn't make any noticable difference. I made an additional wrapper to put the animation on, instead of the body, and tried some manual updates in the onUpdate function to animate the scale, rotate etc functions of transform instead of the matrix that the gsap does, but saw no benefit, so I reverted to the original. The pages where I use this animation are generated in our digital signage system's content editor, and are much like slides, so that's why It wasn't that scary idea to animate the body first, because it's not a whole website. Carl, the demo you posted looks cool, but I guess I can't use that in our system, because we use HTML5 based pages, and we couldn't migrate all of our features to svg.
  12. Hi, I'm working on an animation where I animate the scale, and other properties of the body tag. The scale goes from a value of 1 to a bigger value to create an effect like in Prezi, to zoom in to an element of the page. Just as is, this makes the element shown very blurry, but I found out if I set the tween's force3D property to false, it will be sharp (good) at all times. But this also makes the whole animaton very laggy. I tried to change the force3D property while animating, so it renders only a few times during the animation, to both avoid blurriness, and lag, but I don't know how to set it in the onUpdate function. So my question is, if I set the onUpdateParams to ["{self}"], what can I do in the onUpdate function with that object? (I tried calling .set() and .updateTo() on it)
  13. Jonathan, I wrote about that in my previous comment: Our system is a digital signage solution, using Android and Chrome devices, and those support filters near completely, so browser compatibility issues of filter are negligible for us. I didn't look into SVG filters much yet, but so far the coding seems more complicated, and our content is produced by an UI where average non-programmer people can make their contents by clicking. I may see about it to make it our future feature in our editor.
  14. Thanks for the reply OSUblake, but my main problem was to animate those properties independently. I managed to solve it, I modified JeanPz's pen, I hope it can help somebody: http://codepen.io/anon/pen/xZWPLL Main features are animating multiple filter effects of the same element, fully independently, with different eases. Properties can be changed by different timelines, it can animate rgb and rgba colors, and any other numeric value. Tested only under Chrome 47, Windows 8, but should work under most browsers that support CSS Filter, it sets the normal filter property and the -webkit-filter property.