rscarpim
rscarpim's Achievements
0
Reputation
-
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>
-
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.
-
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!!!!
-
Hello guys. I'm trying to create a vertical bars chart, that starts from bottom to top revealing itself something like this: https://codepen.io/alminyana/pen/PwmLre/ Can you guys help me please Thank you and Best Regards Ricardo
-
Thank you ZachSaucier
-
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();
-
Hey PointC thank you for your reply. Yes I tried some CodePen but unsuccessfully so far. But I'll look again for that. Thank you.
-
Hello everyone. I'm looking for some example of pizza chart animation. Thank you everyone. Best regards