10 examples of 'css animations on scroll slide in from left' in JavaScript

20
protected doAnimateIn(el: HTMLElement): Promise  {
21
	return new Promise((resolve) => {
22
		let horizontalBeginValue = this.reverseChildAnimations ? 20 : -20;
23
		el.style.left = horizontalBeginValue + "px";
24
		el.style.opacity = "0";
25
26
		Velocity.animate(el, {
27
			left: 0,
28
			opacity: 1
29
		}, {
30
			complete: () => {
31
				resolve();
32
			},
33
			duration: this.animationDuration,
34
			easing: "easeInOutQuad"
35
		});
36
	});
37
}

60
protected intShouldAnimateOut(el: HTMLElement): boolean {
61
	return this.animationState === AnimationState.In;
62
}

197
scrollToLeft(duration?: number) {
198
  this.scrollXTo(0, duration);
199
}

5
function scrollTo(element, duration) {
6
    duration = duration || 500;
7
    if (!element) return false;
8
    var elem = $(element).offset();
9
    if (elem.top) {
10
        $('html, body').animate({
11
            scrollTop: elem.top
12
        }, duration);
13
    }
14
}

37
public static fromRight(time=UIAnimation.ANIMATION_TIME_NORMAL){
38
  return  [transition(':enter', [
39
    style({transform:'translateX(100%)'}),
40
    animate(time, style({transform:'translateX(0)'}))
41
  ]),
42
    transition(':leave', [
43
      style({transform:'translateX(0)'}),
44
      animate(time, style({transform:'translateX(100%)'}))      ])
45
  ];
46
}

258
function scrollAnimation()
259
{
260
	var percent = (new Date() - startTime) / 1000;
261
262
	if(percent > 1) window.scrollTo(0, goalY);
263
	else
264
	{
265
		window.scrollTo(0, Math.round(startY + (goalY - startY) * curve(percent)));
266
		setTimeout('scrollAnimation()', 10);
267
	}
268
}

5
function scrollTo(el, duration, easingType, scrollOffset) {
6
  scrollOffset = scrollOffset == null ? 0 : scrollOffset;
7
  var easing = easingType ? ease[easingType] : ease['linear'];
8
  var stop = false;
9
  var start = Date.now();
10
  var html = document.getElementsByTagName('html')[0];
11
  var fromY = document.body.scrollTop || html.scrollTop;
12
  var toY = fromY + offset(el).top + scrollOffset;
13
14
  function animate() {
15
    var now = Date.now();
16
    if (now - start >= duration) stop = true;
17
    var p = (now - start) / duration;
18
    var tick = Math.round(fromY + (toY - fromY) * easing(p));
19
    document.body.scrollTop = tick;
20
    html.scrollTop = tick;
21
    if (!stop) raf(animate);
22
  }
23
24
  animate();
25
}

9
in({ from, to, done }) {
10
  // Reset Scroll
11
  window.scrollTo(0, 0);
12
13
  // Remove Old View
14
  from.remove();
15
16
  // Animation
17
  Tween.fromTo(to, 0.5,
18
    { opacity: 0 },
19
    {
20
      opacity: 1,
21
      onComplete: done
22
    }
23
  );
24
}

81
scrollDown() {
82
  $('.message-container').animate({scrollTop: 99999})
83
}

267
function scrollSmoothToBottom (id) {
268
   id.animate({
269
      scrollTop: id[0].scrollHeight - id[0].clientHeight
270
   }, 500);
271
}