[Configurable Bounce ease like Back]

Hey guys,

It would be really nice if the Bounce easing had some configuration like the Back easing does.

 

I'd like to be able to configure the bouncyness.

 

Less bouncy objects would maybe only bounce once and not come back up very high

Whereas others might be very bouncy and bounce for a long period and quite high relative to the original drop.

 

What do you think?

[SVGJS Plugin]

Hey Carl.

It's currently part of a project which is wip.

 

I have a demo here:

http://robaldred.co.uk/js-tweenmax/svg/transitions.html

 

Zip:

http://robaldred.co.uk/js-tweenmax/svg/transitions.zip

 

If you need more demos, I'll spend some time over the weekend.

Cheers.

Rob

[SVGJS Plugin]

Hey All,

I have been working with svg.js a lot recently.

I noticed you guys have a raphael plugin, which is brilliant.

 

svg.js and Raphael are very similar however svg.js has the added bonus of being able to work with masks and clipping paths.

 

I have created my own plugin which is basically your Raphael plugin with some modifications, it works nicely for transforming svgjs objects, the only thing it doesn't allow you to do alter the transformation origin/anchor, im currently trying to work this out because svg.js doesn't have native support for this unfortunately.

 

If you're interested at all I've dropped it onto a gist

 

All the best,

Rob

[Using TweenLite / TimelineLite server-side with node.js]

You're right, I've just got in the habit of just always using TweenMax, I'll switch to TweenLite.

Yeh Node is just a container running a javascript runtime I'm just tweening object properties on entities for my game serverside.

 

Thanks for your help, and for developing one of a greatest libraries

[Using TweenLite / TimelineLite server-side with node.js]

Unfortunately I cannot get this working. I get the following error using this technique for TweenMax

lib/TweenMax.min.js:17
+?\)/i,D=/,(?=[^\)]*(?:\(|$))/gi,M=Math.PI/180,I=180/Math.PI,F={},E=document,N
                                                                    ^
ReferenceError: document is not defined

[onRepeat does not fire for each repetition that occurs when tab is inactive.]

Hey Rodrigo

Many thanks for the message, that looks like exactly what I need!

Sorry for the duplication.

 

Rob

[TweenLite.set(target, {z:0.1}) override scale]

Could be a bug, or something TweenLite can't do, Have you tried being explicit with the scale in your set and/or using TweenMax?

 

eg.

TweenLite.set(tween.target, { css: { scaleX:.2, scaleY:.2, z:.1 } } );

[onRepeat does not fire for each repetition that occurs when tab is inactive.]

Hey guys,

Found some behaviour that's causing me issues.

I have an animation of a vehicle, that's yoyo-ing from left to right infinitely. In the onRepeat callback i'm flipping scaleX between 1 & -1 to flip the graphic.

 

The problem happens when the browser tab is not active.

The timeline may have repeated multiple times, however the onRepeat callback is only fired once when focus is returned to the tab.

 

Therefore the orientation of the graphic can become out of sync with the actual direction.

 

I realise that RAF halts all callbacks when the tab is inactive so, but I would have expected the onRepeat callback to be fired retroactively for the number of times the animation has technically repeated.

 

Is the behaviour intended or a GSAP bug?

 

For the moment I have changed my code to manually change direction based on the x vector in the onUpdate callback.

 

Hope I've not rambled too much

Look forward to your reply.

 

Rob

 

[pause and resume all tweens with game state]

Hey Carl,

Thanks for your reply.

 

Here's an example with strange resumeAll() behaviour, it seems that it's because im using a timeline.

http://cdpn.io/ldsfa

 

I will have a look at moving to using exportRoot()

[pause and resume all tweens with game state]

Hi, I've previously used pauseAll and resumeAll when entering a pause state of a game to halt animation.

With the GSAP JS pauseAll works fine, but resumeAll doesn't resume any of the animations that we're paused, I notice the docs suggest both methods are deprecated.

 

Are there any other suggested solutions short of manually resuming all tweens individually?

 

Thanks

Rob

[animating background position buggy x-browser]

I've experienced some issues animating background position. As usual everything is perfect in Webkit

I only care about IE9+, FF, Chrome, Safari.

TweenMax.fromTo($('#rain-' + i), 1,
        {css:{'background-position': ""+rainHeight+"px 0px"}},
        {css:{'background-position': ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone }
      );

This animates the position of a css linear gradient.

It works on everything except Firefox, Firefox just does nothing.

 

However this.... (with camel cased keys)

TweenMax.fromTo($('#rain-' + i), 1,
        {css:{backgroundPosition: ""+rainHeight+"px 0px"}},
        {css:{backgroundPosition: ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone }
      );

...works fine in Firefox, but causes an invalid argument error in IE10 (it's fine in IE9)

SCRIPT87: Invalid argument
TweenMax.min.js line 16, character 20973

For the time being I have implemented the following special case which is grim.

 

    if (document.all && window.atob) {
      // Firefox breaks with 'background-position'
      // IE10 breaks with 'backgroundPosition'
      // bodge to workaround
      TweenMax.fromTo($('#rain-' + i), 1,
        {css:{'background-position': ""+rainHeight+"px 0px"}},
        {css:{'background-position': ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone }
      );
    } else {
      TweenMax.fromTo($('#rain-' + i), 1,
        {css:{backgroundPosition: ""+rainHeight+"px 0px"}},
        {css:{backgroundPosition: ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone }
      );
    }

 

Any suggestions? Is this something that can be fixed in TweenMax?