greensock add class to elements one by one

Question

I want to add classes on HTML elements one by one.

TweenMax.staggerTo(".some-class-name", 0.5, { className: "+=animation-class" }, 0.5);

I have this code, but it doesn't work. More precisely it works, but it doesn't add className one by one.

How can I achieve an effect like this codepen but with className?

Answer 1

Seems fine to me.

Take a look at this jsFiddle.

Or look at the Snippet below.

var duration = 0.5;
var stagger = 0.5;
var someClassName = '.some-class-name';
var animationClass = 'animation-class';
TweenMax.staggerTo(someClassName, duration, {className: '+=' + animationClass, transformOrigin: 'bottom right', ease: Power4.easeOut}, stagger);

html, body { margin: 0; padding: 0; }

.some-class-name {
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    background: #0cc;
}

.animation-class {
    background: #cc0;
    top: 50px;
    transform: rotate(90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>

var duration = 0.5;
var stagger = 0.5;
var someClassName = '.some-class-name';
var animationClass = 'animation-class';
TweenMax.staggerTo(someClassName, duration, {className: '+=' + animationClass, transformOrigin: 'bottom right', ease: Power4.easeOut}, stagger);

Hope this helps.

Answer 2

You have a valid Query and if you just want to add a new class to the element. It can be done with TweenMax or TweenLite.

TweenMax

TweenLite.to(element, 0.5, {css:{className:'+=newclass'}});

or

TweenMax.to(element, 0.5, {css:{className:'+=newclass'}});

or

TweenMax.staggerTo(element, 0.5, {css:{className:'+=newclass'}});

You could make a forloop and then pass the class or do a foreach and add this class like this.

for more check out this link :

https://greensock.com/forums/topic/6376-using-greensock-to-change-classes-without-tweening-styles/