Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PinkMeNow

GSAP code looks OK to me, but nothing is happening in browser

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

Greetings, I'm new to greensock/js so Im looking for little assistance here. What am I doing wrong?

 

<div id="sidemenu" class="sidemenu">
<a href="#registerhere"><strong>register here</strong></a>
<hr />
<a href="#whatisincludedinthefee"><strong>what is included in the fee</strong></a>
<hr />
<a href="#onedayattendance"><strong>one-day attendance</strong></a>
<hr />
<a href="#accompanyingpersons"><strong>accompanying persons</strong></a>
</div>


 

<script>
defer(function () { });
var $sidemenu = $('#sidemenu');
TweenLite.from($sidemenu, 5, {opacity: 0, ease: Power4.easeIn});
</script>

 

Link to comment
Share on other sites

12 minutes ago, PinkMeNow said:

What am I doing wrong?

 

Hard to say without seeing it. Posting a code snippet does not tell the whole story. Please put that in a demo.

 

 

 

 

  • Like 3
Link to comment
Share on other sites

4 minutes ago, PinkMeNow said:

It works on codepen if I remove defer

 

defer isn't a valid function, unless of course you have some script that provides a defer function. Wordpress sites have a lot of JavaScript files, and I'm not sure what you have going on with your site.

 

7 minutes ago, PinkMeNow said:

yet it doesn't work on the page: http://80.240.26.17/registration/

 

Check your dev tools console.

 

Uncaught TypeError: $ is not a function

 

That means the $ for jQuery isn't set. That's something you'll need to fix. It's probably something with jQuery's noConflict().

https://api.jquery.com/jQuery.noConflict/

 

This works.

 

var $sidemenu = jQuery('#sidemenu');
TweenLite.from($sidemenu, 5, {opacity: 0, ease: Power4.easeIn});

 

 

But you really don't need jQuery for that. You can pass the selector to the tween.

 

TweenLite.from("#sidemenu", 5, {opacity: 0, ease: Power4.easeIn});

 

 

  • Like 3
Link to comment
Share on other sites

yep that works using different type of selector instead of variable. thank you.

 

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.

×