CODEWITHSUNDEEP
jqueryhtmlcssanimation
tebrown
tebrown

Reputation: 153

Animate image from center to left of div

I'm so close to finishing this header although I have one last bump. If you click the jsFiddle link attached you will see that when you scroll within the document it moves the logo from center to left. I can't quite get it to animate from the center to the left smoothly, instead it just moves with no animation whatsoever.

Could someone please take a look and let me know of a fix?

Please make sure the result screen is open to show non media query version.

http://jsfiddle.net/tebrown/mo9aebxc/1/

.cbp-af-header img {
text-transform: uppercase;
color: #333;
letter-spacing: 4px;
font-size: 4em;
height: 100px;
width: 100px;
display: block;
margin: 0 auto;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

Much appreciated, cheers!

Upvotes: 0

Views: 818

Answers (2)

Devin
Devin

Reputation: 7720

try this:

first, a small change in your JS:

var cbpAnimatedHeader = (function () {
    var b = document.documentElement,
        g = document.querySelector(".cbp-af-header"),
        e = false,
        a = 200;

    function f() {
        window.addEventListener("scroll", function (h) {
            if (!e) {
                e = true;
                setTimeout(d, 500)
            }
        }, false)
    }

    function d() {
        var h = c();
        if (h >= a) {
            classie.add(g, "cbp-af-header-shrink")
        } else {
            classie.remove(g, "cbp-af-header-shrink")
        }
        e = false
    }

    function c() {
        return window.pageYOffset || b.scrollTop
    }
    f()
})();

we make sure the scroll reacts "earlier", yet giving it some time to do the travel, so the effect is smoother.

Now, we add this in CSS:

.cbp-af-header img {
    height: 100px;
    width: 100px;
    display: block;
    margin: 0px auto;
    transition: all 0.8s ease-in-out;
    position: relative;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

this is to have a smooth transition "back and forth", but also to start hardware acceleration so the animation goes even smoother with less jitter.

Of course, you can adjust the values, but I think this is more or less what you're looking for, see fiddle

Upvotes: 1

OneScrewLoose
OneScrewLoose

Reputation: 143

is this what you're trying to do?

 -webkit-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
transition: height 0.3s ease;

just add ease

note: there are also other kinds of effects or the transition-timing-function in CSS transitions, you might want to check this one

Upvotes: 0

Related Questions