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

[PinkMeNow 3 Likes (Newbie)]

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>

 

[OSUblake 9,990 Likes (Superhero)]

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.

 

 

 

 

[PinkMeNow 3 Likes (Newbie)]

Thank you for the reply.

It works on codepen if I remove defer, yet it doesn't work on the page: http://80.240.26.71/registration/

Is it an issue of page load sequencing?

[OSUblake 9,990 Likes (Superhero)]

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});

 

 

[PinkMeNow 3 Likes (Newbie)]

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