Spinning images

[DiscoStu]

On GreenSock's home page, part of the animation at the top is the different browser logos (Safari/Chrome etc) spinning from one into another.

 

I want to do exactly that with a set of photos. Does anyone have an example of the code to do this?

[GreenSock]

It's just a tween of scaleX and opacity. And then I hide them when necessary. Here's an excerpt from the home page animation:

var iconTimeline = new TimelineMax({repeat:1}),
    icons = $("#browserIcons img"),
    i;
for (i = 0; i < icons.length; i++) {
	iconTimeline.fromTo(icons[i], 0.6, {scaleX:0, opacity:0.4, z:0.1}, {autoAlpha:1, scaleX:1, ease:Power2.easeOut});
	iconTimeline.to(icons[i], 0.6, {scaleX:0, opacity:0.4, ease:Power2.easeIn});
	iconTimeline.set(icons[i], {visibility:"hidden"});

}

[Rodrigo]

Hi,

 

I got beat this time

 

I crafted a different approach:

 

See the Pen piHch by rhernando (@rhernando) on CodePen

 

But Jack's code is crossbrowser, while my solution doesn't work in IE9 and older.

 

Rodrigo.

[GreenSock]

Yep, exactly - Rodrigo's example technically looks a bit better in terms of being 3D, but since older browsers can't render 3D, it simply wouldn't work. I opted for the version that fakes a 3D feel but works in older browsers. If you don't have to worry about older browser support, I'd recommend the more realistic one from Rodrigo. 

[Carl]

Great job, Rodrigo! Love it. 

[Jonathan]

yeah, too bad IE9 and below don't support backface-visibility .. Cool effect!!!

[DiscoStu]

Guys, both examples are spot on, thanks very much!!

 

I will go with the 2nd as I only need to support Chrome for what I am doing.

 

Thanks again!!

[DiscoStu]

Hi guys

 

I've hit a problem that I'm struggling to solve. If I follow option 2 but have a large number of images, after nearly a minute, the transitions go screwy. See this example...

 

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

 

Any advice on how to get this work with a larger number of images greatly appreciated!!

 

Stuart

[DiscoStu]

Hi guys

 

I've hit a problem that I'm struggling to solve. If I follow option 2 but have a large number of images, after nearly a minute, the transitions go screwy. See this example...

 

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

 

Any advice on how to get this work with a larger number of images greatly appreciated!!

 

Stuart

Actually I just spotted the problem - maths! Changing 0.8 to 1 fixes the issue.

[GreenSock]

There actually was an issue with the browser's numeric precision when dealing with TINY numbers which led to one of your tweens getting overwritten (the browser thought there was something like a 0.000000001-second overlap when there really wasn't). I've updated GSAP to work around that issue. The attached zip contains a preview of the upcoming release. Does this solve things for you? 

GSAP_1.11.3_preview3.zip

[Rodrigo]

Works great!!

 

See the Pen fbc4cd953e634b4edcdc4b590d7085e4 by rhernando (@rhernando) on CodePen

 

Thanks a lot Jack!!

 

Happy tweening