Сохранение одной анимации движения из многих в одной функции (TweenMax JS)

Я работаю над сайтом, для которого требуется «эффект переворота 3D-карты». Я уже использую TweenMax для анимации определенной графики на сайте, поэтому я решил использовать TweenMax для переворачивания 3D-карты.

У меня есть это. В основном он масштабируется и вращается в состоянии наведения. Я хочу, чтобы он увеличивался, вращался и уменьшался, сохраняя при этом свойство rotationY. Любые идеи, как это сделать?

$('#selector').on('mouseover', cardFlip).on('mouseout', cardFlipBack);

function cardFlip(e) {
    var tar = $(e.currentTarget);
    $(e.currentTarget).css("z-index", "210");
    TweenMax.to(tar, 0.25, {css: {scale: 1.5, rotationY: -180}});
}

function cardFlipBack(e) {
    var tar = $(e.currentTarget);
    TweenMax.to(tar, 0.25, {css: {scale: 1, rotationY: 0}});
}

javascript jquery gsap
person David Berning    schedule 05.08.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня это работает! Когда вы наводите курсор на изображение, оно уменьшается и увеличивается, когда вы наводите курсор мыши. Когда вы щелкаете по объекту, карта увеличивается, переворачивается на 180 градусов и остается там, пока вы не щелкнете по ней снова, а затем возвращается к исходному градусу и масштабу.

var cardFlipClick = false;

$('#include-why').on('mouseover', hoverin).on('mouseout', hoverout).on('click', cardFlip);

function cardFlip(e) { // MAKES CARD FLIP WORK
    if('click') {
        if (!cardFlipClick) {
            console.log('flipCard1 CLICKED!');
            var card = $(e.currentTarget).off('mouseout').off('mouseover').css("z-index", "210");
            TweenMax.to(card, 0.4, {css: {rotationY: -180, scale: 1.5}});
            cardFlipClick = true;
        } else if (cardFlipClick) {
            var card = $(e.currentTarget).on('mouseout', hoverout).on('mouseover', hoverin);
            console.log('flipCard2 CLICKED!');
            TweenMax.to(card, 0.4, {css: {rotationY: 0, scale: 1}});
            cardFlipClick = false;
            }
        }
    }
person David Berning    schedule 06.08.2013