Jump to content
Search Community

addEventListener not working

harp 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

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

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