Share Posted June 21, 2018 HI there, I am on the very first tutorial, trying to make a basic logo animate. So far, the logo does not animate at all. I loaded GS CDN and a custom javascript file after that, both before the </body> tag. In the HTML page, I added: <p><img class="radical-logo" src="images/HSDA-Annual-Meeting-2018/radical.svg" alt="its time to get radical" /></p> In my custom.js file I added TweenMax.to(".radical-logo", 3, {x: 80%, scale:2, ease:Back.easeOut}); I viewed source to be sure both the Greensock CDN file and the custom.js file were loading properly. The only css I've created in my custom.css file is the following, thinking that I want the logo to start small and get bigger: .radical-logo {transform: scale(.25); margin-top: 30px;} Any ideas why I cannot get this simple svg to fly? See the Pen by agenda-2018 (@agenda-2018) on CodePen Link to comment Share on other sites More sharing options...
Share Posted June 21, 2018 First of all, welcome! Hang in there, you'll get it working and then you'll really enjoy the tools The x: 80% is invalid JavaScript - you need to have the percentage value in quotes, like x: "80%" because of the "%" sign. And actually, if you're doing a percentage-based translation, it's recommended that you use xPercent instead of x: //works, but can be problematic in a few edge cases: x: "80%" //best: xPercent: 80 Does that solve things for you? 3 Link to comment Share on other sites More sharing options...
Author Share Posted June 21, 2018 (edited) Oh, that's great info! Thanks for responding so quickly! I tried that and it didn't solve my problem. I also removed the "x" factor completely for troubleshooting. So now it's just TweenMax.to(".radical-logo", 3, {scale:2, ease:Back.easeOut}); I wonder if the CMS (Joomla) is conflicting in some way. I'm not seeing errors but want to consider every possibility. The CMS loads JQuery 1.12.4 but not JQuery Animate. I also moved the Greensock script and custom.js to just below <body> so that it loads before the content loads. No success there either. Edited June 21, 2018 by Yaya tried something new to troubleshoot. Link to comment Share on other sites More sharing options...
Share Posted June 21, 2018 I just visited the page you posted, opened Chrome Dev tools and pasted in the code you provided and saw the animation. That proves TweenMax is loading. It looks like you are loading your custom.js is not loading as it is in a link tag and not a script tag <link rel="stylesheet" href="https://www.hsdafordiversity.org/templates/hsda/js/custom.js" type="text/javascript" /> Don't worry, we've all made these types of mistakes. 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 21, 2018 Ah yes, Carl! Forest through the trees... glad it was a simple solution. Thank you! Link to comment Share on other sites More sharing options...
Author Share Posted June 21, 2018 Whoa... it's working.. it's working!!! Now I can separate out the logo elements and really have some fun! 1 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