Alternate Tween Properties - TweenMax

Developer
Elliot Geno
Size
2,215 Kb
Views
22,264
  1. Alternate Tween Properties - TweenMax Previews
  2. Alternate Tween Properties - TweenMax HTML Codes
  3. Alternate Tween Properties - TweenMax CSS Codes
  4. Alternate Tween Properties - TweenMax JS Codes

How do I make an alternate tween properties - tweenmax?

Adding a new "alternate" property for TweenMax.. What is a alternate tween properties - tweenmax? How do you make a alternate tween properties - tweenmax? This script and codes were developed by Elliot Geno on 11 September 2022, Sunday.

Alternate Tween Properties - TweenMax Previews
IQ Test

Alternate Tween Properties - TweenMax - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Alternate Tween Properties - TweenMax</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bob"></div>
<div class="bob"></div>
<div class="bob"></div>
<div class="bob"></div>
<div class="bob"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Alternate Tween Properties - TweenMax - Script Codes CSS Codes

body { background: black; margin: 0; margin-top: 20vh;
}
.bob { width: 200px; height: 20px; background: #333; position: relative; display: block; margin: auto; margin-bottom: 10px; margin-top: 10px;
}

Alternate Tween Properties - TweenMax - Script Codes JS Codes

var items=document.querySelectorAll(".bob");
for(var i=0;i<items.length;i++){ TweenMax.to(items[i],.5,{x:i%2==0?"+=200":"-=200",opacity:0, delay:.1*i});
}
/* It would be a great thing to add to TweenMax that already handles an array of objects.
If you add this to where you set up your for-loop for multiple tweens, you first check to see if an alternate properties exist.
If it does, flip flop between both properties as you set up your tweens.
I could see a possible new custom property being added like this:
TweenMax.staggerFrom(".bob",.5,{opacity:0,x:"+=200",delay:1,alternate:{x:"-=200"}},.2);
UPDATE: I created a new version of TweenMax to do just this!
https://dl.dropboxusercontent.com/u/1256960/%20Research/JS/TweenMaxAlternate/index.html
Also added a topic on the Greensock Forums
https://greensock.com/forums/topic/12208-alternating-property-direction-with-any-array/
*/
Alternate Tween Properties - TweenMax - Script Codes
Alternate Tween Properties - TweenMax - Script Codes
Home Page Home
Developer Elliot Geno
Username pyrografix
Uploaded September 11, 2022
Rating 3
Size 2,215 Kb
Views 22,264
Do you need developer help for Alternate Tween Properties - TweenMax?

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!

Elliot Geno (pyrografix) Script Codes
Name
Gravitational Wave IS DARTH VADER
Following a Path
Prism
A Pen by Elliot Geno
Eye Bee M
One Percent
Solar Explorer
Swarm
Dot Hopper - Pagination
Stained Glass
Create amazing love letters 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!