Jump to content

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


  • Content Count

  • Joined

  • Last visited

Everything posted by rgfx

  1. rgfx

    bezier path help

    Thanks pal, your always hooking me up!
  2. rgfx

    bezier path help

    Force 3d helped a lot, what are your thoughts on 100 div's is that ok? I found out my position problem was because of 10px 10px size of dot. Doesn't seem like transformOrigin puts the "pivot" in the center when it comes to connecting the bezier. starting at 1px 1px turns into a weird box. I have to create two different path's because of retina devices, going to add some responsive js later. So it important I know how to call path variable. Here is a link to broken variable http://codepen.io/rgfx/pen/jENjjW Bet its something simple. Thank you for your solution to tween gap. M
  3. rgfx

    bezier path help

    Hello, 1. My curve doesnt really start at x:0 y:17.8. Its falls a little low and to the right. 2. When I try to add my full bezier path in the path variable. It doesnt work later when I try to call using values:path it just sits there. 3. Trying to create an "expanding foam" effect. My hack was to mess with the stagger position parameter, but when first loading it start to show at that parameter. So you see it at 3.9 in. 4. Can I add more dots or am I already overdoing for slower computers? I hope you know what I mean. Still learning programming and gsap, on my own I'll be here
  4. I see. What works for me is creating the initial width, that is actually my max-width, and letting browser window resize take it down. Your solution was correct the first time. Thank you.
  5. With Diaco's solution I can't got higher then 500px and with Jonathans I can't go lower then 500px. Is it even possible to put Jonathan 's solution in a container?
  6. Sweet, thanks a lot guys. I am come from design background, truly appreciate you guys helping me, and forgiving my ignorance. I will learn js, how long it will take, who knows. Blasting my way through codecademy.com, anything else you can recommend, specifically to create awesome front-end?
  7. Should of mentioned I need to keep aspect ratio. I also need to learn JavaScript. I certainly don't want you taking up anymore of your time helping me. Gonna mess around with snap, its only 71kbs.
  8. rgfx

    Animating Timescale

    I added the wrong codepen example, on my initial post, embarrassing. Animating timescale seem to be working, I just wanted to slow down the initial approach. can I apply easing to it? As I would like to keep it slow for a little longer. .fromTo(anim,2,{timeScale:0},{timeScale:1}) Anyway, it seems like this is preventing the timeline from looping, did I do something wrong? http://codepen.io/rgfx/pen/BdpFt Can't wait for custom easing!
  9. Diaco, are you saying that should create different sets of bezier x and y values. I will have to change the scale of the container size using fixed width, not percent? Certainly not ideal. Append dots to a container works for starting point, but prevents me from filling my container with an effect. http://codepen.io/rgfx/pen/hcniu Here is an example of an responsive svg path using snap.js http://codepen.io/mattsince87/pen/vdEbg Was hoping just to use gsap for everything
  10. I do not want to animate a stroke, I want to follow a svg path. Your example was the only one that didn't use snap.js or bezier, perhaps its only for animating strokes. I could use bezier but I do not think its responsive, is it? By library I mean using snap.js or raphael etc, I rather just use gsap. Wondering if its possible. Thanks for your time.
  11. Do I really have to load another library just to animate along the path. Can carl's stroke animation example be used? http://codepen.io/rgfx/pen/cusav I have it set to 25% width works great. What am trying to do is something like the progressive reveal dots example but have it be responsive. http://codepen.io/GreenSock/details/ABkdL/ And while am at it able to figure out how to animate along a path responsively as well, without another library. Slowing building up my responsive animation tools, thanks for everybody's help, can't wait to get to production mode.
  12. rgfx

    Animating Timescale

    Duh, didn't see that in the comments. Thanks.
  13. rgfx

    Animating Timescale

    Do I have to create a new timeline for this effect? I would like to slow things down within the time.
  14. rgfx

    Animating Timescale

    Trying to start my animation slow and then speed up gradually. I read there is way to animate timescale, but am not sure how. Does https://greensock.com/customeasework for JS? If so is there an example of implementation? Thanks.
  15. Not exactly sure what you mean. But I found this greenstock pen useful in understanding how to work with position:absolulte http://codepen.io/GreenSock/pen/rAetx Completely a shot in in the dark, but calc() in css has helped me a lot . http://codepen.io/ed1nh0/pen/puhsf Also there is always placing divs inside parent divs. Hope that helped, prob not.
  16. rgfx

    Pause before loop.

    Hello, Trying have the last animation sit for 0.5s before it restarts. Tried a few things that are commented out. Dug around a bit with no luck. window.onload = function() { var logo = document.getElementById("logo") // tweenBtn = document.getElementById("tweenBtn"); //var tl = new TimelineMax({repeat:-1}) var tl = new TimelineMax({repeat:-1}) //logo will animate 100px to the right of its current position tl.to(logo, 0.5, {left:"+=100px"}) .to(logo, 0.5, {left:"+=100px"},"+=0.5") .to(logo, 0.5, {left:"+=100px"},"+=0.5") .to(logo, 0.5, {left:"+=100px"
  17. knew it was something simple, simple as it is I bet it will help a few people. I have read many of your post through my adventures of getting my head around gsap, thanks for being there maestro
  18. New to Gsap, I have been looking forever for way to loop to specific time or label. My example is not a slider, there will be animations between each background fade, I removed absolute position on .slide for the sake of testing. When the animation first loads it will fade in from nothing, but it can not do this when it loops around again it should start from lets say 5 seconds in. Not sure exactly how to go about doing this. Create two timelines, with the opening fade, then trigger the next timeline on complete then loop. In my days of flash there was a gotoAndPlay(frame);