Jump to content
Search Community

How to Create Slideshow Like Apple's Floating Screen Saver

NoahTwine test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am trying to create a basic "floating" slideshow like the floating style screensaver that ships with all Macs. If you don't have access to a Mac the effect looks close to this:

 

 

Key features:

  • Multiple layers of posts.
  • Barrel roll effect — every time I try this it looks like a flat screen being stretched in and out.
  • Callback function for loading in a new tile every time one is animated out.

Apologies, I'm a newbie here. While this should be pretty darn simple I can't get started on it.

 

Can someone point me in the right direction here? Thanks much.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for posting the video. The first thing it reminded me of was our demo that we use on our CSS3 page which it looks like you have found;)

 

http://codepen.io/NoahBeane/pen/WwmrgP

 

It's kind of tough for us to explain from scratch how something like what is in that video should be built, as it just takes a lot of time and we don't really know what your skill level is with HTML, CSS and JavaScript. We really enjoy helping folks with finding ways for GSAP to solve their problems but we just need a little bit of code to work with to have some context. 

 

It looks like that pen will be a good start. If you have any questions along the way please let us know.

  • Like 2
Link to comment
Share on other sites

Hi Carl and all,

 

Apologies ... my initial post was a bit too generic there :)

 

Here is my CodePen:

 

See the Pen WwmrgP by NoahBeane (@NoahBeane) on CodePen

 

I've made decent progress (GreenSock is awesome, btw), but have a few outstanding issues:

  1. For some reason, the smallest tiles are disappearing before they animate through to the bottom of the page.
  2. Occasionally the animation will flash or hang. This makes me think that I'm doing something very wrong.

Of course, any other pro tips/criticisms are welcome as well.

 

The JavaScript should be pretty self-explanatory. I have shamelessly ripped off the demo on the GreenSock CSS page to start off.

 

Thanks much for any tips on this!

Link to comment
Share on other sites

Hello NoahTwine, Just to add my to cents..

 

On your tween that is targeting the variable trans3DBoxes you are using transformPerspective and perspective on the same element. You should use either or, to prevent browser bugs and inconsistent rendering issues cross browser. ;)

  • perspective applies perspective to its immediate children
  • transformPerspective applies perspective to the element it is applied to.

Resources:

CSS perspective : https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

CSS transform perspective() : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

 

:)

Link to comment
Share on other sites

Additionally, if anyone could point me in the right direction on two points I would be very grateful:

  1. Why do the smallest tiles stop animating about 75 pixels from the end?
  2. Why, after running the animation for more than 45 seconds, do I start seeing orange flashes?

You can see both problems (especially the first) if you just let the animation run for 10-20 seconds.

 

Thanks so much.

 

—Noah

Link to comment
Share on other sites

  1. Why do the smallest tiles stop animating about 75 pixels from the end?

You aren't moving them far enough. Remember they are very far back in 3D space. Imagine you held a piece of paper at arms length and dropped it 5ft to the ground. You would notice a lot of change in position. Now imagine looking at the moon and moving it 5ft... you wouldn't notice any change at all. yes, its an extreme example but hopefully it helps ;)

 

  1. Why, after running the animation for more than 45 seconds, do I start seeing orange flashes?

I wasn't able to see this in Google Chrome. Is there a particular OS / Browser that this is more evident on?

 

  • Like 1
Link to comment
Share on other sites

Thanks, Carl, for the advice on (1). I've fixed that now.

 

As for (2) I'm on Google Chrome. The error appears very infrequently.

 

Anytime I run the wall, however, I do see some jitter on the tiles. Is there some I'm doing obviously wrong here?

 

Thanks much for all the help.

 

—Noah

Link to comment
Share on other sites

Hello NoahTwine,

 

Have you tried making #trans3DBoxes children <div>'s have CSS position absolute instead of relative?

I also noticed #trans3DBoxes has no CSS position property set even though CSS transform is being applied. So it is animating a transform on CSS position static, instead of position relative and or absolute.

 

If it were me i would have #trans3DBoxes have position relative. And have #trans3DBoxes > div have position absolute. This way the #trans3DBoxes child div's are absolutely positioned relative to their parent #trans3DBoxes.

 

Also you might have to add backface-visibility: visible to your tiles stylesheet rule. Webkit sometimes can be buggy when there is not the default value in the stylesheet for 2D and 3D supporting properties like backface-visibility due to bugs and it being a poopy pants.

 

But I am not seeing that jitter on Windows 7 Chrome Version 50.0.2661.102 m, so its hard for me to test that jitter in Chrome Mac :(

 

:)

  • Like 1
Link to comment
Share on other sites

another tip for smoother animation is to use y instead of top

//change 
css:{
      top: trans3DDemo.height()*1.5,
    },


//to:
css: {
      y: trans3DDemo.height()*1.5,
    },
 
also you really don't need to wrap properties in the CSS object (that syntax dates back to the original release of GSAP and we removed that requirement to allow the code to be cleaner) so you can just do
 
threeDTimeline.to(element, 10, {
    y: trans3DDemo.height()*1.5,
    immediateRender: true,
    onComplete: kickoffNewTile,
    onCompleteParams: [element]
  }, "scene1+=" + (tileTimer()));
}
  • Like 1
Link to comment
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.
×
×
  • Create New...