Jump to content
Search Community

Scale issue in this Carousel

pixelGirl 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 have created a prototype for a carousel which should function similar to the popular cover flow interaction. This will be used as with html to describe steps in a process, rather than a photo slide show.

 

It's all working great except for the scaling issue. As each step comes to the front it should obviously scale to be the largest, but it's not working right.  Obviously I'm applying something wrong somewhere.

 

Here is my example: http://jsfiddle.net/MaureenDunlap/SjJLQ/

Link to comment
Share on other sites

hello and welcome to the forums,

 

I noticed in your stylesheet, you were applying scale as its own property. try this:

.pos1 {
    -webkit-transform: scale:(1,1) translateZ(0);
     transform: scale:(1,1) translateZ(0);
}

notice how the scale goes in the transform property, also i would also use transform without the prefix so its crossbrowser since latest webkit browsers like safari and chrome and also  firefox accept transform with out the vendor prefixes. Gsap should handle this when applying, but if you have starting values defined in the stylesheet i would make those changes.

 

also the jsfiddle example is missing the GSAP external script, and i wasnt able to see it work in Firefox

Link to comment
Share on other sites

Here is the new improved version. 

 

http://maureendunlap.com/vif/carousel.html

 

I'm pretty happy with it, but there is still something a bit off with the way the animation flows. If you click the buttons you'll see it is a bit jerky when the item comes to the top.

 

I want to make this into a sort of template for several similar projects.

 

Any thoughts on smoothing this out and making it more realistic?

Link to comment
Share on other sites

$(b1).click(function(){
      TweenLite.to(s1, 1, {zIndex:500, scale:1, left:"0px", top:"0px", force3d:true, ease:Power2.easeOut});
      TweenLite.to(s2, 1, {zIndex:300, scale:0.82581, left:"-85px", top:"31px", force3d:true, ease:Power2.easeOut});
      TweenLite.to(s3, 1, {zIndex:100, scale:0.72651, left:"-160px", top:"51px", force3d:true, ease:Power2.easeOut});
      TweenLite.to(s4, 1, {zIndex:100, scale:0.72651, left:"280px", top:"51px", force3d:true, ease:Power2.easeOut});
      TweenLite.to(s5, 1, {zIndex:300, scale:0.82581, left:"162px", top:"31px", force3d:true, ease:Power2.easeOut});
      return false;
}); 

i haven't tested the above but you can get the idea...

 

Also adding the force3d:true so it forces GSAP to use 3d transforms - Matrix3d instead of just Matrix. But you will need to include the CSSplugin js or use TweenMax js which includes it.

 

you could also take away the position:absoulte property and just move it to your stylesheet. you wouldnt need to tween that since it will always be absolute.

 

Also have you looked into animating the x and y property instead of left and top.. which should make the animation flow better using transforms instead of positioning. You could maybe look into adding the z property when the slide is pushed back. You would have to play around with it to use x and y.

 

I created your code into a jsfiddle, from your one above:

 

http://jsfiddle.net/SjJLQ/14/

 

its using TweenMax instead of TweenLite.. so it includes the CSSplugin js so you can use force3d:true

  • Like 4
Link to comment
Share on other sites

No worries... here are some links to some good examples for learning GSAP..

 

http://www.greensock.com/jump-start-js/

http://www.greensock.com/get-started-js/

 

the docs which are a great tool for learning the api:

http://api.greensock.com/js/

 

here is the GreenSock codepen examples for some cool code examples to learn from:

http://codepen.io/GreenSock

 

hope it helps :)

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