Elindo Posted August 31, 2021 Posted August 31, 2021 This is the code of the push button on line 65 btna.onclick = () => { extend.play(); retract.pause(); } This is the code of the time line that should be activated var extend = gsap.timeline({paused:true}); extend.to(cylrod, {x:200, duration:5, ease: "none"}); extend.to(pline1, {opacity:0, ease: "none"}, "<"); extend.to(aline1, {opacity:1, ease: "none"}, "<"); extend.to(aline2, {opacity:0, ease: "none"}, "<"); extend.to(aline1, {opacity:0, ease: "none"}, "+=0.1"); extend.to(aline2, {opacity:1, ease: "none"}, "<"); extend.to(aline2, {opacity:0, ease: "none"}, "+=1"); extend.to (pline1, {opacity:1}, "<"); extend.to (bline1, {opacity:0}, "-=5"); extend.to (bline2, {opacity:0}, "-=5"); And this is the query selector for A let btna = document.querySelector("#A"); I have done the same logic with all of the buttons using different sequence on their individual timeline, but none of them are activating... See the Pen bGREYoK by Elindo586 (@Elindo586) on CodePen.
Shaun Gorneau Posted August 31, 2021 Posted August 31, 2021 It's Javascript errors. Reducing your Javascript code to the basics for this shows that your code above works just fine. See the Pen WNOrMKE by sgorneau (@sgorneau) on CodePen. 3
Elindo Posted August 31, 2021 Author Posted August 31, 2021 Pretty cool formatting. Do you think the code didn't do anything because of the formatting? Also, why didn't the green box move? I have done some copy and paste from another code I wrote that was working fine in this area, but now it isn't working that well.... I wonder if it has to do with the copy and paste. Also.. I need to rearrange some of that sequence...
Elindo Posted August 31, 2021 Author Posted August 31, 2021 I got the color sequence I was looking for.. there was stuff from the old code I copied that wasn't suppose to be there. but for whatever reason the green box isn't moving.
GreenSock Posted August 31, 2021 Posted August 31, 2021 If you still need help, @Elindo, please provide a minimal demo and make your question very clear. It sounds like you made some changes to your code in the original demo (which looks to have a lot of extra code that isn't really necessary for a minimal demo) but it's hard to know if you're talking about the same demo or if your updates are reflected in the original.
Elindo Posted August 31, 2021 Author Posted August 31, 2021 This link below will be the most minimal / naked as it can get to code as individual push button.. For this one I am only looking why wouldn't cylrod move to x:200 in the timeline. cylrod is the green box that is not moving. After making the green box move, the most minimal/ naked coding will be the entire coding of the push buttons because the testing has to do with the ability of the buttons to pause the timeline of other buttons.... This one is the most minimal code I can possibly do for push button A See the Pen vYZLjJz by Elindo586 (@Elindo586) on CodePen.
Solution GreenSock Posted August 31, 2021 Solution Posted August 31, 2021 Because your cylrod variable is null. document.querySelector("Rod") produces no results. I assume you meant document.querySelector("#Rod") Happy tweening! 1
GreenSock Posted August 31, 2021 Posted August 31, 2021 1 hour ago, Elindo said: This link below will be the most minimal / naked as it can get to code as individual push button.. If you just don't understand why that one thing wasn't moving, strip everything else out. Literally everything. No other tweens. If it still isn't working, you know it has nothing to do with all that other stuff. Isolate, isolate, isolate - that's my best advice for troubleshooting. This is all you needed to show us: See the Pen b9b07956d06c064368b8caca49f026e9?editors=0010 by GreenSock (@GreenSock) on CodePen. Also, you can accomplish the same things with a lot less code: // LONG let aline1 = document.querySelector("#A1"); let aline2 = document.querySelector("#A2"); let bline1 = document.querySelector("#B1"); let bline2 = document.querySelector("#B2"); let pline1 = document.querySelector("#P"); gsap.set(aline1, {opacity: 0.5}); gsap.set(aline2, {opacity: 0.5}); gsap.set(bline1, {opacity: 0.5}); gsap.set(bline2, {opacity: 0.5}); gsap.set(pline1, {opacity: 0.5}); // SHORT gsap.set("#A1, #A2, #B1, #B2, #P", {opacity: 0.5}); And // LONG .to(pline1, {opacity:0, ease: "none"}, "<") .to(bline1, {opacity:0, ease: "none"}, "<") .to(bline2, {opacity:0, ease: "none"}, "<") .to(aline2, {opacity:0, ease: "none"}, "<") // SHORT .to("#P, #B1, #B2, #A2", {opacity: 0, ease: "none"}, "<") 3
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now