Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by lscoates
lscoates
4,134 Points

CSS Animation on Scroll in Mobile

I'm trying to do an animation on scroll that slides in a div. I've got it working on desktop but when I run it on Mobile Safari it begins in the end position and then as you scroll down it jumps 150px down and starts the animation. Any ideas how I can fix this?

.come-in {
  transform: translateY(150px);
  -o-transform: translateY(150px);
  -moz-transform: translateY(150px);
  -webkit-transform: translateY(150px);
  animation: come-in .8s ease forwards;
  -o-animation: come-in .8s ease forwards;
  -moz-animation: come-in .8s ease forwards;
  -webkit-animation: come-in .8s ease forwards;
}

.already-visible {
  transform: translateY(0);
  -o-transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  animation: none;
  -o-animation: none;
  -moz-animation: none;
  -webkit-animation: none;
}

@keyframes come-in {
  100% { -webkit-transform: translateY(0); }
}
@-o-keyframes come-in {
  100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes come-in {
  100% { -webkit-transform: translateY(0); }
}
@-webkit-keyframes come-in {
  100% { -webkit-transform: translateY(0); }
}

(function($) {

  /**
   * Copyright 2012, Digital Fusion
   * Licensed under the MIT license.
   * http://teamdf.com/jquery-plugins/license/
   *
   * @author Sam Sehnert
   * @desc A small plugin that checks whether elements are within
   *     the user visible viewport of a web browser.
   *     only accounts for vertical position, not horizontal.
   */

  $.fn.visible = function(partial) {

      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };

})(jQuery);

var win = $(window);

var allMods = $(".module");

allMods.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible"); 
  } 
});

win.scroll(function(event) {

  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in"); 
    } 
  });

});

<div class="module">
Text
</div>

Appreciate any points in the right direction!

2 Answers

Andrey Soloviev
Andrey Soloviev
1,501 Points

Luke Scoates,

  1. This probably has nothing to do with it, but check your syntax a bit: @-moz-keyframes and @keyframes should have the corresponding values (right now, each "keyframes" entry has "-webkit-transform", you should change that accordingly to "-moz-transform" and simply "transform"). Also, I don't think you need "@-o-keyframes" anymore, since Opera switched to webkit a while back.

  2. Have you tried specifying a 0% starting point in your keyframes?

@keyframes come-in {
0%        { transform: translateY(150px); } /* Your element's starting point. */
100%    { transform: translateY(0px); } /* Ending point. */
}

Sorry if the above has mistakes, replace with your code - you get the idea. ;)

lscoates
lscoates
4,134 Points

Thanks Andrey - Didn't fix it :(, but good to clean up my code anyways! I have a feeling it has something to do with the JS but can't seem to crack it!

Andrey Soloviev
Andrey Soloviev
1,501 Points

Luke Scoates,

Wrote a little CodePen thingy with your JavaScript and some generic html/css. I don't know what to tell you, the code works just fine for me.

http://codepen.io/anon/pen/Ekbhd/

lscoates
lscoates
4,134 Points

Were you able to test it on Mobile Safari though? Everything works great on desktop for me already but as soon as I check it on mobile the animation stops working properly (it still animates, but it starts at the end point and then jumps down as soon as it becomes visible.

Andrey Soloviev
Andrey Soloviev
1,501 Points

Luke Scoates,

Yes, works just fine. I'd say take a good look at your css. Give the original ".module" a translateY value, the one you want it to start with (now only the ".come-in" class has one, if I'm not misreading your code).

lscoates
lscoates
4,134 Points

Adding the TranslateY to .module fixed it starting at the end point but it's still lagging until scrolling stops :/..

Andrey Soloviev
Andrey Soloviev
1,501 Points

Luke Scoates,

I don't really think you can do much about that. Mobile browsers try to save your battery life, and delay the execution of JavaScript while you're scrolling. Here it is, better, in the words of Alexander Prinzhorn, the guy who wrote Skrollr, one of the best scrolling libraries out there:

"Mobile browsers try to save battery wherever they can. That's why mobile browsers delay the execution of JavaScript while you are scrolling. iOS in particular does this very aggressively and completely stops JavaScript."

So there isn't really a workaround. Prinzhorn has figured one out, but it's not something I'd use on a mobile website (Skrollr, for example, uses CSS transforms for the page on mobile, to "fake" scrolling).

I hope this helped. :)

lscoates
lscoates
4,134 Points

Well, lol, I guess that answers it. Thanks for all your time and effort Andrey, I really appreciate it! I guess I'll probably just detect if it's mobile and cancel the animation if it is.

lscoates
lscoates
4,134 Points
lscoates
lscoates
4,134 Points

edit