[After Effects? :)]

am here

[Scale with text shaking the div]

Is there any update on this topic ? Still my text is glitching 

 

I have read the detailed blog about will change written by Carl i think , But still not sure how to fix this issue

[GSAP play suppress events]

Hi

 

I know there is a way to seek gsap timeline using

t1.play(time, suppressValue)

 

so if i set the suppressValue to false , all the previous events(add callback, onstart, oncomplete) will be called right ?

 

Is there a way to enable onComplete events alone without enable all the events? 

[change the global timeline duration without changing timescale]

Hi @mikel

 

i am sure about the delayed call , but what am asking is am trying to get the toal progress 

so if the repeat is more the total progress will be somewhat like 0.8-0.7 while you pause it in the end 

 

i want the progress to be 1 when we pause

[tween repeat to finite time]

Hi this is a new question

 

lets consider that i have a timeline t1

 

the total duration is of the timeline t1 is 8 and but i want that to repeat once , but the total time should not exceed 12 seconds

 

so basically the first loop will be a normal animation and the second one would be a part of it

[change the global timeline duration without changing timescale]

@mikel thanks, yes i understand

but see in the following link

 

the time is keep on increasing

 

See the Pen ExjGVxq?editors=1011 by jeffin417 (@jeffin417) on CodePen

 

i just need the time to stop and end play at 10 seconds 

[change the global timeline duration without changing timescale]

Hi

 

I have a timeline with two tweens

the two tweens are 8 seconds each and repeat is set to be -1 so that it is infinite

 

so the timeline's whole time is now showing as infinite . 

I want to set the timeline time to a specific amount without actually changing the timescale

 

timeline.set({}, {}, time); will work , it works only if the time is greater not lesser. how to actually achieve this?

[Add Index parameter to Modifiers Plugin function?]

On 3/15/2018 at 12:00 PM, GreenSock said:

 

Yep. It's a LOT more complex than you might imagine due to performance optimizations and the flow of code. But I'll spend some more time looking for a way to make it happen (no promises). You can definitely work around it, even in your second example. Here I use an "indexify()" function to which you feed in the elements and the modifiers object and it'll do all that work for you automagically...

 

var elements = [
  "#element1",
  ".stage h1",
  ".slider .slide span"
];

TweenMax.to(elements, 1, { x: 50, modifiers: indexify(elements, {
      x: function(value, target, index) {
        console.log(index, target);
      }
    })
});
                          
function indexify(elements, vars) {
    var a = [].slice.call(document.querySelectorAll(typeof(elements) === "string" ? elements : elements.join(", "))),
        wrap = function(func) {
            return function(value, target) {
                func(value, target, a.indexOf(target));
            }
        },
        p;
    for (p in vars) {
        vars[p] = wrap(vars[p]);
    }
    if (vars.scale) { //scale is an alias for scaleX and scaleY
        vars.scaleX = vars.scaleY = vars.scale;
        delete vars.scale;
    }
    return vars;
}

 

Obviously that indexify() function could be reused as much as you want.

 

Does that help?

 

 

Tried this, Didnt work

[Control Video HTML Tag]

?Just like this

 

See the Pen VPVoVa by sheriffderek (@sheriffderek) on CodePen

 

Here the tween stopped when the audio is paused

 

But what i need is the audio to be stopped when the tween is paused

[Control Video HTML Tag]

Hi

 

Is it possible to control a html video tag's playback using GSAP

 

Right now what am doing is using GSAP's callback function to start two/three videos 

 

But is it possible to pause the video when the timeline is paused as well

[CustomEase memory clear]

10 minutes ago, OSUblake said:

delete Ease.map.myEase;

 

This is kind of what i need , I will check it right away

[CustomEase memory clear]

Hi I have created a tween using custom easeas following

 

TweenLite.to(graph, 2.5, { ease: CustomEase.create("custom", "M0,0,C0.126,0.382,0.282,0.674,0.44,0.822,0.632,1.002,0.818,1.001,1,1"), y: -500 });

 

The above tween is added to a timeline
 

