AFFINITY4 SERVICES ANIMATION

Developer
Luke Watts
Size
2,902 Kb
Views
28,336
  1. AFFINITY4 SERVICES ANIMATION Previews
  2. AFFINITY4 SERVICES ANIMATION HTML Codes
  3. AFFINITY4 SERVICES ANIMATION CSS Codes
  4. AFFINITY4 SERVICES ANIMATION JS Codes

How do I make an affinity4 services animation?

A quick test for animating a header logo/tagline with text. What is a affinity4 services animation? How do you make a affinity4 services animation? This script and codes were developed by Luke Watts on 14 August 2022, Sunday.

AFFINITY4 SERVICES ANIMATION Previews
IQ Test

AFFINITY4 SERVICES ANIMATION - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AFFINITY4 SERVICES ANIMATION</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="center"> <h1>AFFINITY<span>4</span> </h1><span class="services" id="web">WEB </span><span class="services" id="design">DESIGN</span><span class="services" id="development">DEVELOPMENT</span><span class="services" id="graphicdesign">GRAPHIC DESIGN</span> <p>WE <span>SOLVE</span> PROBLEMS</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

AFFINITY4 SERVICES ANIMATION - Script Codes CSS Codes

.center { height: 100vh; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
h1 { text-align: center; color: #333333;
}
p { opacity: 0; position: relative; left: -25vw; text-align: center;
}
span { color: orange;
}
.services { position: relative;
}
.services#development, .services#graphicdesign { top: 1rem;
}
.services#web { opacity: 0; left: 0.35ex;
}
.services#design { opacity: 0; left: 0.8ex;
}
.services#development { opacity: 0; right: 6.75ex;
}
.services#graphicdesign { opacity: 0; right: 26ex;
}

AFFINITY4 SERVICES ANIMATION - Script Codes JS Codes

var $web = $("#web"), $design = $("#design"), $development = $("#development"), $graphicdesign = $("#graphicdesign"), $heading = $("h1"), $p = $("p");
TweenMax.to([$web, $design], 1, { opacity: 1
})
TweenMax.to($design, 0.75, { opacity: 0, bottom: "1rem", delay: 1.5
})
TweenMax.to($development, 1, { opacity: 1, top: 0, delay: 2.15
})
TweenMax.to([$web, $development], 1, { opacity: 0, top: "-1rem", delay: 3.5
})
TweenMax.to($graphicdesign, 1, { opacity: 1, top: 0, delay: 3.5
})
TweenMax.to($graphicdesign, 1, { opacity: 0, delay: 4.5
})
TweenMax.to($heading, 1, { x: "100px", delay: 5.5
})
TweenMax.to($heading, 1, { scale: 2, opacity: 0, delay: 7
})
TweenMax.to($p, 1, { opacity: 1, delay: 8.5
})
TweenMax.to($p, 1, { scale: 2, opacity: 0, delay: 10.5
});
AFFINITY4 SERVICES ANIMATION - Script Codes
AFFINITY4 SERVICES ANIMATION - Script Codes
Home Page Home
Developer Luke Watts
Username lukewatts
Uploaded August 14, 2022
Rating 3
Size 2,902 Kb
Views 28,336
Do you need developer help for AFFINITY4 SERVICES ANIMATION?

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!

Luke Watts (lukewatts) Script Codes
Name
Affinity4 SVG Logo Animation
Pure CSS Glowing Volume Dial
Turnable LED Dial
CSS Drop Shadows with Global Illumination
Product Item Additional Info On Hover
Accessible Responsive Nav
Footer Concept 02
HUD Animation Test
Media Module Pattern
Form Inputs
Create amazing sales emails 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!