Jump to content
Search Community

Use of TweenLite to and from

gsmas 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 all,

I have a general question about TweenLite to and from.

How can I realise multiple images scalable?

Can I use following:

TweenLite.to("firstimage", 1.0, {opacity:1.0, delay:0.6, scaleX:1.2, scaleY:1.2});

After that for the second image

TweenLite.to("secondimage", 1.0, {opacity:1.0, delay:0.8, scaleX:1.2, scaleY:1.2});

 

I have tried but not succeed. Only the last one is scalable the first one not.

 

See the Pen dObMjE by gsmas (@gsmas) on CodePen

 

Thanks in advance

Link to comment
Share on other sites

Hello gsmas

 

Thank you for the codepen:

  • Are you trying to animate each box one after another, or at the same time?
  • Are you trying to stagger the boxes?

If you are trying to sequence your tweens take a look at these video tuts by GreenSock

 

Sequencing tweens and timeline:

 

 

Stagger tweens:

 

 

GSAP JS Jump Start:

 

https://greensock.com/jump-start-js#from-tween

 

Any additional info would be highly appreciated, thanks! :)

Link to comment
Share on other sites

Hi Joanthan,

thanks a lot. I am trying to animate each box one after another.

Following Step:

1- first blue box will appear than after one second the blue box will be scale to 1.12 (x and y)

2- Finally the green box wil appear and after one second delay the green box will be scale to 1.12. (This is what we are seeing in copepen)

I play with the code but till now the same problem the first step doesnot appear.

Thanks in advance

Link to comment
Share on other sites

Im still a little confused. You say the blue box fades in first and then scale to 1.12 but i dont see that scale value in your example.

 

Have you looked at the video on sequencing your tweens i posted above.

 

Please try:

  1. You should comment out all tweens except the first one.
  2. Then get that first tween to animate the way you want.
  3. Then uncomment out the 2nd tween and get that the way you want.
  4. and so on and so with the other tweens

Make sure that if you change your codepen to fork (copy) it so others looking dont start to test your codepen and then if you change it, it will get confusing,

 

Also since your using from tweens check out this video

 

  • Like 1
Link to comment
Share on other sites

Hi Jonathan,

sorry for confusion. I have tried as you explain me. It functions but not as I want. Please check

new version

See the Pen MbgmzQ by gsmas (@gsmas) on CodePen

 

The animation effect should work like that

old version

See the Pen dObMjE by gsmas (@gsmas) on CodePen

 

Zooming effect. Here in old Version the only Problem was with blue box as I mention above.

In the new Verion the blue box and everything appear but the animation is not as I want.

Zooming effect should be like old version. In old version one cannot know wether or not the second Image is on the first one.

In the new Version you see the differecne prompt.

Thanks in advance

Link to comment
Share on other sites

Like Jonathan, I'm having a hard time understanding what needs to happen.

This is mostly because you have 4 elements that all look pretty much the same sitting on top of each other and hidden.

With these demos it really helps if we can see the elements that need animating (and they are clearly labeled).

I appreciate that you used blue and green in the names but I didn't know what the difference was between blue and blue1.

 

Sometimes its better just to lay everything so everything is visible and you can focus on the timing and sequencing of properties that are easy to see.

 

I took a guess at what you are going for. Is this close?
 

function animate(){   
        TweenLite.from(".blue", 0.8, {autoAlpha:0,  ease:Power0.ease});
        TweenLite.from(".blue1", 0.6, {scale:0.5, autoAlpha:0, delay:1});       
        TweenLite.from(".green",0.9, {autoAlpha:0, delay:3,ease:Power0.ease});
        TweenLite.from(".green1", 0.9, {autoAlpha:0, delay:4, scaleX:0.5, scaleY:0.5});     
}
 
 
notice in the css I gave all the elements a class of .box which sets their visibility to hidden. I then tween in from and autoAlpha of 0.
  • Like 1
Link to comment
Share on other sites

Hi Carl,

 

thanks a lot.

 

Difference between blue and blue1:

Blue is the fixed image and blue1 for zooming.

The animation process:

the blue box is fixed and than zoom after 1 sec. For zooming purpose I have created blue1. (may be there is some other approach)

after 2 or 1 (its not important 2 or 1 or may be 0.9) sec of zooming the blue box change to green and finally the same zooming effect through green_1.

 

Is there any other possibility to zoom the blue box? For example with out needing blue1.

 

In the old version as I have mentioned:

 

See the Pen dObMjE by gsmas (@gsmas) on CodePen

 

May be here is some confusion. sorry for that. I am trying to clear it.

 

If you see the effect in the old version (

See the Pen dObMjE by gsmas (@gsmas) on CodePen

) and compare it with new version (

See the Pen yVBoRe?editors=0110 by GreenSock (@GreenSock) on CodePen

) than you see the difference. Lets forget the blue box for a while and only see the green box how it moves. If you observe exactly the green box (whole image) is zooming.

Following code is for that purpose

TweenLite.to(".green1", 0.9, {opacity:1.0, delay:4, scaleX:1.2, scaleY:1.2});}

 

I want to animate both blue and green box like that. I think I cannot use the TweenLite.to twice for blue1 and green1 simultaniously.

That is the main problem. I am new and trying to understand how far can I go with greensock.

 

Thanks in advance

Link to comment
Share on other sites

I have one more question related to the above Problem.

Is there any possibility to use Tweenlite.to for two different boxes?

 

TweenLite.to(".green1", 0.9, {opacity:1.0, delay:4, scaleX:1.2, scaleY:1.2});}

 

Thanks

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