Opening animation from circular avatar

Developer
Robert Borghesi
Size
5,977 Kb
Views
30,360
  1. Opening animation from circular avatar Previews
  2. Opening animation from circular avatar HTML Codes
  3. Opening animation from circular avatar CSS Codes
  4. Opening animation from circular avatar JS Codes

How do I make an opening animation from circular avatar?

My first real experiment with TweenMax, wait the loading animation than click on the deer to the opening animation. There is the reverse animation too, of course.. What is a opening animation from circular avatar? How do you make a opening animation from circular avatar? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Opening animation from circular avatar Previews
IQ Test

Opening animation from circular avatar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Opening animation from circular avatar</title> <title>Opening animation from circular avatar</title>
<meta property="og:image" content="http://s11.postimg.org/807pp6udv/Schermata_2015_10_13_alle_20_08_23.png" /> <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> <!-- WATCH IT FULLSCREEN, IS MUCH BETTER-->
<header> <h1 class="title">Having fun <br>with Tweenmax</h1> <h2 class="subtitle">my first opening animation</h2> <img src="http://cecewinans.com/wp-content/plugins/itro-popup/images/close-icon-white.png" id="close"> <div class="img-container"></div> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div> </header> <div class="content"> <p>She tagged along to those finals, and in the process heard about a number of different events that occurred alongside steer-wrestling, one of which in particular piqued her interest. Even more rewarding than riding and roping, it seemed to Whitemash, was the so-called “exceptional rodeo,” for people with special needs</p> <p>Think Special Olympics in dirt. Dozens of kids and adults with various mental and physical disabilities rode ponies and participated in rodeo-like events. They roped wooden steer, ran around with stick horses, and sat on barrels that rocked back and forth like bulls. Whitemarsh could not help but be inspired by the stories.In 2001, when it was time to do her high school senior project, Whitemash decided to organize an exceptional rodeo in Pasco. It was a success. She went off to college for business and spent a few more years working in a cubicle, but she couldn’t shake the feeling that what she really wanted to do was organize exceptional rodeos.</p> <p>Whitemarsh lassoed her dream in 2011, incorporating the nonprofit Rascal Rodeo to produce rodeos for people with special needs. The first RR was held at the Kennewick (Washington) Fair, with thirty participants. The following year, RR produced four events (two each in Washington and Oregon) and seven in 2013, and is on pace to do at least twelve this year, expanding into Idaho.</p> <p>Rascal Rodeos take place on the same day and at the same location as professional rodeo events. Whitemarsh arranges for her group’s equipment to be set up either in the arena or just outside it, and the Rascal Rodeos usually start at 10 a.m. and run about an hour and a half.</p> <p>Each event draws participants from nearby communities, who register online or by phone. They have ranged in age from 2 to 70, and no disability is excluded. RR has had participants with autism, Down syndrome, schizophrenia, and other mental challenges; some of the wheelchair participants are disabled as the result of accidents.</p> <p>She also loves doing it so she can show parents of special needs kids that their children can do things they never imagined possible. The parents, she says, are often wary to get involved due to their experience with their kids’ limitations, and many need convincing just to show up.</p> <p>But here’s how it usually goes: “After a couple of minutes their child wants to see everything and touch everything, and then they really warm up and want to ride a horse,” Whitemarsh says, “and by that time the parents are crying.”</p> <p>At other times, it’s the kids themselves who need some persuading. That was the case with Jacob, whose mother, Laurie Sarver, brought him to his first Rascal Rodeo at the Kennewick County Fair three years ago, when he was six. It was crowded and loud, and Jacob, who has high-functioning autism, was overwhelmed.</p> Text + photo from <a href="https://medium.com/storytelling-for-good/riding-high-d5cd442ce318">Medium</a> </div> <div id="info">click on the deer to see the magic</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/1.18.0/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubGSAPTimeline.js'></script> <script src="js/index.js"></script>
</body>
</html>

Opening animation from circular avatar - Script Codes CSS Codes

