GIF-like animation with single image

Developer
Chrysto
Size
1,807 Kb
Views
50,600
  1. GIF-like animation with single image Previews
  2. GIF-like animation with single image HTML Codes
  3. GIF-like animation with single image CSS Codes
  4. GIF-like animation with single image JS Codes

How do I make an gif-like animation with single image?

Simple demo how you can achieve simple GIF-like animation with single TweenMax. . What is a gif-like animation with single image? How do you make a gif-like animation with single image? This script and codes were developed by Chrysto on 16 July 2022, Saturday.

GIF-like animation with single image Previews
IQ Test

GIF-like animation with single image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GIF-like animation with single image</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="smile"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

GIF-like animation with single image - Script Codes CSS Codes

#smile{ width: 14px; height: 14px; background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png); background-repeat: no-repeat;
}

GIF-like animation with single image - Script Codes JS Codes

$(function() { TweenMax.to( $("#smile"), 3, { backgroundPosition:"0px -588px", ease:SteppedEase.config(14), repeat:-1 }); });
GIF-like animation with single image - Script Codes
GIF-like animation with single image - Script Codes
Home Page Home
Developer Chrysto
Username bassta
Uploaded July 16, 2022
Rating 3
Size 1,807 Kb
Views 50,600
Do you need developer help for GIF-like animation with single image?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chrysto (bassta) Script Codes
Name
Fullscreen image in Canvas
Page Header animation
TweenMax text - changing slogans
Single page website
Footer concept
Simple GSAP Slider
Lastik menu
Fullscreen Parallax
Click outside element
Simple one page header concept
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!