Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About srmark

  • Rank
  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, suc
  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 jQ
  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
  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
  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 p
  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-bo
  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 beginni
  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 co
  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
  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