jeansandjacktrequired

Members
  • Content Count

    14
  • Joined

  • Last visited

Community Reputation

5 Newbie

About jeansandjacktrequired

  • Rank
    Member
  1. jeansandjacktrequired

    slightly overlapping animations on the stage

    Thanks!
  2. jeansandjacktrequired

    slightly overlapping animations on the stage

    I have a new question you regarding code pen: http://codepen.io/PointC/pen/GqWxgj/ 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
  3. jeansandjacktrequired

    Simple tween

    I have a new question you regarding your code pen: http://codepen.io/PointC/pen/GqWxgj/ 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})
  4. jeansandjacktrequired

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

    Repeat stagger animation but begin repeat on 2nd box

    thanks!
  6. jeansandjacktrequired

    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.
  7. 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 http://codepen.io/jeansandjacketrequired/pen/rLyRgB 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
  8. jeansandjacktrequired

    Simple tween

    absolutely! Thanks.
  9. jeansandjacktrequired

    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 http://codepen.io/PointC/pen/aZJdxE/
  10. jeansandjacktrequired

    Simple tween

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

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

    Simple tween

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

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

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