Jump to content


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender
  • Location
    Los Angeles, CA

Contact Methods

  • Skype

coco's Achievements


Newbie (1/14)



  1. Carl and PointC Thanks for your help! .. I changed the outer container to not be a fixed width just to see if the forked worked and it did! I like option 3. I appreciate the examples showing the differences. I see the value of setting the original position with gsap and not in the css. But if I had more of these position points, would there be any drawback browser performance-wise of setting all their starting position percentage values in gsap? As an example, I created a pen using 5 absolutely positioned points in a div, each equidistant to cover the 4 corners and the center. http://codepen.io/nushi/pen/QydpwK I am able to absolutely position an object using a class. No big deal. Just CSS. I can see how using GSAP for setting the X and Y translate values is a big time saver and solves my original question about the end position being off after animation. But could adding more set points this way be a taxing to the browser .. . or more taxing than using plain CSS? Say I were to increase the position points to 5, or 10 or 20 points or more? Perhaps setting the values in GSAP first is best choice or only choice if I want the option of animating an object with a from animation to these end points? By the way, in this new pen I know I shouldn't be using a px width to start my animation from the right, but calculating the outerwidth on each container is challenging for me. (hmm... on second thought, maybe I need to use parent() ).. For now, I gave the right side the value: {right: "-100px"}. I think this is a good experiment as another way to place objects on a screen that could be animated rather than using the typical grid .. in some instances. And, if I were to use translate XY for positions around each of the anchor points, I would have even more flexiblity.
  2. First off .. Happy New Year to All I happen to be enjoying mine with a cup of coffee and some greensock practice. Yes, I am loads of geeky fun. So, I cannot quite wrap my head around what I am doing incorrectly with my timeline. See the codepen below as reference. http://codepen.io/nushi/pen/gPgaEN?editors=101 I have created a container div = #test Within this container I have a div absolutely positioned at the center (class="xy-pos-1") I am using the translate attribute because I want this div to be centered regardless of the its dimensions. And, within this div I am placing an image (class="xy-pos-2") that is also absolutely positioned at center relative to its container. Everything works as intended except when I want to animate the image from another position along the x-axis. The finally resting place is not correct. If you comment the timeline animation out, you will see the div is placed exactly as designed. The desired movement is from the right to its ending spot directly in the middle. This works sometimes. I have tried adding various positions to make the "from" position work properly but I have not succeeded. Can anyone shed light on this? I think I am not fully grasping the position parameters here. http://codepen.io/nushi/pen/gPgaEN?editors=101
  3. Thanks, Carl! So, basically, I wasn't far off and just had to remove the curly braces. I suppose it's best to make all the properties into one variable, in case there are more to add. Merry Holidays !
  4. Hi Trying to figure out what I am doing wrong with this pen: http://codepen.io/nushi/pen/MKjQPK I want to pass the properties for the timeline animation through a function's arguments. Passing in the element that is being animated is not the problem. Where I am stumped is with the property. The function has a .from animation. The starting position is what I want to pass as a variable. As you can see in my codepen, and below, I attempted to do this by declaring the CSS position in a var and then converting that CSS position into something that can be used in the timeline and passed as into the function (startPos). What I am doing does not work .... Any better ideas on how to achieve this? Thanks!!
  5. Hi Diaco! Thank you.. I really screwed that one up.. It's so simple!
  6. Hi guys I'm stumped on trying to figure this out: fading in an image and moving it from left (or from anywhere) at the same time. I don't know why it's eluding me and am hoping you can lead me in the correct direction. I created a simple codepen for this. I think I am confusing my syntax here or missing something basic. thanks!
  7. Hi OSU Not sequential like in a gallery modal but when one clicks on any link, the same gsap animation function is applied to the current "i" value and then animates to the next position in the array .. I am not sure this is how to think of applying the gsap transition function to any set of 'like' objects.. hope that makes sense -- thanks!
  8. So I created the effect I wanted with one plain little timeline : http://codepen.io/nushi/pen/ZbZPmw I created a master timeline for this only because I may be adding more functions to the page ... but wanted to post this here as a starter, in case anyone wanted it. To clarify, this was not really the challenge. The reason I was asking so many questions was because I wanted to use a js loop for this same effect .. ... not for doing a project. I just had a bit of trouble describing the transition... I haven't yet wrapped my head around the syntax for js loops ... back to drawing board ..
  9. ok.. thanks .. trying .. I am only trying to do this effect with GSAP as I am still learning . I am doing Petr's tutorial ( I have a couple) which is helping with the nested tl's- it's the syntax for loops etc that always gets me ... but thanks for your help,diaco. really appreciate it!
  10. ok.. I'm back! So, I tried to alter your codepen Diaco, (which is pretty awesome in itself) ... But I wasn't able to achieve what I had in mind .. I reverted back to my codepen forked from yours : http://codepen.io/nushi/pen/vNMKMm This rough demo I created with Edge Animate will show what I have been trying to achieve. (just click 'LINK' to start the transition) http://ideasnstuff.com/rz/index.html It is a simulated page transition that is like how some apps do it... Yes, this may not even be possible with a website, but it's just a simulation. I didn't post this on Codepen because it's crappy code from the Adobe Edge and it's only for demonstration purposes. Not really editable and its not using Greensock anyway.. From what I can see, it's about starting the second animation (movefromright) much sooner but after 1) the first page has scaled down 2) and then moved over a bit. This is when the Page 2 slides in right next to it. 3) page 1 then fades out has it slides to the left 4) Page 2 scales up to 1. Hope you guys can help ... ! I am learning BO COO. here!
  11. ok. wow. i need you as my sensei ... really ... Now I need to understand what you did .... and I will try to make it so only 2 slides show in the body: the one that is being scaled DOWN and the one to be scaled UP. The transition I am trying to see if it's possible to work is basically: - when one clicks on a link (to another slide (or page)) the transition from the current page/slide to the next is the only that should occupy the viewport ...
  12. Ok.. so I'm playing with your pen, Diaco. And I've forked it here : http://codepen.io/nushi/pen/vNMKMm When one 'page' scales down, the next page should come in next to it while it's scaledown so there are 2 scaled down 'page's or slides in the viewport at the same time... In this case, with the timeline you have with the loop, how does one start that subsequent timeline a little earlier, so we see it earlier. And, is it even possible to do this?
  13. @Diaco What does the "L" stand for? --- ie: .to(slides,1,{xPercent:-100,rotationY:80},'L'+i) TweenLite.set('body',{perspective:1000}); var slides=document.querySelectorAll('.slide') , tl=new TimelineLite(); for(var i=slides.length;i--{ tl.addPause() if(i>0){ tl.to(slides[i],.7,{scale:.8,ease:Back.easeOut}) .to(slides[i],1,{xPercent:-100,rotationY:80},'L'+i) .from(slides[i-1],1,{xPercent:100,rotationY:-80},'L'+i) .from(slides[i-1],.7,{scale:.8,ease:Back.easeIn}) } }; document.addEventListener("mousewheel",mouseW); document.addEventListener("DOMMouseScroll",mouseW); function mouseW(e){ var SD = e.wheelDelta||-e.detail; if(SD<0){tl.play()}else{tl.reverse()}; };
  14. Great guys! Petr, I will definitely go over that tutorial today. And thanks again, Diaco. Now I just have to practice this some more. I figured it was that I had to add timeline, I just got stumped editing the code which I had forked. It's all syntax n stuff. And javascript is still my weakness. Will see what I can do. Am trying to use Greensock for prototyping transitions for a clients rather than using something like Webflow or Edge Animate.
  15. Hi All So I am stumped and all that I have tried has just been a bit of a mess. This is my pen, currnently working on this :: http://codepen.io/nushi/pen/QjoerL I started this with a fork off Joost Kiens wonderful pen from here: http://codepen.io/JoostKiens/pen/LExggp Currently the transition does this; Onclick of nav item, 'page' scales down and opacity lowers Next page slides in from the right, opacity full. What I want to do is 2 things: 1. Make these 2 animations happen simulaneously AND 2. Have page 2 (or the subsequent page) slide in from the right but at the same scale as the originating page (Let's say Page 1) and as both page 1 and page 2 move leftwards, page 2 comes into full scale. Hope that makes sense! Both pages are animating. One to scale .8 and the other one from scale .8. They are both visible but the first page will move out of the screen and the second page comes into view. Since these animations are broken down into functions, one for each movement (Scale Down & Move From Right), I do not know how to accomplish this.. It seems that the Move From Right needs to have a few steps: 1. Start at scale .8 2. Show up initially sliding in from right but adjacent to the first page 3. Then second page scale up to 1. I've attached a very rough sketch of the animation ... I hope some javascript geniuses in here can help me out