[slightly overlapping animations on the stage]

Thanks!

[slightly overlapping animations on the stage]

I have a new question you regarding 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 the 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})

 

any help is appreciated, thx

[Simple tween]

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})

[Simple animating multiple objects]

Hi all, newbie here

 

I am trying to create a very simple animation based on one of the animations in Greensock 101.

 05-Animating-Multiple-Objects

 

I want to have img1 fade in from the left and stay.

20 pixels below I want img2 to fade in from the right and stay.

and img3 will fade in from the left 10 pixels below img2 and stay

 

 

(function($) {

    

var one = $('img1'),

two = $('img2'),

three = $('img3'),

tl = new TimelineLite(); 

 

tl

.from(one, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut})

.from(two, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut}, '-=0.15')

.from(three, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut}, '-=0.15')

 

})(jQuery);

 

I am working with the above JS - i don't think the y values are correct yet (?)

I have confusions about calling this correctly in the CSS and html.

[Repeat stagger animation but begin repeat on 2nd box]

thanks!

[Repeat stagger animation but begin repeat on 2nd box]

Fantastic!  I am working up one way myself - going through a timeline tutorial right now. I'll include my codePen today or tomorrow if you would like to review.

 

I'll implement your way as well.

[Repeat stagger animation but begin repeat on 2nd box]

Hi all.

 

Here is what I want to learn today.

I have a simple fade in/fade out animation of several boxes. I want to repeat the animation but this is how I want to do it:

box 1, box 2, box 3, box4, box 5 - hold box 5 on the stage for a second then repeat box 2, box 3, box4, box 5 - hold box 5 on the stage forever.

 

 

here is my code pen

 

I think I may be looking into implementing nested timelines - correct?
something like this?

tl.add( firstPart() )
  .add( secondPart(), "-=0.5") //overlap 0.5 seconds

- - - -

Edit:  OK. This is how I think I should build this simple animation.

Timeline1  repeat 2

Box 1
Box 2
Box 3

Timeline 2 (or nested timeline) no repeat
Box 1
Box 2
Box 3

Box 1 and hold

 

See the Pen rLyRgB by jeansandjacketrequired (@jeansandjacketrequired) on CodePen

[Simple tween]

absolutely! Thanks.

[Simple tween]

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

 

[Simple tween]

Awesomesauce! I am learning about new properties for Greensock every day.

 

[Simple tween]

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

[Simple tween]

I wonder how I could get the last image to stay on the banner stage permanently

[Simple tween]

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

[Simple tween]

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);