Animation au scroll

by oilvier

HTML

<script src="https://cdn.rawgit.com/customd/jquery-visible/160ec4b3/jquery.visible.min.js"></script>
<div class="foo"></div>

	<svg class="test" xmlns="http://www.w3.org/2000/svg" width="730" height="680" viewBox="0 0 730 680">
  <style>
    .st0{opacity:.11;fill:#010101}.st1{fill:#fff}.st2{fill:#d2d2d2}.st4{fill:#e5e5e5}.st5{fill:#0144c4}.st9{fill:#010b14}.st11{fill:#0f3c48}.st16{fill:#123234}.st20{fill:#c7c6c5}.st47{fill:#3a3939}.st48{fill:#585757}.st50{fill:#343433}.st51{fill:#bdb7b7}.st54{fill:#dbdcda}.st55{fill:#222020}.st59{opacity:.23;fill:#141c1e}.st60{fill:#303f43}.st61{fill:#45555a}.st69{fill:#5a6668}.st70{fill:#424d4f}.st71{fill:#293435}.st72{fill:#414c4e}.st73{fill:#1c2728}.st77{fill:#354143}.st78{fill:#343e40}.st84{fill:#e4e4e4}
  </style>
  <g id="gaspump">
    <path d="M284.5 300.7l50.8 34.6-140.5 72.1-59.4-31.5z" class="st0"/>
    <path d="M194.9 240.8l-41.2-20.5 123.7-61.9 41.2 20.6z" class="st1"/>
    <path d="M153.7 379.6l41.1 20.6V240.8l-41.1-20.6zM305.9 237.2l6.4 3.1V46.4l-6.4-3.2z" class="st2"/>
    <path fill="#f5f6f6" d="M318.1 47.5V33.8L194.4 95.7v13.7z"/>
    <path d="M194.8 400.6l123.8-61.9V179.4l-123.8 61.8z" class="st4"/>
    <path d="M200.7 310.2l111.1-55.5v-68.1l-111.1 55.6zM200.7 344.1l111.1-55.5v-24.2L200.7 320z" class="st5"/>
    <path fill="#f26a65" d="M270.2 220.5l20.2-10.1v54.9l-20.2 10.2z"/>
    <path fill="#33afaf" d="M246.2 232.5l20.2-10.1v55l-20.2 10.1z"/>
    <path fill="#f4d40f" d="M222.1 244.6l20.2-10.1v54.9l-20.2 10.1z"/>
    <path d="M276.1 270l8.4-4.2v-8.4l-8.4 4.2zM252.1 282l8.4-4.2v-8.4l-8.4 4.2zM228 294.1l8.4-4.2v-8.4l-8.4 4.2z" class="st1"/>
    <path d="M312.3 230.9l6.3-3.1v-194l-6.3 3.2zM194.8 289.6l6.4-3.1v-194l-6.4 3.2z" class="st4"/>
    <path d="M188.5 293.5l6.3 3.2v-194l-6.3-3.1z" class="st2"/>
    <path d="M280.8 330.1c2.1-1 3.7-3.6 3.7-5.6v-36.6c0-2.1-1.7-2.9-3.7-1.9-2.1 1-3.7 3.6-3.7 5.6v36.6c-.1 2.1 1.6 2.9 3.7 1.9z" class="st9"/>
    <path fill="#12a9a9" d="M278 297.8c0 1.5 1.2 2.2 2.8 1.4 1.5-.8...

CSS

.foo {height:2000px;}
svg {
		  width: 730px;
      max-width:100%;
		  height: 680px;
		  background-color:red;
		}
		#car {transform-box:fill-box; transform-origin:top left;}
    .is-visible #car { animation: straightLine 2s ease-out;}
		@keyframes straightLine {
		  0% {opacity:0; transform:translate3D(150%, -120%, 0);}
		  10% {opacity:1;}
		  50% {
		    transform: translate3D(0%, 0%, 0);
		  }
		}}

JavaScript

var scrolledPlusViewable = $(window).scrollTop()+$(window).height();

// Afficher/Masquer
		function displayTrigger() {    
			
      if( $(".test").visible(true) ) {
    		$('body').css('background', 'green');
        $('.test').addClass('is-visible');
      }
      
		}
		$(window).on("scroll", function(e) {
			requestAnimationFrame(function() {
				displayTrigger();
			});
		});