Can I use jQuery :not() in a timeline, or alternative? I just need my sliding pages to work like an accordion, one open at a time.

[T.Gregory 4 Likes (Newbie)]

 

My demo on codepen has 3 buttons and 3 boxes. It's a simplified model that just needs the help of a selector filter like :not()

 

I just need the animations to go one at a time like an accordion: If div "A" is open, then clicking the button to open "B" will close "A" first, then open "B" . . . same with "C" & "D" 

 

My Demo should be pretty close - its just missing a way to filter and maybe clear, I've seen some major overkill for this and I'd like to keep its simple with the way I'm altering between Class and Id's of buttons and divs.

 

I've put 20+ hours into building jquery functions and following overkill after overkill on stack overflow and then never finding any docs on how to include GSAP - so I scrapped everything and started over as simple as I could with a GSAP timeline. It seems like this should be pretty easy for anyone who knows GSAP well enough.

 

I can never find docs that answer anything about functionality or integration, theres a lot of talk "about" the animations, but rarely useful examples of syntax.

 

So can anybody help me? 

See the Pen oXmLYR by code-a-la-mode (@code-a-la-mode) on CodePen

[joe_midi 238 Likes (Specialist)]

Hmm.

 

I took a guess at what you wanted, and I think I've got it.

 

See the Pen KpJNxg by joemidi (@joemidi) on CodePen

[T.Gregory 4 Likes (Newbie)]

That looks great Joe!  So many of the other solutions I saw on overstack were overkill, 3-4 paragraphs of JS Yours is compendious and to the point. 

 

Would it be easy to have each box's own button send it back as well? Click to the left, click again and back to the right, like a toggle. 

[joe_midi 238 Likes (Specialist)]

Ah okay.

 

So this is probably not the best way of doing it, but I added a onComplete functions that adds an "open" class to the target boxes, so the it just checks if its open, and if it is it sends it back, if not it animates it open.

 

See the Pen KpJNxg by joemidi (@joemidi) on CodePen

 

I hope that makes sense.

[Carl 9,066 Likes (Superhero)]

Great job, Joe!

 

T.Gregory,

 

StackOverflow is great for many things, but I think you will find that if you have questions related to directly to GSAP the support you will find here can't be beat.

 

Best thing to do is to stick around and read a few posts here daily, you'll be amazed at what you can learn.

[OSUblake 9,990 Likes (Superhero)]

It might be better to reuse the tweens so that the duration stays the same.

 

See the Pen vObmBR by osublake (@osublake) on CodePen

[joe_midi 238 Likes (Specialist)]

Doh, reverse!

Yes of course, theres that too!

 

@T.Gregory, yea like Carl said, you'll be amazed at what you can learn here in these forums.

[OSUblake 9,990 Likes (Superhero)]

I learned that starting out in reverse trick from @Diaco, which is really nice because you don't have to pause the animation. Now all you have to do is reverse every animation except for the one you selected. 

[T.Gregory 4 Likes (Newbie)]

I was on the road all Wed but got home and finally got a chance to play with this code in my website. I have to admit I was stumped at first, but I've integrated it and its working great. 

 

So I named the classes and ID's for clarity in the demo but, unfortunately, I needed to rename everything to sync. Being totally unfamiliar with the mechanics of the JS in this one, I was baffled that the names of the ID's weren't stated in the script and then I figured that this [  var target = _target.id;

  target = '#'+target.substr(4); ] calls for getting the ID of each link's target. And then I was stumped again when I changed the ID's and It broke the function. 

 

I'm curious how this works. I can leave the names Blue and Foo etc but I'll need to add a few more links and thought it'd be smart know the logic of it better before I tried. In my website, this function is actually moving screens from left offscreen into the viewport for fullPort videos and an (awesome sortable!!!) image gallery.

 

I think I'll swap in Blake's update and then expand it from there. I'd love to know more about the math of this, a brief explanation or a doc reference would be appreciated.  

 

And Blake, regarding the draggable gallery, I realized today that its imperative that I can have my client sort the images on his end and that I can open it to see the order he has chosen. Is this possible? I'll post this question over in our Sortable Gallery forum with a little more detail. 

 

Joe - thanks for the idea and code. I'm looking for a consultant as I'm a month behind schedule and the more I learn, the more I realize how much I don't know. I'll need to stick to design with the help of a coder. If you or anyone you know would be interested, let me know and we can discuss. 

 

Todd Gregory Haney

[T.Gregory 4 Likes (Newbie)]

Hey Joe - are you out there?

 

I'm stumped again. I kept your original code cuz I wanted to have it return at a faster speed. Problem is, if I try to add any more links or it stops working. I have a total of 5 links in my site and the first 3 work great. But I can't add or alter the code in anyway or it breaks. I don't understand how the buttons refer to the specific ID's in the JS cus nothing is named there, but then I can't rename anything or add anything. 

 

Could you please help me finish it enough to use it, I'm so close to finally having this done.  

 

Todd

[T.Gregory 4 Likes (Newbie)]

Strike some of that. Chrome got me again. I opened the file in Safari and my additions worked. My Chrome all of the sudden doesn't apply my recent saves when I open it to view on my desktop. 

 

But if you still want to help, I'm wondering if I can change the tween to a timeline cuz I want to animate the div left but also control the opacity at a different rate. So the opacity fades in just as the div is settling into place. 

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

For issue with Chrome you need to clear the memory cache, for that I use ctrl+shift+r (windows) / cmd+shift+r (Mac).

 

For using a timeline, no problem using a timeline, just add both instances at the beginning using the position parameter. I'll use Blake's code because I believe is the best solution for this case:

$(".buttons").each(function(i, element) {
  
  // Assign a tween index to the button
  $(this).data("tween", i);
  
  // Create the tween this button will control
  tweens[i] = new TimelineLite().reversed(true)
    .to(boxes[i], 0.65, { left: "3vw" },0)
    .to(boxes[i], 1, { opacity: 0 },0);
});

I'm taking the opacity to 0, but you can use the value you want.