TweenMax

 TweenMax



Make sure to include this, if you include only this script of tweenMax then even tweenlite also works 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" integrity="sha512-8Wy4KH0O+AuzjMm1w5QfZ5j5/y8Q/kcUktK9mPUVaUoBvh3QPUZB822W/vy7ULqri3yR8daH3F58+Y8Z08qzeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

It's syntax and it is also same as that of tweenlite just here there are some additional features;


const box1 = document.querySelector(".box1");
const box3 = document.querySelector(".box3");
const array = [box1, box3];
TweenMax.to(array, 1,{
    backgroundColor : "red",
    y : 200,
    autoAlpha : 0,
})


Some tweenMax Methods;

const allbox = document.querySelectorAll(".boxes")
TweenMax.staggerFrom(Element, duration, {
    other porperties --------,
    stagger : 0.5
})

const allbox = document.querySelectorAll(".boxes")
TweenMax.staggerTo(Element, duration, {
    other porperties --------,
    stagger : 0.5
})

const allbox = document.querySelectorAll(".boxes")
TweenMax.staggerFromTo(Element, duration, {
    other porperties --------,
    stagger : 0.5
})


concept of from and to is same that of "from and to" explained before in : TweenLite different methods (omgmdn01.blogspot.com)

Comments

Popular posts from this blog

Gsap effect on click

Scroll magic javascript

TweenLite different methods