Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About coco

  • Rank

Profile Information

  • Gender
  • Location
    Los Angeles, CA
  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.
  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 i
  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
  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 i
  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("DOM
  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