Custom Stagger Start Point

Developer
Jon Christensen
Size
4,001 Kb
Views
40,480
  1. Custom Stagger Start Point Previews
  2. Custom Stagger Start Point HTML Codes
  3. Custom Stagger Start Point CSS Codes
  4. Custom Stagger Start Point JS Codes

How do I make an custom stagger start point?

Using GSAP stagger to animate, but change the starting position of the stagger. Usually it starts at the first element and works to the last (or reverse). This setup lets it start in the middle of the set, by using a custom delay.. What is a custom stagger start point? How do you make a custom stagger start point? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.

Custom Stagger Start Point Previews
IQ Test

Custom Stagger Start Point - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Stagger Start Point</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="pen-intro"> <h1>GSAP Custom Stagger Start Point</h1> <h2>Use cycle and delays to make stagger start in the middle of a set</h2> <p>GSAP stagger is good at taking a set and animating it from the first element to last, in that order (or reverse). But what if we want it to start in the middle and work its way "out" from the point of interaction? Well, we can! By overriding the delay in stagger with a custom one in the "cycle" property. Tip of the hat to Mary Lou's <a href="http://tympanus.net/Blueprints/MultiLevelMenu/" target="_blank">Multi-level menu</a> blueprint at Codrops for inspiring this (and the important bit of code that makes it work).</p> <h3>Click a character to see it in action!</h3>
</div>
<ul> <li>Malcolm Reynolds</li> <li>Zoe Washburne</li> <li>Hoban "Wash" Washburne</li> <li>Inara Serra</li> <li>Jayne Cobb</li> <li>Kaylee Frye</li> <li>Simon Tam</li> <li>River Tam</li> <li>Derrial "Shepherd" Book</li>
</ul>
<br>
<button>Bring them back!</button> <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="js/index.js"></script>
</body>
</html>

Custom Stagger Start Point - Script Codes CSS Codes

ul { display: inline-block; list-style: none; padding: 0;
}
/* Make things perty */
html { height: 100%;
}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background: url(http://www.jmchristensendesign.com/wp-content/themes/jmcdsn/images/intro_default-background.jpg); color: #fff; height: 100%; padding-top: 2em; text-align: center;
}
h1,
h2 { margin: 0; text-transform: uppercase; text-shadow: 0 0 0.5em black;
}
h2 { font-weight: 300;
}
button { border: none; border-radius: 0.25em; background: orange; padding: 0.25em 0.5em; -webkit-transition: background 250ms ease-in-out; transition: background 250ms ease-in-out;
}
button:hover { background: #cc8400;
}
.pen-intro { max-width: 640px; margin: 0 auto;
}
a { color: orange; text-decoration: none; -webkit-transition: color 250ms ease-in-out; transition: color 250ms ease-in-out;
}
a:hover { color: yellow;
}

Custom Stagger Start Point - Script Codes JS Codes

(function(){ // On an list item click... jQuery('li').on('click', function(){ // Get the clicked item index so we can compare later var clickIndex = jQuery(this).index(); // Set up a new timeline // We should be able to do this with a simple TweenMax soon, but it appears to be broken still in 1.18.0 release. // According to this: http://greensock.com/forums/topic/12512-does-delay-work-with-cycle/ it should be fixed in the next version. Sweet! var tl = new TimelineMax(); // Our stagger animation tl.staggerTo('li', 0.3, { opacity: 0, x: -100, // Where the magic happens... cycle: { // For each animated element index, calculate our delay // Does the work of a for loop for us so we don't have to! Nice. // Learn more about cycle: http://greensock.com/gsap-1-18-0 delay: function(i){ // The 0.1 simply modifies the delay to not be a full second. That allows it to look more like a normal stagger. // The real meat is the part before the 0.1. It calculates the difference in index. return parseInt( Math.abs( clickIndex - i )) * 0.1; } }, // Just a little easing to help out ease: Back.easeIn.config(1) }, 0); // Our stagger delay is 0, so all elements start at the same spot, which we then override above. }); // Reset button jQuery('button').on('click', function(){ TweenMax.set('li', { opacity: 1, x: 0}); });
})();
Custom Stagger Start Point - Script Codes
Custom Stagger Start Point - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 3.5
Size 4,001 Kb
Views 40,480
Do you need developer help for Custom Stagger Start Point?

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!

Jon Christensen (JMChristensen) Script Codes
Name
SVG Button Animation
Animated gradient text
Raphael SVG Circle Timer
Graphs and Snap.svg
Image Cover
CSS Banners
Responsive SVG Overlay
Simple CSS Loaders
SVG Image Blur
Panel Navigation
Create amazing Facebook ads 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!