[more info about the lasted update implications?]

I am using it right now in the old way(1.20.4) without import or anything as simple as:

<script src="tweenlite.js">
<script src="draggable.js">
<script src="tweenlite.js">
  
<script>
  TweenLite.set($elem, {something:something});
</script>

 

after updating to 2.0.0 do I need to change anything? does it now support less browsers?(if yes should we use babel on it?)

[Showcase : Stomp - Typographic Intro]

amazing.

little thing that can help you sell more is use js script to build the scene instead of php

[in 1.20.2 sometimes onUpdateParams passing undefined]

Thanks  ?

[in 1.20.2 sometimes onUpdateParams passing undefined]

I think its a bug thats appears in the latest version 1.20.2

 

sometimes when you creating a new tweenlite.fromTo and passing some variables with onUpdateParams the variables not always passing

 

you can clearly seeing this by looking at the console

 

var test = 'test';
var t = TweenLite.fromTo(".blue", 1,{width: "1px",}, {
      width: "200px",
      onUpdate: testbug,
      onUpdateParams: [test],
    });

function testbug(x){
  if(!x) console.log('bug?')
}

 

See the Pen ZyxoKX by anon (@anon) on CodePen

[How to optimise CPU usage]

the internet is full of js\browser performance tips and guide.

 

the best thing you should know that will help you get started is f12>performance tab.

 

rule of thumb is you want to get 60fps so you have 16ms for each frame, if anything take longer start to explore why

[draggable with dragClickables:on prevents some textarea shortcuts]

Thanks working great

[draggable with dragClickables:on prevents some textarea shortcuts]

Hi  its have some similarity but I believe its a different bug about ctrl+a inside textarea when the textarea is inside a draggable element when dragClickables:true,

 

I can verify that draggable is listening to selectstart and when removing this listener ctrl+a is working great..

 

I put a link to a github issue on other library but referencing the same selectstart event bug

[draggable with dragClickables:on prevents some textarea shortcuts]

when there is a input or textarea inside draggable element with 

type:"x",
dragClickables:true,

shortcuts like ctrl+a not working.

 

tested on chrome 56.0.2924.87

 

googling about it I saw this issue https://github.com/react-dnd/react-dnd/issues/178 it seems like the bug is because of listening to selectstart

 

 

 

See the Pen xqPOmw by anon (@anon) on CodePen

[Latest Chrome + Retina performance]

I run across something similar not 1 on 1 but try looking at the gpu memory used, as retina screen probably taking 2x gpu memory. (press f12 than on more tools->rendering->fps meter)

 

if it's not helping click on timeline tab press record  with the retina and without and try to see whats happening

[gpu memory best practice(mobile)]

Thanks.

 

It might be wiser to just set visibility:hidden since that doesn't force a reflow. And I kinda doubt that you need to set transform:none as well. 

 

 

in my case only display:none helped out with performance.

I started doing this hack because on low-middle mobile devices like lg g3 the gpu memory can filled up easily in my case and the animation became really slow and low fps unless I use the display:none.

 

Also be careful because when you toggle display from none to block (or whatever), it requires processing and forces a document reflow

 

 

I noticed it but still I preffer of having 50 ms lags on low end devices vs all animation are laggy

 

Thanks a lot

[gpu memory best practice(mobile)]

what is the best practice of managing gpu memory with gsap?

 

I have 100+ items(each item is complex html) that will need to be tweened somewhen(rotateY)

 

maximum of 4 elements can be tweened in the same time

 

right now when item is needed to be tweened I create a new tween for him and store the tween in tweens array so if some element will be needed to be retweened I can access him without creating new object.

 

I managing this by simple display:block display:none and  transform: none !important elements to free up gpu memory

 

so actually only 6 elements are actually visible anytime in mobile

 

so to simplified it this is the html

<div class "container">
   <div class="tweenable-element invisible element1"></div>
   <div class="tweenable-element visible"></div>
   <div class="tweenable-element visible"></div>
   <div class="tweenable-element visible"></div>
   <div class="tweenable-element visible"></div>
   <div class="tweenable-element invisible"></div>
   <div class="tweenable-element invisible"></div>
   <div class="tweenable-element invisible"></div>
   <div class="tweenable-element invisible"></div>
   <div class="tweenable-element invisible"></div>
</div>

1. do you recommend me to also remove unused tweens with something like kill() or invalidate()?
2. should I also free up the tween after killed from the tweens store array?
3. does unused tween prevent the browser from freeing up memory?

Thanks a lot

 

[setting draggable type to none?]

I can see it working great in the example but it has the feeling of some hack

 

maybe I can offer a new feature: a null type, it will make a lot of sense even in the examples you gave instead of using invisible div

actually it will be a good replacement for hammerjs for example.

 

Thanks a lot really appreciate your response.

[setting draggable type to none?]

hmm I am new to gsap world so maybe I am missing something, draggable is the only "touch" module in greensock no?

 

I am creating an effect that can be controlled by dragging\touching very similar to slider\carousel but the only thing that change when dragget is the rotateY property of the element.

 

so I don't need any of the default styling options..

[setting draggable type to none?]

I want to use draggable without it setting any style for me while dragging

I found out about zIndexBoost: false to prevent it from messing up with the z index values.

 

cant find anyway to prevent it from dealing with translate3d values, did I missed something?

 

thanks