Leaderboard

HI BigTreat, The point of these forums is not to have members build projects on demand, but to show them how to use various features of the GSAP API. The demo Shaun provided should be more than adequate to show how to break up an image and animate different parts. here is another demo from @Rodrigo that uses a full grid. Hit the "remove image" and "restore image" buttons a few times: To build something like revolution slider from scratch with your special requirements just takes too much custom html, css and js. Unfortunately it would be way too time consuming for people to be able to build that properly and try to teach you at the same time. Again, if you have specific questions related to GSAP and a simple demo we can work off, we are more than happy to help. Thanks for understanding.

Thanks Sahil! It was a completely unexpected surprise that turned around a ho-hum morning!

The best thing to do here for any kind of help would be to distill the problem down in a CodePen. We can then fork and recommend things to fix any issues you might encounter. But, at first glance ... the get rid of the initial flash of the SVG, you can simply use some inline CSS to not display it, add "opacity: 0;" (or visibility: hidden;") to its selector in a style sheet, or load it in with JS within $('document').ready. (I'm sure there are other options I'm forgetting right now). Edit: Dang it ... did it again.

You figured that out by looking at an Android forum? There's not a lot of people that would be able to make that connection ??? 2D canvas/graphics libraries are used everywhere, and I do mean everywhere. In fact, everything you're looking at is being generated by one of those libraries. To render the page, all the HTML, CSS, and SVG in the DOM gets reduced down to a bunch of canvas draw calls. What's really interesting, and what you just discovered, is that the HTML5 canvas uses very similar API. For fun, I made a Skia Fiddle to compare code with. Skia is the graphics engine used in Chrome, Firefox, and a bunch of other stuff like Sublime Text. Skia https://fiddle.skia.org/c/edce0208cfe8e7b4d0bf1ba0ac4d6af9 void draw(SkCanvas *canvas) { canvas->clear(SK_ColorBLACK); const int centerX = 400; const int centerY = 400; SkPath rocket; SkParsePath::FromSVGString("M2.35,24.5...", &rocket); SkPaint fillPaint, strokePaint; fillPaint.setAntiAlias(true); strokePaint.setAntiAlias(true); strokePaint.setStrokeWidth(2); strokePaint.setStyle(SkPaint::kStroke_Style); SkColor colors[][2] = { {0x8888ff00, 0xff88ff00}, {0x880088bb, 0xff0088bb} }; SkScalar rotation = 0; for (auto color: colors) { fillPaint.setColor(color[0]); strokePaint.setColor(color[1]); canvas->save(); canvas->translate(centerX, centerY); canvas->rotate(rotation); canvas->scale(3, 3); canvas->drawPath(rocket, fillPaint); canvas->drawPath(rocket, strokePaint); canvas->restore(); rotation -= 90; } } HTML5 Canvas https://codepen.io/osublake/pen/gebqVK function draw(context) { const centerX = 400; const centerY = 400; const rocket = new Path2D("M2.35,24.5..."); // 32-bit RRGGBBAA color const colors = [ ["#88ff0088", "#88ff00ff"], ["#0088bb88", "#0088bbff"] ]; let rotation = 0; context.lineWidth = 2; for (let color of colors) { context.fillStyle = color[0]; context.strokeStyle = color[1]; context.save(); context.translate(centerX, centerY); context.rotate(rotation); context.scale(3, 3); context.fill(rocket); context.stroke(rocket); context.restore(); rotation -= Math.PI / 2; } } Skia uses C++, so there's obviously going to be some syntax differences. Outside of that, the only difference is that Skia uses paint objects to hold style related stuff, like color. That's really nice because you don't have to keep changing the context. I've seen talks about adding paint objects to the HTML5 canvas, but I don't know if it's still being considered. I'll be back later, but check out Path2D. It will let you save a path. See how I'm using it in that demo for the rocket path. https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D

Hi @Cristo Welcome to the forum. You can click the magnifying glass in the upper right part of the top menu and enter your search terms. If that doesn't get you what you need, you can also Google the forum pages. To limit your search to GreenSock site results, you can do something like this: site:greensock.com your search terms If you want to search for an exact phrase, (say something like timeline objects), you'd put your search terms in quotes: site:greensock.com "timeline objects" Hopefully that helps. Happy tweening.

Hi @Bigtreat We'd ask that you please not request help from members through the private message system. It's best to keep all the questions and answers in the public thread so others can follow along and learn too. If you want to contact a member about hiring them, then certainly reach out via PM. I know @Sahil gave you some solid advice about getting started here: Have you gone through the learning page here? https://greensock.com/learning The blog also has wonderful articles to help you get a better understanding of GSAP. https://greensock.com/blog/ You can also use the forum search feature (upper right) to find threads talking about the parallax effect. (We've had several.) We don't have the resources to take you through an entire project from start to finish so we ask that you get something started and post a specific GSAP related question when you get stuck. Simplified demos will get you the best answers. We're always happy to help with GSAP related questions and problems. Thanks.

Scale is actually 2 different calculations. var tween = TweenMax.to('.red', 1, { //this value won't matter scale: 2, modifiers: { scaleX: scaleModifier, scaleY: scaleModifier } }); function scaleModifier(scale) { if (scale > 1.5) return 1.5; return scale; }

Now that you are moderator, you will have option to claim topic. Though don't trust it too much. Congrats on becoming moderator.

You can also add a global handler something like this that will prevent the page from being visible until all assets are ready. In head: <style type="text/css"> .js {visibility: hidden;} </style> <script type="text/javascript"> document.getElementsByTagName('html')[0].className = 'js'; </script> Before closing body tag: <script> // assuming jQuery was loaded with assets window.onload = function() { $('html').removeClass('js');}; </script> Discussion on SO of various page load event handlers: https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load

How is @Sahil learning everything so quickly? His knowledge seems to be growing exponentially. Do we have verification that he's real and not a new AI that @OSUblake created in the Matrix? I'm really starting to feel like a slacker.

Nice work on the site. Looking good. We really can't investigate a standalone javascript file with 100+ lines of code. However, if you are seeing elements appear on page load before you want to animate them, most often what you can and should do is set their visibility to hidden in the css path { visibility:hidden; } and then in the js when it comes time animate them use TweenLite.set("path", {visibility:"visible"}); It sounds like your page is rendering before the js runs which is typical. So by setting the visibility to hidden via css, they will not be shown on the initial render of the page.

Thanks a lot... @Sahil and @Acccent

if you don't want to wait until the previous animation has reached its start position it's even easier: save all the animations you'll use have a null variable that you'll use to save the current animation on click, first check if the variable is null, if not call .reverse() on it (will not happen on the very first click) .play() the new animation store the new animation in the variable the next time you click, the previous animation will be stored in your variable so it will get reversed

After a while, I finally know what was frustrating me and why the stuff I wrote in functions wasn't responding, and all the stuff with removing, adding, controlling wasn't working as it should - if you will ever have a problem with controlling timelines held in functions be sure to first declare a variable and then assign it to the function that returns your timeline...^_^'' @Dipscom wrote something like var returned_tl = tlReturned(); a tiny bit of code somewhere in the forums and huge thanks for that - now GSAP magic works the same regardless it's in function or not and my code is much much cleaner Thanks again for the help @Sahil

Hello @determin1st and Welcome to the GreenSock forum! I would have to agree with @Acccent regarding height, padding and box-sizing. The box-sizing property takes into account the CSS Box Model. You can see in the CSS Spec for height that when you use box-sizing: border-box that the height calculation of the browser will include the height of the borders. CSS height spec: https://drafts.csswg.org/css-box-3/#the-width-and-height-properties You also have to take into consideration CSS inheritance, and the fact that anytime you change padding it will affect the height of the parent containing element even without using box-sizing. But you can get around this by: using box-sizing: content-box for div instead of border-box. No need to remove or stop using box-sizing. remove or don't use the !important declaration on the height: auto property for .box selector. !important should only be used as a last resort. Just keep in mind that anytime you animate margin, padding, width, height, and border the animation wont be as smooth as animating transforms and opacity. Since anything animated that is not transforms or opacity will cause layout to re-triggered causing jank (lost frames) due to how CSS is rendered. See Jack's @GreenSock article on this: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ See CSS Triggers: https://csstriggers.com/ Also you should set the duration to a lower number. 10 seconds will be a really slow animation, and look like its either broke or nothing is happening. Setting i the duration to something like 1 second or 0.5 second like @Sahil did in his codepen will make it animate better. For full control sometimes its better to just use a fromTo() tween instead of animating classes using className. GSAP fromTo(): https://greensock.com/docs/TimelineMax/fromTo() Happy Tweening!

@OSUblake I was going through the article about optimizing canvas performance and was moving my context state calls and path calls out of the loop because I was just using same stroke color. While doing that I removed beginPath method and noticed heavy lag. So I thought to ask you but later it didn't make sense to not use beginPath in any conditions. But as you are curious so here is the demo of what I was doing. I did few tests and when you remove beginPath your frames will drop completely(at least on my PC) and ram usage will spike, which makes sense as it will just create some super long path. About saving path, when I landed in android forum I noticed an object something like new Path but I was almost sure that HTML canvas doesn't offer anything like that. From what I searched, it is true that there is no such method to create path object. So I was just wondering if moveTo, lineTo calls can be used to construct path but using library would make more sense here or custom API that we can use to construct/save path. About the particles, I visited three js page and spent 5-6 hours going through every example. (maybe more ) So I was wondering if these libraries use some kind of particle engine or it is just magic of webGL or something else. Because I see great difference in three js examples and 2d canvas performance. But I wanted to go through it first before asking you too many crazy questions.

Trick for something like the Slide Boxes example is to break up the image (or container with background-image applied) into subdivisions each with the original image applied as a background with the background positioned to present a seamless (an indiscernible at the start) mosaic. Here is an example I made to show this in a post quite a while back ... the idea could be applied to a greater number of sections both vertically and horizontally (or both). Edit: One thing I forgot to mention ... I made this configurable with html data-attributes. So there is a bit of preTweening logic to get those attribute values and calculate the necessary property values for the tween.

Wow... really nice. This is really kind of wonderful. thank you.

Sorry about the disappointment, @kreativzirkel. I have updated the docs per your request. I appreciate the suggestion. Great catch. I didn't quite follow why you'd need 5 extra functions elsewhere - could you explain? It should be pretty simple to use scaleX/scaleY instead of scale but I might be missing something obvious. In the next version, I could add a check in ModifiersPlugin so that if it finds "scale", it'll automatically create scaleX and scaleY also, that point to the same function. I think that's a decent compromise that wouldn't add a ton of code and would minimize complexity. The only down side is that it'd get called once for scaleX and once for scaleY of course.

@bparticle Blake has provided you really great and robust demo which will work in all scenarios with zero to minor changes, it all comes down to how you will implement it in your project. And when CMS gets involved it just gets broader. Like, what if you have different elements from different parents that open modal on click? What if then you want some modal to auto-open? Then what if there is already another modal open? etc scenarios. You can take different approaches with most basic approach of creating two modal objects that will respond to two different click events and will present text from two different sections. More flexible implementation will be where you pass different parameters for color, section etc and just use single modal object that will be used throughout the site. Then third way I can think of will be by using data attributes that will be used to create/track all modals throughout the page. Following is very basic demo of two modals, that you can implement if have few modal objects on your site. Anything beyond that just becomes general programming and CMS related question which is way too broad and beyond this forum. Somebody else might take interest to help you if they find the topic interesting but chances are slim.

Thanks Blake, those examples are identical. I looked up skia and it is interesting too for something advanced. I also read about paint objects though not sure if I read it somewhere else or through one of your posts. And thanks for intense clap. Actually I am below average and I think every regular member is a lot smarter than me. Except one I guess, though I can't name anybody.

You can search the forum/Google for FOUC (Flash Of Unstyled Content) Here's another post by Master Blake that shows his approach. Happy tweening.

Hi @NDF The PixiPlugin is only configured to work with some of the built-in filters, like blur and color matrix. For all the other filters, you will need to create and animate them directly. The properties for a filter can be found in the filter docs. http://pixijs.io/pixi-filters/docs/index.html For the ShockwaveFilter, the time property is what controls its size. That's the time value used in the shader, and is not related to the time/duration of your animation. var shockwaveFilter = new PIXI.filters.ShockwaveFilter(); someDisplayObject.filters = [shockwaveFilter]; TweenMax.to(shockwaveFilter, 2, { time: 2.5, ease: Linear.easeNone });

I personally haven't done anything with those filters but hopefully these demos from @OSUblake show a bit of what is possible.

My original post was a starting point for you to recreate the slide transition with GSAP. With that, my question would be ... are you looking to learn how to create something like the Box Slide transition or are you looking for someone to create it?

It's werid, .. whatever I do, I can't get modifier to impact the scale property– The same principle is working on y. The docs state, you can define a "modifier" function for almost any property It would suprise me if scale isn't one of them. And how do I know which are part and which arent? Thanks, Louis PS: Thank you for the demo @Sahil

Assuming it does not impact performance I would say it be would desirable. It is rather counter intuitive the way it needs to be handled now and likely to trip up a lot of people. And the resulting code would be simplified and easier to follow when things get complex.

I know, I know, – you guys are veeery protective when it comes to code-size. But this is a plugin, which is optional anyways How much would it cost to add scale and skew to the modifierplugin, and do the scaleX and scaleY thingy internally? I mean, when the code-size protected TweenMax does provide this shortcut, why doesn't ModifiersPlugin? Using it like it works on y is way more convenient. In my case I need to do this on 5 tweens inside a rather complex (at least for me) timeline. Placing five extra functions somewhere else wouldn't be so pretty –

Scale is going to be exception and few other properties like skew, you will need to use modifier on scaleX and scaleY. Though you can use same function as modifier on both properties. Performance, I have never noticed any negative impact on the performance but it depends on how much calculation you are doing. I wouldn't use it for every tween unless it is necessary. @OSUblake is master of modifiers plugin, he will know better.

Hi lisartur I appreciate that you are really trying to get this to work but I must go back to what I said above and suggest that you go for simpler things first. There's a lot of things in your codepen that show you still have a lot to learn about Javascript in general, for instance all the lines like top = S(isLeft ? '.LA' : '.LA')[0] that really don't make much sense and could just be replaced with top = S('.LA')[0] It makes me wonder how much of the initial example you actually understood, vs. how much you are just copying hoping that it will somehow work. In your latest codepen, you have this part: if (ff==false) { TweenLite.set(S('.LC')[0], {y: 100}); TweenLite.set(S('.LC')[0], {rotation: 0, transformOrigin: '-100% 0%'}); } which is called in your makeTL function, but ff is only ever false once – the first time you call that function – and then stays true forever. So why is that code even in the function, and not just before it? This is why you see C being a bit jumpy – you don't position it properly at the start, and then try to fix the bad positioning with a one-time adjustment. But like I explained above, if you change the transform origin of an element that's already been rotated it will appear to move somewhere else. All of this is a matter of 1) understanding Javascript, and 2) figuring out the logic behind what you want to achieve. It isn't a matter of understanding GSAP; we've moved away from GSAP-related questions for a while now, and are just talking about general programming. This forum isn't the place for that and I don't have more time to dedicate to it. If you do figure out exactly how to get it to work "in theory" but can't find the GSAP methods to do it, then we'll be here to help you out with those.

Brilliant! Many thanks. AndyF

@Visual-Q @Tasty Sites @MindGamer - thanks for jumping in with extra info. It's always good to see other workflows and tips. @Carl - I've tried to submit feature requests for SVG export changes. The feeling I get from Adobe is that their team thinks they know best and they don't pay much attention to user requests in this area. One new feature I've requested in the past is in Beta now - larger anchor points and control handles. Those tiny dots are almost impossible to grab sometimes. I've also requested a visual reference for path direction. Most 3D packages overlay a gradient on splines so you can easily see the direction and flip if necessary. Maybe a hollow dot at one end and filled dot at the other? How freaking hard would that be Adobe? As it is now, you have to add an arrowhead to an AI path to figure out which way it's going. Looks like Adobe may be short on cash though as I just received an email today that my fee is going up a few bucks a month after my next renewal. If anyone does want to submit a feature request or up-vote an existing request, you can do that here: https://illustrator.uservoice.com/

You can use modifiers plugin to calculate values before applying them so your tween will continue playing on resize as if nothing happened. Though if your current tween inside the timeline is not active then you will have to manually set it's position on resize.

Check the demos in following thread by @OSUblake

If you want to restrict the filter to the SourceGraphic, you can throw in an extra composite with the source before the multiply. You can do that on a group too. Hopefully that helps. Happy tweening.

Ya @Acccent is right about padding being animated and causing the problem. But I was wondering why that should happen? It is happening because you are using box-sizing as border-box so changing padding changes height and width of your box element. You can stop using border-box. Or you can set the parent element's height to auto !important.

Here is the part 2, I should have just maybe made it into week long series rather than trying to finish it in 2 parts. After about 45 minutes in both parts, I could only finish the basic effect. Not sure if I should make part 3. I might just switch to making smaller videos rather than something longer like this but will see how it goes. As for making videos, it gets overwhelming at times but I am enjoying it and think it will only benefit me.

I think this is the first question I've seen that dealt specifically with localStorage. Yes, you can use local/sessionStorage to keep track of what animations have played, but for a smooth transition between page transitions without a jarring page load, you really need to use some type of AJAX/SPA based loading technique. Don't know if you saw this page, but it has a couple of other suggestions like jQuery and barba.js.

Here you go. I show some of the trig used for this here. And how to get mouse coordinates inside an SVG here.

A gem by Keith Peters.

Read that post a while ago, and at the time I was building this little thing, it's kind of my summary what I learned in little above a year - hope you'll enjoy it https://www.hq-biosciences.com/our-process/ (animations above approx 767px) For me, GSAP was a blessing - special thanks, to @Ihatetomatoes you made it a thing in my life - finally, I could do some fun things with code and learn by doing instead of watching some crazy tutorials where you just use "this" and "this" and then I was just like this O_o Dropped school because of that dull programming theory - we started to learn to programme from "C" language (like WTF) I had a lot of attempts to learn JS but most of the stuff I could just copy/paste without even understanding or trying to understand. (This one helped me understand what's going on under the hood https://www.udemy.com/understand-javascript/ ) GSAP changed my life and made programming much easier to "eat" - I'll probably never be a kickass assembler programmer, but who knows - GSAP is a solid first sock to go anywhere and they should fking teach it at school. Thank you all for helping me in various quests, learning hard to help you too someday (that's hard! Even if I know the answer there are at least 2 answers already submitted - love you all

That photo is probably a fake. Evil Blake has a monocle.

I was showing you how to do this in your original thread, but you wanted to close the thread off instead. Looking at your code again, I'm seeing the same problems I originally saw... You should use mousedown instead of click/dblclick event listeners for detecting a hit. Think about a gun. It fires a bullet when you pull the trigger, not when you release it. It'd be pretty hard to hit a moving target if it fired when you released the trigger because there is a time difference between the two actions. And your click/dblclick event listeners are also where your logic errors originate from. You're passing in dirty objects to your moveTarget function, resulting in incorrect stageTop/Left values. This wouldn't be so much of an issue if you were properly tracking your velocities. Your animations are linear, so all you have to do is negate a velocity on a bounce. // Bounce on x-axis target.velocityX = -target.velocityX; This would also eliminate the need for your moveKill function. Your animations are linear, so you could precompute every animation ahead of time if you wanted to. Look at how you're already calculating the bounce animation in your moveTarget function. You can figure out the direction the ball is going to move by looking at the sign of the velocities. If the x velocity is negative, it's going to move left. If the y velocity is negative, it's going to move up. And you can figure which side the ball is going to bounce off of by looking at the duration for each animation. It's going to bounce of the one with the shortest duration. If they're equal, it's going to bounce off of both axes, i.e. the corner. But there's an easier way to do bouncing now. I didn't show you this example because the ModifersPlugin was still in development at the time. Check out how you can do multiple bounce animations a single tween... http://codepen.io/osublake/pen/yJgaYY?editors=0010 .

$('#button').click(function(){ // call the tween if(tween.isActive()){ // tween is active so do something } else { // tween is not active so do something } });