Jump to content
GreenSock

krs

Tween Multiple Divs on Click

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

I am trying to create a series of divs where each div is clickable and animates the rest. So for example:

I have 4 divs.  The first div has a class, ".active" that gives it a fixed:position and is centered to the viewport.

 

.active{

position:fixed;

}

 

<div id="slide1" class="active"></div>

<div id="slide2"></div>

<div id="slide3"></div>

<div id="slide4"></div>

 

If I click on #slide2 then:

#slide2 becomes active and tweens to #slide1 position aka the center of the viewport.

#slide1 tweens to a new position.

#slide3 tweens to a new position.

#slide4 tweens to a new position.

 

Respectively the same would happen if I clicked on #slide3:

#slide3 becomes active and tweens to #slide1 position aka the center of the viewport.

#slide1 tweens to a new position.

#slide2 tweens to a new position.

#slide4 tweens to a new position.

 

When I click #slide2 the div(#slide2) tweens to the active position(center of viewport) and #slide1 to a new position as it should. Then i click #slide1, and #slide2 tweens back to its original position and #slide1 becomes active. So far so good. However when I click #slide2 again nothing happens.

 

I am aware that the problem is that with each click I add another timeline to the previous timeline but not quite sure how to fix that.

 

  have set up a pen that hopefully better explains what I am trying to achieve. 

anim.3gp

See the Pen YYaJeR?editors=1010 by riginosk (@riginosk) on CodePen

Link to comment
Share on other sites

Hi @krs,

 

Welcome to the forums!

 

It seems to me you want the ability to toggle tweens. Have a look at this thread here, it should give you the guidance you need:

 

 

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

Hi @Dipscom

 

Thank you for your fast reply this is very helpful. I was wondering how would you go by animating all the divs when one is clicked. here is an example  of what im trying to achive in codepen with pure css:

See the Pen YYEvpK by riginosk (@riginosk) on CodePen

 

Link to comment
Share on other sites

Hello @krs!

 

Well, I wouldn't claim that as being 'pure css' as you're toggling the classes with jQuery. :P

 

There are dozens of ways to animating all divs when one is clicked. You could target a specific class they all share, target all divs that are children of another, or any other way you could think of. But taking the example you have given on the previous post, I've made the following, see if that helps:

 

See the Pen bajGze by dipscom (@dipscom) on CodePen

 

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