rotaercz

The site is far from done and it's still a work in progress but you can check it out at: http://goblinhammer.com The site uses GSAP. It's sprinkled here and there. If you click the "Browse Sets" icon on the left, you'll see a cool tsunami menu.

Thank you! That drop down and spin is sexy. In about 2 months I'll have something to share. Stay tuned!

How would you write this Codepen example in GSAP? How would it look with keyframes and without keyframes? What are the differences? Pros and cons?

Thank you!

http://jsfiddle.net/rotaercz/p13wLkeo/3/ Here's a jsfiddle example!

I'm starting to really like GSAP. Really helpful community and it feels nice to be able to not use CSS for animations. I'd like to get a license but can't afford it at the moment. Is there any way I can earn a single developer license?

I figured it out! It's because the css had: -webkit-transition: left 0.3s ease-out; transition: left 0.3s ease-out; In this scenario I got an odd side effect where the 1.5 duration in my code would become a delay for some reason. Maybe I found a bug? I think TweenLite should not be influenced in any way from the css transition code. TweenLite.to($(menuID), 1.5, { left: 100, onComplete: function(){ alert('helloworld'); }}); That said, how do you destroy TweenLite.to(); after it's done?

Sorry, I'm not familiar. What's svg or canvas? EDIT: That's interesting. I thought TweenLite wouldn't have a problem since there's no delay when moving the div holding hundreds of divs within it when using CSS transitions. That's why I'm wondering if I'm doing something wrong.

If there are hundreds of divs in the div that I'm trying to move, could it slow it down?

I have a pretty simple bit of code: TweenLite.to($(menuID), 1.5, { left: 100, onComplete: function(){ alert('helloworld'); }}); There seems to be a delay before it moves to position 100 or perhaps I'm providing a value incorrectly? Is the second argument 1.5 the delay before it moves because it seems to be the delay based on values I've tried? If so, where do I set the duration of the tween? EDIT: Also the onComplete callback seems to happen based on the 1.5 value? I'd like the callback to happen after the tweening is done but I'm not exactly sure what I'm doing wrong.

Thank you for the thorough reply! That was really informative. I tried to like your post but I'm out of likes at the moment. It would be nice if there was an indication of how many likes I have left. (hint hint )

Thank you! Also it looks like I reached my quota for positive votes for the day.

Just tested it. It's very smooth. I have a few more questions in no particular order. 1. Is it possible to do something like this? interval.kill();? 2. Is there a way to see the fps? 3. Is it better to do it this way? TweenLite.to(elem, 0, { left: elem.offset().left+(goalX - elem.offset().left)/moveSpeed }); Compared to? elem.offset({ left: elem.offset().left+(goalX - elem.offset().left)/moveSpeed }); Or is there no difference here? 4. How do you highlight your code like that? 5. Sorry for asking so many questions. I'm just psyched about GSAP!

Thank you for the informative reply. How would you stop the loop from outside the function?

I just started learning myself but try this: TweenLite.to($('.proxylogo'), 12, {css:{left:"100px"}}); EDIT: Looks like a mod responded a second before me.

I'm getting interesting results. I'm using... interval = new TimelineMax({ repeat:-1 }).call(function() { // stuff }, null, null, 0.020); I'm getting considerable gains in FireFox but in Chrome it seems slower? Not sure why.

Ah, interesting. Thank you!

Thank you for the reply!

I have a ton of rectangle images. The width and height are all the same. They have different names, colors, etc. The user will be able to sort and filter things based on what they want to see. I'm thinking it would be nice to see the images move around using GSAP as the user sorts.

goalX continuously updates, moveSpeed doesn't change. I'd like to share it when I'm done but at the moment I'd like to keep it private. EDIT: I guess I feel secretive during development but you can actually see an example here on my old flash site. www.typographist.com (it's the tsunami wave menu. The new one is vertical though and it's not Flash.)

This is awesome. Thank you!

Last question, I promise I won't ask another question for awhile. I'm planning on moving lots of images around and I'm curious which is faster, reordering divs or changing xy position of the divs? I'd like to use the speed of GSAP to animate things around so I wasn't sure which way I should go. What do the gurus out there say? Would really appreciate some input.

I have the following code and cachedSets is a list of elements. setInterval(function() { // more code here $.each( cachedSets, function(i, elem) { elem.offset({ left: elem.offset().left+(goalX - elem.offset().left)/moveSpeed }); }); }, 22); Is there a way to convert the above to GSAP?

I'm new to GSAP and I'm planning on using it for a website I'm developing. I'd like to import as little as possible but I'm not exactly sure what the minimum requirements are to get things running. I have CSS animations that I'd like to change to GSAP so I'm assuming I need the CSSPlugin.min.js file but I'm not sure what else. If I have TweenMax.min.js imported, does that import everything?

Thank you! That worked! Though you do have to remove the quote right after img in your example.