Jump to content
GreenSock

jeansandjacktrequired

Simple tween

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 there,

 

I am a new animator with a few basic questions. I want to animate a series of images one after another. I want an image to animate in, hod for a second and then animate out. Then I want the second image to animate in hold and animate out. Ditto for the third.

 

This is the code I have so far. The images animate in but I am not sure of the best way to have them hold and then animate out befor the next image comes in. Suggestions?



(function($) {

var img1 = $('buff_chicken'),
img2 = $('mac_cheese'),
img3 = $('sandwich'),

tl = new TimelineLite();

tl
.from(buff_chicken, 0.3, {y: -250, ease: Back.easeInOut.config(1.7), autoAlpha: 0,})
.from(mac_cheese, 0.3, {x: -300, ease: Back.easeInOut.config(1.7), autoAlpha: 0,}, '+=1')
.from(sandwich, 0.3, {x: 300, ease: Back.easeInOut.config(1.7), autoAlpha: 0,}, '-=0.15')

})(jQuery);

Link to comment
Share on other sites

Hi jeansandjacktrequired :)

 

Welcome to the GreenSock forums.

 

This sounds like a good job for the staggerTo() method:

http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/staggerTo/

 

You can give all of your images or divs the same class and then easily stagger them on and off screen. By using the same class for all of them you avoid all the additional variables and you can add/remove images without having to make any changes to the animation. I made a really simple pen so you can see how this could work for you:

 

See the Pen XKMbzY by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

If you have any additional question, please make a simple CodePen for us so we can more quickly find the problem and/or offer suggestions. Here's how to make a CodePen demo:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening and welcome aboard.

 

:)

  • Like 2
Link to comment
Share on other sites

YOU sir are fabulous! Thank you !  This is just what I need so I can show my anime tomorrow at the weekly design meeting.

  • Like 2
Link to comment
Share on other sites

An easy way would be to take the last image out of your stagger tween and animate it by itself when the stagger has completed. 

 

Here's a revised pen:

 

See the Pen aZJdxE by PointC (@PointC) on CodePen

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

That is exactly what I was working towards.

Now, what if I wanted red box to animate from the left, stay on stage for a second and fade to the right, green animate from the right, stay on stage for a second and fade to the left, and then blue animate from the top. 

Sorry for so many questions. I am also going through all of the tutorials

Link to comment
Share on other sites

In that case, you'd want to take advantage of the cycle property.

tl.staggerFrom(".box", 1, { cycle:{ x:[ -400,400,0,0 ],y:[0,0,-400,400] } },3)
tl.staggerTo(".box", 1, { cycle:{ x:[ 400,-400,0,0 ],y:[0,0,400,-400] },autoAlpha:0 },3,2)
tl.from(".lastBox", 1, {x:400})

Here's a revised pen:

 

See the Pen jrBqWV by PointC (@PointC) on CodePen

 

More info about cycle and stagger:

http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/staggerTo/

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

I should be able to figure this out but -- I wish to animate your colored boxes from the bottom of my banner on the y axis. 
 

Fade in from the bottom sit for a second or two and fade up with the last box fading in and remaining in place. 

 

I tried changing the x: to y: but I am not having success in animating on the y axis like your pen  

See the Pen aZJdxE by PointC (@PointC) on CodePen

 

Link to comment
Share on other sites

o.k. - since you want them all to animate on the y axis in the same way, we won't need to use the cycle property. You can go back to a regular stagger.

 

Here's the code:

tl.staggerFrom(".box", 1, { y:400, autoAlpha:0 },3)
tl.staggerTo(".box", 1, { y:-400, autoAlpha:0 },3,2)
tl.from(".lastBox", 1, {y:400})

My revised pen:

 

See the Pen GqWxgj by PointC (@PointC) on CodePen

 

Does that help?

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

I have a new question you regarding your code pen:

 

See the Pen GqWxgj by PointC (@PointC) on CodePen

 

 

how can I get these animations to run a bit quicker and slightly overlap each other as one animates in and the other animates out.  I have been playing with your code a bit. I tried adding this: '-=0.15'  to the code but it didn't work.
 

var tl = new TimelineMax();
 
tl.staggerFrom(".box", 1, { cycle:{ x:[ -400,400,0,0 ],y:[0,0,-400,400] } },3)
tl.staggerTo(".box", 1, { cycle:{ x:[ 400,-400,0,0 ],y:[0,0,400,-400] },autoAlpha:0 },3,2,'-=0.15' )
tl.from(".lastBox", 1, {x:400})
Link to comment
Share on other sites

You could try this:

tl.staggerFrom(".box", 1, { y:400, autoAlpha:0 },2)
tl.staggerTo(".box", 1, { y:-400, autoAlpha:0 },2,2)
tl.from(".lastBox", 1, {y:400},"-=1")

Revised pen:

 

See the Pen pbALvN by PointC (@PointC) on CodePen

 
Happy tweening.
:)
  • 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.
×