kvnmcwebn
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by kvnmcwebn
-
wow thanks dipscom!
-
Well just the animation I've been working on...I've tried css positioning outside of the svg viewport with absolute and fixed positioning and a z-index of 9999, I've tried foreignObject within the svg element. I've tried using jquery to fix the width of the <g> element with css and just normally. But nothing has worked so far. There's a lot of code in the below pen now, most of the stuff I've tried is right at the top of the html...
-
Hi, I wold like to add some text to my svg animation. The svg container is totally elastic but I would like to fix the width and position of the text so that it doesn't scale at all. Could I maybe even set a width and position on text's <g> wrapper element? Can GSAP set width of an element be set like this in a timeline easily? Do I need to use bbox? I've been trying to use jquery but I can't seem to target svg elments within an elastic svg canvas. Thanks in advance
-
No I see what I did. I didn't wrap the stagger in the function as in your example. Between that and mikels example I should be all good. Thanks guys
-
or with the cycle:
-
Hi Point C, I'm having trouble with getting a function to fire off with the onComplete as per your example:
-
great thanks I'll give it a read
-
Ah but it looks like the timeline thinks that both of these tween methods have an infinite duration... none of the tweens that come after them play... hmm
-
Point c thanks a million that's what I was trying to do. I just didn't know the correct syntax.
-
Pardon yes, I'd like to put in multiple attributes for one value like you had in your example: opacity:[0.2, 0.4, 0.6, 0.8, 1] }
-
Is something like this loop possible with cycle without using functions:
-
Hi Point C, I was replying at the same time you were. Thanks for the further explanation, I'm starting to get it now. I wasn't aware we can set multiple properties on one value like that. That's actually going to be super helpful for my project. Thanks!
-
Hi Mikel, Lol, yes that's a staggering demo. This feature is going to save me a lot of time. I have a couple questions, first I don't understand how you're getting the object's color values to cycle when you have the initial value set in the css with fill or backgroud-color attributes. Second is a function required to loop the cycle?I wasn't able to use repeat or yoyo anywhere in or around the cycle property.I have to learn how to use simple functions in GSAP can you recommend any tutorials? Thanks very much. -Kevin
-
Hi, I'm trying to stagger in a series of boxes with opacity. Maybe the cycle feature is an overkill for this but I'd like to learn how to use it. All of the tutorials I've found on the cycle feature seem a bit complicated. Is there an example of a simple staggerTo with cycle in a regular timeline anywhere? var tl = new TimelineMax(); tl.to(".circle", .5, {opacity:-1}) .staggerTo(".boxes", 1, { cycle:{ opacity:[-1, 1] ease: [Power4.easeInOut] } }, 0.05) .to ..... -thanks
-
Thanks.
-
Is there an updated modifiers cdn ? Right now I have to load like this: <script src="js/ModifiersPlugin.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'> <script src="js/TimelineMax.js"></script>
-
Hi, What is the trick to get the timeline to carry on after the below tween loop in timelineMax? .from(".class", 1.5, { y:-100, repeat:-1, repeatDelay:3, yoyo: true}) I've not been able to find one for love nor money...
-
I had to step away from this for a while this is the stage the animation is at now: I'm working on ambient background animations now, lights and stuff like that. I'll have to join the club to get all the functionality needed to finish. I'll post an update when it's done. Thanks again for all the help guys.
-
ok great, I guess I was not clearing the cache properly. All good now. Thanks.
-
Ah pardon, yes that clears things up. I need to load both timeline and tweet max. I thought the modifiers.js would cover all the bases but it wasn't. There shouldn't be any problems with those files working locally though right? thank you
-
Hi, I'm on my vacation at the moment with almost no internet connection and am I'm trying to work locally. Is there a reason why this doesn't load/work offline: <script src="js/ModifiersPlugin.min.js"></script> While this loads/works fine online? <script src='https://cdn.jsdelivr.net/g/gsap@1.19.1(TweenMax.min.js+plugins/ModifiersPlugin.min.js)'></script> And this loads fine offline in the same file: <script src="js/index.js"></script> I'm baffled by this. bottom of html file.... </svg> <script scr="js/jquery-3.2.1.js"></script> <script src="js/index.js"></script> <script src="js/TimelineMax.js"></script> <script src="js/index.js"></script> </body> </html>
-
Hi guys pardon for all the posts, I think I have this figured out now, Dumb mistake. I wasn't loading all of the external gsap files during local development..... I'll post a new pen when I have it finished. Thanks again.
-
Hi, This one works in chrome but not firefox or safari... so close... please help anyone! Thanks I think the issue may be between this: TweenLite.defaultEase = Linear.easeNone; TweenLite.set(water, { y: 345 }); and the css: #svg { position: fixed; width: 100%; height: 60%; background: #111; }
-
Hi, First of all thanks a million for all your help and suggestion on this, especially your demo's Blake. I'm afraid I'm in a bit over my head for a newb. It's going to take me a long time to unpack everything that is going on in that js file... but I'm working on it, in the meantime it's a lot of copy and paste and when I applied the lerp demo to my existing files and viewport settings there were some positioning issues. I was able to resolve most of them except for the left origin/position of the generated "rect" group element(s). I can fall back onto the clouds demo but we've come so far to turn back now! Anyway happy fourth guys. Thanks again.
