Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DiscoStu

Spinning images

Recommended Posts

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?

Link to post
Share on other sites

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"});

}
  • Like 2
Link to post
Share on other sites

Hi,

 

I got beat this time :D

 

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.

  • Like 2
Link to post
Share on other sites

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. 

Link to post
Share on other sites

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

Link to post
Share on other sites

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!!

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×