Jump to content
Search Community

rgfx

Members

  • Posts

    121

  • Joined

  • Last visited

 Content Type 

Posts posted by rgfx

    Timeline not continuing and various other questions.

    in GSAP

    Posted

    So I was isolating some animation to ask a few questions on best practices. And for some reason my timeline stops at the first tween of ".h2d-c", if I replace with .box it works. No clue whats going on. I must be blind to something. 

     

    So after this works my question were as follows:

     

    1. I can't use Elastic or Back easing because of timing issues, I wanted to follow the background and have a softer bounce, is what I did the best way to get this done? 

     

    2. If I add force3D:true to a element do I have to continue to apply it on each independent tween of that element?

     

    3. The h2 tags are creating dark shadows as they animate. I tried using   -webkit-backface-visibility: hidden; . But am still getting "tracers". I am sure this a browser issue, but perhaps there is a solution. windows 7 firefox and chrome. Took a picture just to know I wasn't tripping.  

     

    Thanks.

    See the Pen gbOpyo by rgfx (@rgfx) on CodePen

    bezier path help

    in GSAP

    Posted

    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  

    See the Pen jENjjW by rgfx (@rgfx) on CodePen

     

    Bet its something simple. 

     

    Thank you for your solution to tween gap. Maybe after my js lesson I can figure stuff out like that on my own. 

    bezier path help

    in GSAP

    Posted

    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 for another week. Lots of questions, so thanks for your time.

    See the Pen dPbBWZ by rgfx (@rgfx) on CodePen

    SVG path without snap.js or Bezier?

    in GSAP

    Posted

    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?

    Animating Timescale

    in GSAP

    Posted

    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? 

     

    See the Pen BdpFt by rgfx (@rgfx) on CodePen

     

    Can't wait for custom easing!

    SVG path without snap.js or Bezier?

    in GSAP

    Posted

    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.  

    See the Pen hcniu by rgfx (@rgfx) on CodePen

     

    Here is an example of an responsive svg path using snap.js 

    See the Pen vdEbg by mattsince87 (@mattsince87) on CodePen

     

    Was hoping just to use gsap for everything :)

    SVG path without snap.js or Bezier?

    in GSAP

    Posted

    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. 

    SVG path without snap.js or Bezier?

    in GSAP

    Posted

    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.

    See the Pen zLiux by GreenSock (@GreenSock) on CodePen

    Pause before loop.

    in GSAP

    Posted

    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"},"+=0.5")
      /* Delay Fails */ 
     //  .delay("+=0.5");
     //   .pause(0.5, false);
     // .delayedCall(0.5, function() {  tween.resume();});
    
}

    Thanks for your help. 

    See the Pen stacI by rgfx (@rgfx) on CodePen

    Timeline loop to specific time on complete

    in GSAP

    Posted

    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); 

     

    Please forgive my lack or understanding, am sure its something simple. Just like to know the best approach. 

     

    Many thanks. 

    See the Pen fstAp by rgfx (@rgfx) on CodePen

4
5
Page 5 of 5  
×
×
  • Create New...