Simple TweenMax code and guide

 TweenMax


You can use tween max for small animations example;

code;

let section = document.querySelector("section");    It will select an element
TweenMax.to(section,1,{scale:1.5})  its syntax is TweenMax.to(element, duration, animating property)

Html code:

    <section>

        <h1>Hello World</h1>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, est eligendi! Labore nisi excepturi dignissimos officia doloremque repellendus, ducimus totam nulla et, esse sint? Vero officia obcaecati assumenda recusandae dolorum consectetur possimus omnis odio minus praesentium fugit placeat qui hic deserunt vel architecto atque excepturi labore doloremque, quia optio. Id quaerat cupiditate possimus, qui quia harum illo odit illum, dolor voluptatibus sequi et nobis officia adipisci molestiae accusamus temporibus explicabo a minus magnam voluptas, distinctio libero vitae. Quasi ab reiciendis laborum provident repudiandae debitis voluptatum? Natus quibusdam sed maxime corporis consequuntur architecto dolor eos sequi tenetur dignissimos laudantium commodi, veritatis quos deleniti fuga? Quidem aliquam omnis nobis nam harum odit minima inventore exercitationem, dolorum modi repellendus vel, excepturi alias, consequatur quia? Sint, asperiores! Laudantium earum incidunt consectetur atque quis fuga, rem            facere consequuntur corporis! Magnam veritatis nobis consequuntur hic repellendus, at facere vero quia aut vitae blanditiis, similique neque? Repudiandae.</p>

    </section>

    <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>

    <script src="./index.js"></script>


Make sure include those bolded script tags for  tween animation


More codes

TweenMax.to(element, 1, {x:100});
TweenMax.to(element, 1, {y:50, delay:1});
TweenMax.to(element, 1, {opacity:0, delay:2});
you can use inside query selector too;

Using inside query selector

let section = document.querySelector("section");


document.querySelector("section").addEventListener("click", ()=>{
    TweenMax.to(section,5,{scale:1.5})
})

Comments

Popular posts from this blog

Gsap effect on click

Gsap timeline position parameters

Scroll magic javascript