Search the Community
Showing results for tags 'click events'.
Found 4 results
-
Hi, I have a problem with the syncing of click events. I've found many codepens about that but nothing works properly. 1. When I open the menu I have a timelineMax with the animation I want 2. When I close the menu I need another timelineMax (another animation), a fade-out not a reverse of the current timelineMax 3. The same thing for Test Drop which has a drop-menu 4. When the drop-menu is open and I close the entire menu (top-right trigger) there's a lack of syncing 5. How can I run a timelineMax to the end without any animation interfere meantime (by clicking the top-right trigger)? https://codepen.io/ZenTao/pen/OZBKBX I hope that is't not too much for this day! Thanks!
-
Hello, i have a scenario, where i wish to animate elements from the last position to the new one depending on a large set of button options. How do i make make code modular so not have the timeline in the click event function. Please see pen.
-
Hi, I have a menu trigger button that appears on a page in more than one place, so i've used classes as the selectors. I've worked out how to loop through the classes and toggle different functions to be called using an if else statement, but I can't seem to get this to work with tween max tweens. I've commented out a tween in the code below, which does the same as the vanilla javascript that is inside the same function, but i can't get it to work. How do i get a tween to be called as a current target? Any help would be awesome. Emily As well as the codepen above, here is the JS code for quick reference. var clicked = false; // sets the clicked state var $mainMenuButton = document.getElementsByClassName('desktopmenubutton'); // button to be clicked function newColor(e) { e.currentTarget.style.background = "black"; } function originalColor(e) { e.currentTarget.style.background = "red"; // e.currentTarget.TweenMax.to($mainMenuButton, 1, {background: 'red'}); } // loop through instances of the class and add functions dependent on the click state for (h = 0; h < $mainMenuButton.length; h +=1) { $mainMenuButton[h].addEventListener('click', function(e) { if (clicked === false) { newColor(e); clicked = true; // changed the clicked state } else { originalColor(e); clicked = false; } }); }
-
Hi there. New to the forum here. I searched for the answer here, but didn't find the answer so here goes. I am newer to js, but I am looking for gsap related answers not js. Just throwing that out there. I created a multi-step form using gsap. Here is smaller working portion of it. http://codepen.io/chrisMaki/pen/ggmBqL I created several small functions each containing their own timelines. I am using the functions inside EventListeners to show and hide fieldsets. Each function is passing arguments. Is there a way to connect multiple functions into one timeline? I am seeing strange behavior--I assume because of the multiple timelines firing. I tried using .add() but maybe I was doing it wrong. Also could I use .reverse() to reuse the same functions in reverse if a previous button were to be clicked.(sorry snuck that in there even though it may be off topic). Let me know if this is enough info. The pen has decent comments. Didn't want to add a heaping helping of snippets.
