Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by coco

  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
  16. Diaco and Jonathan .. I got it! I knew I'd studied that but it completely disintegrated in my memory.
  17. Diaco! Thank you ... Works like a charm ... I'd love to use it but I'd love to understand it even more ... just one part evades me : TweenLite.set(this.target,{scale:tS>mx?mx:mn}); is this part shorhand for something in JS? "tS>mx?mx:mn" ... I'm not just fully getting the statement here even though it works perfectly thanks!
  18. Hi All I forked Carl's solution to a previously answered question incrementing the scale value onclick. (June 2014) http://greensock.com/forums/topic/9759-how-to-get-or-increment-the-scale-value/ Here is my fork: http://codepen.io/nushi/pen/bVOpzM My conundrum: How can I set a maximum value to the zoom in/out functions I have created? In the thread Ilink above there is a post about this very thing but I cannot get this to work,. I think I am still not 100% sure about JS objects, targeting them and making it work in this case. Here is what the post stated as a solution: Can anyone give me a helping hand here? Thanks! Ana (aka Coco) lol
  19. Pizzaman .. Great points. I much prefer the pure hand coded way. Cleaner and appeals to my sense of order. I am trying out the sonamblst methodology too as it does have its merits. The templates from the Rich Media Gallery seem to lay out a good foundation for some more complicated event tracking with the required JS baked into the html. I am leaning toward starting off with Gulp too. I've seen some wonderful github links here regarding this. I'm exposing my excitement but ever since I discovered GSAP, a whole new world of incredible possibilities have me coming to this forum more than any other. .... Audible geek squeaks ....
  20. Thanks Dipscom... The more I hang out on these forums and keep searching, the more I realize how many questions I have are already answered. Really informative here.. and thanks for the link! I've already gleaned some nice gems of information.
  21. By the way, I did happen to find this thread which was helpful ... http://greensock.com/forums/topic/11959-using-gsap-with-google-web-designer-and-3d-assets/
  22. Hi all I'm fairly new here but really loving my initial forays into GSAP. Gotta say I love it I am new to HTML5 banner creation as well, though I've been coding for a while now. Anyway, anyone here using GWD to start off their ads for Double Click campaigns and then using GSAP? I'm a hand coder so I tend to get more confused using tools like these but since watching a few of the DC hangouts where Google talks about HTML5 and GWD etc.., it seems to be a recommended workflow when having to add in the required code snippets for DC. This 'could' save some time .. BUT I've tried GWD and even a couple YT trainings on a basic banner ad with a tap area and I find the tool buggy and slow. Are there any banner creators here that use GSAP only and then add in the DC code OR are there hybrid users here too? If you are using GWD and come from a hand coding background, what do you use it for, if at all? I am asking because I don't want to waste more time learning a tool that I don't actually need. I also do not yet completely understand the requirements for a DoubleClick ad .. hence my inquiring mind. Thanks ahead of time. Love this forum! Coco
  23. Hi all, I'm new to the forums and to Greensock. I started couple weeks ago creating some banner demos when I discovered GSAP and this forum. I'm excited to participate because in only 2 weeks I've learned a tremendous amount from reading the posts and studying the codepens. I feel like I know some of you guys Anyway, joe_midi, you made mention of a yahoo webinar in a previous post. Can you tell us which one that was? I am going over all the webinars for DC and don;t want to miss this one if it's related. Thanks! Ana