[Banner backup images]

Indeed. Would you be able to develop this? Some kind of app that distils the last frame of for example an Animate animation?

[Banner backup images]

Great, thanks Emmanuelullo!

[Banner backup images]

Hi all,

 

This isn't really Greensock-related but I was wondering how you guys create backup images for banners, you know those 40k backup images that are needed when JS is disabled on the browser for example.

 

I mostly use Animate CC (in combo with TweenMax of course) and how I do it now is right clicking on the banner (the canvas object) in Chrome once the banner reached its end and then saving it as a PNG, and then also mostly compressing it afterwards in Photoshop as a JPG to get it under 40k.

 

Are there better practices or tools that can automate this?

This is really time consuming.

 

Thanks!

Nicolas

[Scale Three JS object with Tweenmax]

Thanks!

[Scale Three JS object with Tweenmax]

Hi

 

I would like to tween the scale of an array of Three JS objects.

I am able to do this on requestAnimationFrame, but I would like to use Tweenmax:

 

for ( var i = 0; i < meshes.length; i ++ ) {

 

meshes.scale.x = meshes.scale.y = meshes.scale.z = boost;

 

}

 

Any idea how to?

 

 

Thanks!

[Background images not animating smoothly in IE]

Thanks Jonathan, you rock!

[Background images not animating smoothly in IE]

Thanks Jonathan, I know the force3d property and how IE handles SVG's but that doesn't help.

 

I've set up a codepen to demonstrate:

See the Pen zrmxEr by nicolasdesle (@nicolasdesle) on CodePen

 

Please check on IE10 and up.

 

Thanks!

[Background images not animating smoothly in IE]

Thanks guys, here is an example:

http://www.nicolasdesle.be/digitalads/html5/qmusic/index.html

 

In the second frame all bitmaps get jittery when slowly upscaling, from IE10 and up.

 

Thanks

[Background images not animating smoothly in IE]

Hi

 

When I scale-tween divs with background images in them these will not run smoothly in IE. 

Any fixes for this, or is t just the way IE renders background images?

 

Thanks

Nicolas

[Scaling SVG blurry]

Thanks Jonathan, I just added force3D:false and it works perfectly now!

 

This is my code:

TweenMax.to("#logowrapper", 8, {scale:8, ease:Sine.easeIn, delay:.5, force3D:false});

 

 

Thanks again!

[Scaling SVG blurry]

Hi

 

 

First of all, an other big up to the greensock team for their excellent work, I am so happy my transition to HTML was hassle-free thanks to tweenmax!

 

When I upscale an SVG the SVG gets blurry while tweening. When it has finished tweening it gets crisp again.

Any workarounds?

 

Example: http://nicolasdesle.be/svgtest/

 

 

Thanks

Nicolas

[Hover effect]

Thanks Rodrigo!

 

I just changed the css:'background-size:1px 10px' to backgroundSize:'20px 1px' and that does the job!

[Hover effect]

Hi 

 

I would like to create an effect where on hover on a span class with text in it, a line under the text gradually 'grows' underneath it. Like an underlined text, where the underline increases in width.

 

Here's the css:

 

.border {

        background-image: url('img/border.jpg');

        background-size: 0px 1px;

        background-repeat: no-repeat;

 }

 

Here's the HTML:

 

<span class='border'>my link</span>

 

And here's the (simplified) JS:

 

var textLinks = $('.border');

 

textLinks.each(function(index) {

 

            var targetItem = textLinks.eq(index);

 

            targetItem.on("mouseenter", function(event) {

                TweenLite.killTweensOf(targetItem);

                TweenLite.to(targetItem, 1, {css:'background-size:10px 1px', ease:Sine.easeOut});

            });

 

            targetItem.on("mouseleave", function(event) {

                TweenLite.killTweensOf(targetItem);

                TweenLite.to(targetItem, 1, {css:'background-size:0px 1px', ease:Sine.easeOut});

            });

});

 

On mouseenter everything works fine, the line animaties.

On mouseleave however nothing happens (although the mouseleave event is triggered when I log it in my console).

 

 

Anyone knows what the problem is?

Thanks.

 

[Overwrite problem]

Thanks Jamie, that works!

[Overwrite problem]

Hi

 

Here's my JS:

 

var del = 0;    

divs  = $('.nav');

       

for(ind in divs){

            del+=.1;

            div = divs[ind];

            var target = div;

            TweenMax.to(target, 1, {css:"opacity:1", delay:del, ease:Sine.easeOut, overwrite:"none"});

}

 

and CSS:

 

.nav {

    color:#000;

    font-family: 'custom', helvetica, sans-serif;

    font-size: 4.25em;

    opacity:0;    

}   

 

 

 

Problem: the tweens overwrite each other, resulting in this 'graded' effect attached (half opacities).

What am I doing wrong? I want all divs to tween to an opacity of 1.

 

Thanks!

     

[Eight figure animation]

Hi,

 

How would you code a game like this?

http://www.bannerblog.com.au/2006/05/mini_slot_car.php

 

The animation of the cars going in the eight figure, can this be done using tweenmax, or would a simple timeline be more appropriate?

 

Thanks