Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

jeansandjacktrequired

Members
  • Content Count

    14
  • Joined

  • Last visited

Community Reputation

5 Newbie

About jeansandjacktrequired

  • Rank
    Member
  1. 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
  2. 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})
  3. 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.
  4. 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.
  5. 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
  6. 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/
  7. Awesomesauce! I am learning about new properties for Greensock every day.
  8. 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
  9. I wonder how I could get the last image to stay on the banner stage permanently
  10. YOU sir are fabulous! Thank you ! This is just what I need so I can show my anime tomorrow at the weekly design meeting.
  11. 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);
×