As it is mentioned in  the docs that we have to create the custom ease on beginning of each webpage load, I want to clear/destroy the customease now , 
I have killed the tween and profiled the webpage in chrome but still seeing that the custom ease is not being removed.

 

is there a function like

 

customease.clear() there to do this thing ?

[GSAP scale negative values]

This codepen shows 404

[GSAP scale negative values]

here you can see that the scaleX values is -0.5 but when am trying to set it to -1.5 it flips the image, instead it should grow the image 1X times. Am i doing it wrong? why do i need 0.5? because it need to look flipped.

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

[CSSPLUGIN holding a reference]

Works perfectly , I am tired of saying thanks to Osublake again and again, So I ll buy coffee for you. there you go ☕ 

[CSSPLUGIN holding a reference]

Also as you have stated in the following comment

 

 

I have tried to set a dummy value to a tweenmax like TweenMax.set("#dom", {opacity:"0"}) But CSSPLUGIN still hold reference of the old SVG DOM. 

 

Also do i have to set a dummy tween normally or do i have to set a dummy tween for all the timelines like this

t1.add(TweenMax.set("#dom", {opacity:"0"}))

t2.add(TweenMax.set("#dom", {opacity:"0"})) ?

[CSSPLUGIN holding a reference]

Please check the following codepen

 

See the Pen eLpOXR?editors=1010 by jeffin417 (@jeffin417) on CodePen

 

Here after clicking stop button i have removed all the dom elements (SVG DOM) but it wont be removed in heap memory showing that tweenmax CSSplugin hold a reference of that DOM

 

 

[CSSPLUGIN holding a reference]

I have a master timeline and a number of children timelines which is added to the master timeline through .add() method. I have killed all the timelines but still GSAP CSSPlugin holds some reference just like the image which i have added to this post. Is there anything I am doing wrong ?

[Rotate and scale translation changed]

Sorry , I was testing something else using the same codepen , can you please check now ?

 

See the Pen jpNBGX by jeffin417 (@jeffin417) on CodePen

[Rotate and scale translation changed]

Hi , I am trying to scale/reveal a rotated image from top, but when i try to do that the position changes! Is there anything i am doing wrong ?

 

To Animate in codepen , please click the image

See the Pen jpNBGX?editors=1010 by jeffin417 (@jeffin417) on CodePen

[onUpdate Event skipped for some time]

Hi,

 

I am using GSAP in a react application, I have a timeline in my redux store and the timeline's onupdate listener in a component. I am using the onupdate to move a playhead thumb just like a Player. Every time the onupdate is called i get the value from the timeline._time and change the value for the thumb, the problem is when huge tween is happening (like for 200 items) the onupdate calls are not frequent , but the tween runs very smoothly , is there anyway i can get smoother progress values?

[Split text removing spaces]

9 hours ago, GreenSock said:

Sorry, I totally forgot that I had built in a special option for this - just set reduceWhiteSpace:false.

I thought i clearly read the documentation , I am wrong , thanks man , Awesome answer as always 

 

BTW is that already present in the document? or added recently?

[Split text removing spaces]

11 hours ago, GreenSock said:

Or just a simple <span> with a margin, like:

<div id="blueBox">hi<span style="margin-left:5em"></span>greensock</div>

 

The problem is i am trying to do a typewrite effect when using the thing like you said , the cursor will consider it like a whole div rather than seperate div

[Split text removing spaces]

Hi, sorry for providing a wrong codepen , Please check the following , this is what i am trying to do for extra spaces , but the problem is i cant create seperate divs for empty spaces with splittext.

 

See the Pen BxbOZq by jeffin417 (@jeffin417) on CodePen

 

[Split text removing spaces]

Hi , I am trying to create a typewriter effect , but what i am facing is a issue where when i try to split text with 'chars' it automatically remove spaces and make it as one space for eg if i type "hi                                 greensock" , it changes it to "hi greensock" please check the following codepen, I need spaces to be in separate div because I need to get the cursor placed inside the seperate div

 

See the Pen BxbOZq by jeffin417 (@jeffin417) on CodePen

 

See the Pen aGMaJZ?editors=1010 by jeffin417 (@jeffin417) on CodePen