Leaderboard

Performance optimization is a pretty huge topic, so it's very difficult to know exactly what's causing the problems on your particular page. In general, the biggest problem tends to be the browser's graphics rendering, so make sure you're affecting the smallest number of pixels possible, that the bounding box for those changes is as small as possible, and that you're not animating things that could affect document flow (like top/left, margin, etc.) If you still need some help, feel free to post a link or a reduced test case so we can see what's going on. Happy tweening!

The progress() method is available for tweens too. https://greensock.com/docs/TweenMax/progress() If you have a bunch of loose tweens, I'd recommend a timeline for easier control, but that's just my two cents worth. Happy tweening.

Hi @Mantvydas Relative positioned elements should animate just fine. You said the animation is sometimes sluggish. Did you mean on the first play or randomly? If it's on the first time your timeline plays you may want to try this: tl.progress(1).progress(0); // this will record all the values upfront. I also don't know what those elements are and how big they may be. How hard are you pushing the browser? Are they the only thing animating or are they part of a timeline with hundreds of elements moving at once? If you can put together a demo, we can get a better idea of what may be causing any sluggishness. If there is an issue, it's unlikely to be a GSAP related problem. It's most often browser related as that's where all the rendering happens. Hopefully that helps a bit. Happy tweening.

Thank's again mate, works perfectly

@GreenSock thanks for the tips! I forgot that loading time affects the performance of animations, therefore I minimized the video from 60MB to 5MB, added some sexy grid to cover this low quality and everything works sweet For production I will also download the video on website preload so everything should work basically in an instant. Cheers! NOTE: Moving any animations to canvas and SVGs seems to have lower impact on the video playback.

Hi @smallio Your mask timeline breaks after the first click because its already been played. You can solve that by playing from the beginning of the timeline. maskTL.play(0) Hopefully that helps. Happy tweening.

Posting because I found a solution that worked for me (and to also remind myself if I run into this in the future) In my case, I was given some banners developed by someone else and they were using embedded HTML SVG's which had DUPLICATE style PROPERTY within a few instances of <svg> tags. The solution was to merge the css styles into 1 property, see screenshots. That should make it work, I HIGHLY RECOMMEND that moving forward to run all banners through the GDC HTML5 Validator which would fire off an error if there are leftover problems. https://h5validator.appspot.com/ Best of luck!