rscarpim Posted March 27, 2020 Share Posted March 27, 2020 Hello guys. I'm trying to create a vertical bars chart, that starts from bottom to top revealing itself something like this: Can you guys help me please Thank you and Best Regards Ricardo See the Pen PwmLre by alminyana (@alminyana) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted March 27, 2020 Share Posted March 27, 2020 We're more than happy to help with any GSAP related problems or questions. That animation is not too difficult. Are you working with DOM elements, SVG or maybe canvas? Show us what you have so far and we can point you in the right direction. Thanks. 3 Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 27, 2020 Share Posted March 27, 2020 Once you have your bars math for heights set, the tween for this would look something like, to animate them up from the bottom: gsap.set(bars, {autoAlpha: 1}) // assuming you set a visibility hidden to prevent fouc. gsap.from(bars, {scaleY: 0, transformOrigin: '50% 100%', stagger: .1}) 5 Link to comment Share on other sites More sharing options...
rscarpim Posted March 27, 2020 Author Share Posted March 27, 2020 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!!!! Link to comment Share on other sites More sharing options...
PointC Posted March 27, 2020 Share Posted March 27, 2020 I'd set it up with some divs and then use a stagger of the scaleY property like @elegantseagulls posted above. 2 Link to comment Share on other sites More sharing options...
rscarpim Posted March 27, 2020 Author Share Posted March 27, 2020 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. Link to comment Share on other sites More sharing options...
PointC Posted March 27, 2020 Share Posted March 27, 2020 Have you gone through the Getting Started guide? 1 Link to comment Share on other sites More sharing options...
rscarpim Posted March 27, 2020 Author Share Posted March 27, 2020 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> Link to comment Share on other sites More sharing options...
PointC Posted March 27, 2020 Share Posted March 27, 2020 You can probably remove that image from the div and just use a background color for now. Then add some more divs & CSS to style them to your liking. Have you tried making a demo as I suggested above? It will be a lot easier to offer assistance if you do that. Thanks. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 28, 2020 Share Posted March 28, 2020 Also I highly recommend using GSAP 3! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now