Skip to content

Instantly share code, notes, and snippets.

@amirhp-com
Created June 30, 2020 21:55
Show Gist options
  • Save amirhp-com/8c825b97281b29ac7091414407994a92 to your computer and use it in GitHub Desktop.
Save amirhp-com/8c825b97281b29ac7091414407994a92 to your computer and use it in GitHub Desktop.
Sample GSAP Ambulance ;)
.sky
i.fa.fa-ambulance#bike
.earth
var bike = $("#bike");
new TimelineMax({ repeat: -1, repeatDelay: 0 })
.to(bike, 1.5, { x: "1500px", ease: Expo.easeInOut })
.to(bike, 1, { x: "0", ease: Expo.easeInOut });
new TimelineMax({ repeat: -1, repeatDelay: 0.1 })
.to(bike, 0.1, { textShadow: "red -2px -9px 28px" })
.to(bike, 0.1, { textShadow: "blue -2px -9px 28px" });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
body{
margin: 0;
}
.sky{
background: skyblue;
height: 150px;
}
.earth{
background: #a2a2a2;
height: calc(100vh - 150px);
}
#bike{
font-size: 4rem;
line-height: 250px;
margin-left: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment