Jump to content
GreenSock

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

Why wouldn't my push button A wont activate the timeline?

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

  • Solution

Because your cylrod variable is null. 

 

document.querySelector("Rod") produces no results. I assume you meant document.querySelector("#Rod")

 

:)

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

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"}, "<")

 

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