Jump to content
Search Community

Unfortunately Frustrated: How to simply play a timeline from click event?

cheestudio test
Moderator Tag

Recommended Posts

This should be so easy! I've combed the forums and Google and cannot understand why my timeline won't play when the toggle is clicked. It runs fine if it's unpaused and running on it's own, but I want this animation to occur when the user clicks the toggle (which will open a navigation panel and fade in the nav items).

 

I'm sure it's simple...what am I missing?  :( 

See the Pen bGBzvXy by CheeStudio (@CheeStudio) on CodePen

Link to comment
Share on other sites

Update:

 

OK, so this works in the Codepen, but not within my WordPress install, unless I wrap the entire thing in a document.ready() function:

 

	$(document).ready(function(){

		var listItems = document.querySelectorAll("#menu-primary-nav li");
		var navItems = gsap.timeline({
			paused: true,
			id: "nav"
		})
		.from(listItems, {
			autoAlpha:0,
			y:-25,
			duration:0.5,
			stagger: 0.2,
			delay:0,
			ease: "power3.inOut"
		}
		);	

		var navToggle = document.querySelector('.navbar-toggle');
		navToggle.addEventListener('click', function (event) {
			navItems.play();
		});

	});

Why is this? I'm running jQuery 3.5.1 and it's already wrapped in:

 

(function($){
  
})(jQuery);

I thought document.ready(); was deprecated?

Link to comment
Share on other sites

My guess is that your <script> that contains your GSAP code is in the <head> (or somewhere toward the top) of your page, thus when the browser reads it and attempts to execute it immediately, none of the elements you're trying to animate even exist yet! The browser hasn't read that far yet or parsed the whole page. For example:

<head>
  <script>
    // WON'T WORK! The box element hasn't been parsed yet. Doesn't exist. 
    gsap.to("#box", {x: 100}); 
  </script>
</head>
<body>
  <div id="box">BOX</div>
</body>

The solution is to either wrap your code in a function that gets run AFTER everything has been parsed by the browser (the elements all exist) which is what you're doing with that jQuery.ready() call, or put your <script> at the bottom of the <body>. 

 

3 hours ago, cheestudio said:

I thought document.ready(); was deprecated?

I'm not sure, but  you could listen for the event manually (you don't really need jQuery for that), like:

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

Happy tweening!

  • Like 1
Link to comment
Share on other sites

I thought that might be the case (script is in the head), but I have my custom workflow using GULP which concatenates in the order I specify, so GSAP is assuredly getting included ahead of my tweens, and all of that gets included into a minified JS file in the footer

 

Also, I have another Timeline which is executing just fine! The only thing that is not working, is firing the timeline from the click trigger. If I wrap it all in document.ready (and yes, you're write I don't need jQuery for that: force of habit!), it works! But if I don't, then the click trigger does not execute the timeline.

 

I'll keep troubleshooting and post back here if I find an answer. The fact it works in CodePen at least gives me a lead, and obviously it's something to do with the document ready state.

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...