Jump to content
Search Community

rscarpim

Members

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Posts posted by rscarpim

    Vertical bars Chart

    in GSAP

    Posted

    This is what I got so far:

      

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">



    <title>Document</title>
</head>
<body>


    <div class="img-wrapper-1">

        <img  id="img-bar" src="bar-1.png" style="opacity: 0">
    </div>

    <script src="scripts/vendor/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script>


    <script>

        let bars = document.getElementById('img-bar');

        let tl = new TimelineMax({});

        tl.set(bars, {autoAlpha: 1});
        tl.from(bars, {scaleY: 0, transformOrigin: '0% 100%', stagger: .1});
    </script>


</body>
</html>

     

    Vertical bars Chart

    in GSAP

    Posted

    Hey guys sorry about the question, but I've trying to implement the solution that @elegantseagulls posted, but I need more help.

     

    is there a cdn that I can use for the gsap, also how do I implement that, like how I instantiate the gsap class, and then make the calls.

     

    Sorry guys I'm just a new guy trying to use this amazing tool.

     

    Thanks.

    Vertical bars Chart

    in GSAP

    Posted

    Hey guys thank you so much for the reply.

     

    I'm using a .png file, for the bars, for example I have 2 bars, so I have to different .png files and I'm showing them from bottom to top, but I would like to know a different way to do it, I mean without using a .png file

     

    Thank you guys for the help!!!!

    How to create a pizza chart

    in GSAP

    Posted

    Hey Pointc.

     

    My idea is create a <img> inside a wrapper and animate the pizza, so it's a DOM animation.

    So probably it's kind of "static" content.

     

    I had an example to animate bars. 

      

            var timeline = new TimelineLite({ paused: true }),
            $chart  = $('.su__comp-chart'),
            $x_axis = $chart.find('.su__chart-x-axis'),
            $y_axis = $chart.find('.su__chart-y-axis'),
            $axis_labels = $('.su__chart-axis-label'),
            $bar_1  = $('#su__chart-bar-1'),
            $bar_2  = $('#su__chart-bar-2');

        timeline

            .staggerFrom($axis_labels, 0.5, { opacity: 0 }, 0.1)
            .add([
                TweenLite.fromTo($bar_1, 2, { height: '1%' }, { height: '56%' }),
                TweenLite.fromTo($bar_2, 2, { height: '1%' }, { height: '54%' })
            ]);

    And them play.

      

    timeline.play();
×
×
  • Create New...