Jump to content
Search Community

I want to tween multi div

Rao M. Rizwan Iqbal test
Moderator Tag

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

hi, 

 

 Thanks a lot for all your help, But i tried to work in your example it was not show results as i needed, So i am sharing with you my code, I tried to make this, It is showing Animation on frist Div, 

 

Now when I click it is hiding first div but How it will show New Div from bottom with New Background. 

 

http://www.raorizwan.com/boxes.rar

 

Thanks in Advance. 

Good Day

 

Hi, 

 

Here is one way to do it: 

See the Pen rKDEu by GreenSock (@GreenSock) on CodePen

You can replace the divs with img tags, but this simple example should get you started.

 

Be sure to go through the Jump Start: http://www.greensock.com/jump-start-js/

and Getting Started Guide: http://www.greensock.com/get-started-js/

 

Link to comment
Share on other sites

Hi 

 

I didn't have a lot of success working with your file. It seems like there is a lot of html code that is duplicated and you have multiple divs with the same ID. 

 

Its not clear to me at all what div is supposed to be revealed after the first div moves away.

 

I see that you are controlling your animation by attaching javascript to anchor tags:

 

<a  style="cursor:pointer;" onClick="t1.reverse()">

 

The problem here is that you can only call 1 function onClick. Right now you can only reverse the timeline, you can't put more code there to start another animation. You will have to call your own custom function that will then reverse() the first animation and play() a new animation.

 

Also it seems like you tried to force your code into one of our existing demos which makes it difficult to ascertain which code you really intend to be in the file.

 

When seeking support it really is best to start with the simplest code possible, which is why I provided that very basic example on codepen. More often than not, the process of reducing your work to the bare-minimum reveals what was causing the error. At the very least it makes it MUCH easier for us to figure out a way to help you.

 

Here is another version of my previous example that uses the concept of playing and reversing animations when needed: http://codepen.io/GreenSock/pen/nrHBp

 

Please fork that or create a new demo from scratch that will better help us assist you if necessary.

  • Like 2
Link to comment
Share on other sites

hi, 

 

   Thanks for your guide, But i am unable to call double functions on single link. also 

 

You can T1 is a variable, 

 

How can i define T2. So i can use my 2nd Div in T2. So when first time load Only T1 shows 

 

and when click on T1.play then it should reverse T1  and PLay T2. 

 

Please guide in this method, I tried different things but not working, 

 

this time i removed extra stuff only one box there, and need one function to Disapear the first one and show the 2nd, 

 

please help me with in this attachment , So i can see how you can handle this, 

 

Thanks 

boxes.zip

Link to comment
Share on other sites

hmm, there were still some problems as you are selecting h2 tags to animate AND you have h2 tags in both the content divs.

 

I would not suggest creating h2 elements with divs in them and then trying to tween the h2 elements. I was a bit confused by your html structure so I simplified it (a bit) so that you have 

 

#content and #content2 as the elements that are being moved around.

 

Here is the JavaScript:

 

var scene1 = new TimelineLite({});
scene1.set("#content", {visibility:"visible"})
.from("#content", 0.6, {top:-500, autoAlpha:0}); 


var scene2 = new TimelineLite({paused:true});
scene2.set("#content2", {visibility:"visible"})
.from("#content2", 0.6, {top:500, autoAlpha:0});


function goScene2() {
  console.log("goScene2")
  scene1.reverse();
  scene2.play(0);
}




function goScene1() {
  console.log("goScene1")
  scene1.play(0);
  scene2.reverse();
}

and your html "buttons" look like this

 

<a  style="cursor:pointer;" onClick="goScene1();"><img src="images/box2.png"/></a>

 

Again, you can only call 1 function per click.

 

I also had to give #content and #content2 position:relative in the css so that I could animate their top position.

 

hopefully the attached zip helps

 

 

 

 

 

boxes_working.zip

  • Like 2
Link to comment
Share on other sites

oh, and if you are tweening FROM autoAlpha:0, you don't need to set the element to visible, your timelines can look like this:

 

var scene1 = new TimelineLite({});
scene1.from("#content", 0.6, {top:-500, autoAlpha:0}); 


var scene2 = new TimelineLite({paused:true});
scene2.from("#content2", 0.6, {top:500, autoAlpha:0});
  • Like 1
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.
×
×
  • Create New...