3D Perspective wrong in a carrousel

[elinfante]

I have created a carrousel and when I click on each thumb It should rotate from the center. I got that bit working fine but for some reason the perspective is wrong, is not head on therefore they all look different when they should be the same.

I am a bit confused why is doing that, any ideas?

This is the directive:

    <fa-modifier    bz-carrousel-thumb
                    ng-repeat="photo in photos"
                    fa-animate-enter="enter()"
                    fa-animate-leave="leave()"
                    fa-animate-halt="halt()"
                    fa-transform="transform"
                    fa-size="[200, 200]"
                    > 

                    <fa-modifier fa-align="[0,0]" fa-origin="[0.5,0.5]" fa-rotate="[0,rotY.get(),0]">

                        <fa-surface fa-size="[undefined, undefined]" fa-background-color="'white'" ng-click="rotate()">
                            <div  style="background:white;">Click Me</div>
                            <img src="{{photo.row.images.thumbnail.url}}" width="200" height="200" />
                        </fa-surface>

                    </fa-modifier>

    </fa-modifier> 

Attached there is a picture of what the problem is:

Thanks

[steveblue]

Are you using a TransitionableTransform? Please post the code from your controller or directive.

[elinfante]

I am actually using Transitionable for the rotation. There you go the directive:

.directive('bzCarrouselThumb', ['$famous','$timeout', function($famous,$timeout) {

            return {
                restrict: 'A',
                scope: false,
                link: function(scope,el,attr) {

                    var EventHandler    = $famous['famous/core/EventHandler'];
                    var Transform       = $famous["famous/core/Transform"];
                    var Transitionable  = $famous["famous/transitions/Transitionable"];
                    var SnapTransition  = $famous["famous/transitions/SnapTransition"];
                    var width = 200;
                    var height = 200;
                    var offset = 30;
                    var delay = 300;
                    var initAnim = Transform.translate(translateThumbX(scope.$index), translateThumbY(scope.$index) +300, 0)
                    var animIn = Transform.translate(translateThumbX(scope.$index), translateThumbY(scope.$index), 0)
                    var transform = new Transitionable(initAnim); 
                    var rotY = new Transitionable(0);

                    scope.carrouselEvent = new EventHandler();
                    scope.pipe.subscribe(scope.carrouselEvent);

                    function translateThumbX(index) {
                        return 1920 - ( (width + 35) * (index) + (width/2+offset));
                    }

                    function translateThumbY(index) {
                        return 800;
                    }

                    function enter() {
                        transform.delay(delay * scope.$index);
                        return transform.set(animIn, {duration: 300}, onEnterEnd)
                    };

                    function onEnterEnd() {
                        if (scope.$index == scope.photos.length - 1) {
                            scope.carrouselEvent.emit('carrousel:allThumbsIn');
                        } 
                    }

                    function leave() {
                        var leaveItem = new Transform.translate(translateThumbX(scope.$index) + 200 + offset, translateThumbY(scope.$index), 0)
                        return transform.set(leaveItem, {duration: 250,transition: SnapTransition}, onLeaveEnd)
                    };

                    function onLeaveEnd() {
                        el.remove();
                    }

                    function halt() {
                        scope.transform.halt()
                    };

                    function rotate() {
                        console.log("rotate");
                        rotY.set(Math.PI / 4, {duration:500});
                    }

                    function reposition() {
                        var slide = new Transform.translate(translateThumbX(scope.$index), translateThumbY(scope.$index), 0)
                        transform.delay(50 * scope.$index);
                        return transform.set(slide, {duration: 250,transition: SnapTransition})
                    }

                    // When I remove one of the photos from the array I trigger this
                    scope.$watch('photos', function(newV,oldV){
                        if (newV.length != oldV.length) {
                            reposition();
                        }
                    },true);    

                    // ================================================================================ 

                    angular.extend(scope, {
                        width: width,
                        height: height, 
                        enter: enter,
                        leave: leave,
                        halt: halt,
                        transform: transform,
                        rotate:rotate,
                        rotY: rotY,
                    });               

                    //Apply changes that could be made to animations that are binding
                    $timeout(function() {
                        scope.$apply();
                    });  

                }

            };
        }]);

[steveblue]

You should try using TransitionableTransform instead of a Transitionable.

[jordanpapaleo]

Hi @elinfante

Is this still an issue or did @steveblue solution work?

Thanks,

Jordan

[jordanpapaleo]

I am going to close this. Please reopen it if it is still an issue. Thanks - Jordan