/*@import url(https://fonts.googleapis.com/css?family=Quicksand:700);*/
/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic,700);
body { background: #2e2e30; font-family: 'Lato', sans-serif;
}
p { margin: 30px 0;
}
* { box-sizing: border-box;
}
header { height: 600px; width: 100%; overflow: hidden; position: relative;
}
header .img-container { position: absolute; width: 100%; height: 100%; top: 0; z-index: 1; overflow: hidden; background: url("https://cdn-images-1.medium.com/max/2000/1*IVmTs3cXNAGqHu5a906Yeg.jpeg"); background-size: cover; background-position: center center; background-repeat: no-repeat; cursor: pointer; border: solid 3px rgba(250, 250, 250, 0.5); box-sizing: border-box;
}
header .img-container:before { content: ''; width: 100%; height: 100%; background: #191918; opacity: 0.4; position: absolute; top: 0; left: 0;
}
header #close { width: 40px; height: 40px; position: absolute; top: 20px; right: 20px; z-index: 2; cursor: pointer;
}
header h1 { font-size: 72px; color: white; position: relative; z-index: 2; margin: 330px 0 0 0; text-align: center; font-family: 'Playfair Display', serif; line-height: 1.1;
}
header h2 { z-index: 2; font-size: 16px; font-weight: 300; color: white; text-align: center; position: relative; font-style: italic; opacity: 0.6;
}
.fade { position: absolute; top: 0; left: 0; background-color: rgba(250, 250, 250, 0.3); border: solid 2px rgba(250, 250, 250, 0.8); z-index: 0;
}
.content { max-width: 900px; width: 100%; margin: 0 auto; color: #282828; font-size: 18px; line-height: 2; font-weight: 300;
}
.content p:first-of-type { text-align: center; font-family: 'Playfair Display', serif; font-size: 24px; line-height: 1.6; margin: 60px 0;
}
.opened .img-container { cursor: initial;
}
#info { color: white; text-transform: uppercase; font-family: 'Quicksand', sans-serif; position: fixed; right: 10px; bottom: 10px; font-size: 10px; opacity: 0.5;
}

Opening animation from circular avatar - Script Codes JS Codes

jQuery(document).ready(function($) {	var bcgImage = $(".img-container"),	title = $('h1'),	subtitle = $('h2'),	content = $('.content'),	ww = $( window ).width(),	body = $('body'),	fade = $('.fade'),	close = $('#close')	tlOpening = new TimelineMax({onReverseComplete:normalSpeed}),	tlLoad = new TimelineMax({delay: 2});	tlLoad	.set(body, {className: '+=is-animating'})	.set([bcgImage, fade], {width: 200, height: 200, left: '50%', xPercent: -50, top:' 50%', yPercent: -50, borderRadius: '100%'})	.set([content,fade], {autoAlpha: 0})	.set([title, subtitle], {autoAlpha: 0})	.from(bcgImage, 0.8, {scale:0.5, autoAlpha: 0, ease: Back.easeOut.config(2)})	.add('white')	.set(fade, {autoAlpha: 1, scale: 0.95})	.staggerTo(fade, 5, {scale: 1.15, autoAlpha: 0, ease: Power1.easeOut}, 1)	.set(body, {className: '-=is-animating'});	tlOpening	.to(bcgImage, 0.2, {y: -20, ease: Power4.easeOut, repeat:2, yoyo:true})	.to(bcgImage, 1.2, {width: '100%', height: ww, ease: Power4.easeInOut}, '-=0.2')	.to(bcgImage, 0.3, {borderRadius: 0}, '-=0.4')	.to(body, 1, {backgroundColor: '#ffffff'}, '-=0.4')	.set(body, {className: '+=opened'})	.add("imageDone")	.fromTo(title, 0.6, {y:20, autoAlpha:0}, {y:0, autoAlpha: 1}, 'imageDone-=0.9')	.fromTo(subtitle, 0.6, {y:20, autoAlpha:0}, {y:0, autoAlpha: 1}, 'imageDone-=0.5')	.fromTo(content, 0.6, {y: 20, autoAlpha:0}, {y:0, autoAlpha: 1}, 'imageDone-=0.2')	.from(close, 1, {autoAlpha: 0, y: 10});	tlOpening.pause();	bcgImage.on("click", function(){	if(!body.hasClass("is-animating")){	tlOpening.play();	}	});	close.on("click", function(){	if(!body.hasClass("is-animating")){	tlOpening	.timeScale(1.8)	.reverse();	}	});	function normalSpeed(){	tlOpening.timeScale(1);	}
});
Opening animation from circular avatar - Script Codes
Opening animation from circular avatar - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 3.5
Size 5,977 Kb
Views 30,360
Do you need developer help for Opening animation from circular avatar?

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!

Robert Borghesi (dghez) Script Codes
Name
Sorting with morphing content
Continuous register clean form with autoresize input
Opening with auto typing responsive sentences with random background color loop
Simple PureCss dropdown menu with following subnav
Animated title moving on scroll
Css Rotating 3d cubes different speed
Enel brand - logo animation with tweenmax
Continuous scrolling background of sticky header
Gradient border on hover - Scorer of fifa world cup
Hover otating cards folder of OnePiece characters
Create amazing web content 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!