Jump to content
Search Community

Club GS Newbie can't get simple Tween to animate

Yaya test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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? 

 

  • Like 3
Link to comment
Share on other sites

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 by Yaya
tried something new to troubleshoot.
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...