Jump to content
GreenSock

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

addEventListener not working

Recommended Posts

Hello,

All event listeners are working for me except for this one: 

 

Function creation

let fadeOutHeroContent = function(){
  console.log('Lets fade ".hero" out...');
  loading.to(heroEL, .5, { opacity: 0, ease: Power4.easeOut });
}

code on line: 22 - 25


Function call on event listener:

// User option to skip ".hero" content - remove it
skipEL.addEventListener( "click", fadeOutHeroContent);

code on line: 46

Full code is here:
codepen link

 

Thank you.

See the Pen wZdxbE?editors=0010 by designsbyharp (@designsbyharp) on CodePen

Link to comment
Share on other sites

Your timeline is paused. If you try to animate out that content before you've played it via one of the play buttons, it won't work. Please try this:

 

let fadeOutHeroContent = function(){
  console.log('Lets fade ".hero" out...');
  loading.to(heroEL, .5, { opacity: 0, ease: Power4.easeOut });
  loading.play();
}

 

Happy tweening.

  • Like 2
Link to comment
Share on other sites

Hi @harp,

 

The onComplete needs to call an anonymous function, like so

 

loading.to(progressBarEL, 7 , { width: '100%', ease: Power4.easeOut,  onComplete: function(){ fadeOutHeroContent(); }});

 

 

And the listener is "listening", but not responding how you expect it to. Try standalone tweening the element's opacity rather than adding to the Timeline.

 

See the Pen qwmvyb by sgorneau (@sgorneau) on CodePen

 

Edit: Darn it @PointC ... didn't see you I there.

  • Like 3
Link to comment
Share on other sites

Ha! I think I jumped the line. I had this open in one window which didn't indicate claimed, but when I answered and moved back to another tab, I saw you claimed it. :ph34r:

 

Yeah, I'd also echo @Shaun Gorneau's advice about just tweening out the opacity via a stand alone tween rather than adding to an existing timeline. 

  • Like 4
Link to comment
Share on other sites

Okay made the changes:

See the Pen wZdxbE?editors=0010 by designsbyharp (@designsbyharp) on CodePen

 

Does this look better? But start/restart/pause don't work on the second run through..

 

How come TweenMax does the trick and loading.to/set doesn't?

Thank you.

Link to comment
Share on other sites

Hi Harp,

 

The events are being fired correctly, the code is executing as expected. You only have missed adding the correct commands on your functions. You need to review what they are supposed to do and write more logic to handle.

 

Here's an example:

let startTimeline = function(){
  console.log("lets start..."); // When looking at the console, you can see this always runs
  loading.play(); // This will tell the timeline to play but, once the timeline has played once, it will stay at the end position unless you use .play(0), which will cause it to jump back to the very start.
  TweenMax.set(progressBarEL, { width: '0%' }); // Here you reset the progressBarEL even though this is meant to be the start of you animation
  TweenMax.set(heroEL, { opacity: '1' }); // Here you reset the heroEL even though this is meant to be the start of you animation
}

let restartTimeline = function(){
  console.log("restarting..."); // Similarly, looking at the console, you can see this runs correctly when clicking
  loading.restart(); // You restart the loading bar animation correctly
  /* But you forget to reset the progressBarEL and the heroEL, the bellow should exist in your code
  	TweenMax.set(progressBarEL, { width: '0%' });
  	TweenMax.set(heroEL, { opacity: '1' });
  */
}

 

There are other little bits in your code that are missing, I encourage you to read your code again, think of all the steps that should be inside each function to generate the behaviour you are looking for.

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