rgfx
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by rgfx
-
Anyway to solve this? thanks.
-
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.
-
Thanks pal, your always hooking me up!
-
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. Maybe after my js lesson I can figure stuff out like that on my own.
-
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.
-
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.
-
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?
-
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?
-
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.
-
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!
-
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
-
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.
-
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.
-
Duh, didn't see that in the comments. Thanks.
-
Do I have to create a new timeline for this effect? I would like to slow things down within the time.
-
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.
-
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.
-
haha, yes thanks.
-
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.
-
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
-
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.
