Dipscom

You certainly seem to have chosen a very large cookie to bite. Let's leave the comments/responses about this other issue in the other thread, it helps keep things and thoughts organised.

Luv4eva, Blake. Be sure I'll be ripping that isometric grid at some point in the future.

Hi olivier, Can I chip in? I think things are getting a bit mixed up now. You initial question was about restarting the whole timeline. In your last comment you were referring to reversing the timeline. Which of the two behaviours are you after? - The timeline to jump back to its initial position and play forward? - The timeline to play backwards to its initial position? If you are just reversing it as you describe in your last comment then, no, there's no particular reason to invalidate() anything. It's not required, not a particular good practice or anything of the sort. As for the clearQueue() from jQuery, I have no idea. Someone else will have to help you there, I have next to no experience with it.

There's just not a topic that Blake isn't able to give great advice on. Blake, tell me. How do I find tru luv?

Anytime you have any questions Ryan, come back. There's a ton of people around who is more than happy to help out. I'm an animator myself, like you, used to time sheets, keyframes and the such. The timeline now has to live in my mind when I am animating with code but, you can just write what you want to happen in a series of short sentences, that, will become your code. break it down into tiny pieces, later you will notice lots of those things are the same thing over and over again. That's the moment you see how wonderful computers are and how cool coding animation can also be fun. Building visually complex stuff with a bunch of very simple steps. And thanks for the compliment. I'm looking to improve as well.

The choppiness will be due to the amount of vector points you are moving. Sadly there's no hardware acceleration for SVGs at the moment. That's why switching to PNG's will give you an improved performance. The browser will be able to give that element to the GPU since you're translating using transforms. But! Fear not! You don't have to switch to PNGs and lose all the lovely crispiness of SVGs. If you export the assets you are going to use as individual images and don't inline them into your HTML document, but use the SVGs as images, then, you can translate those using the GPU.

Yes and yes. If you can, you will be better off by using Canvas, it will give you a much better performance compared to hundreds of DIVs. There are a few ways to generate the snowflakes in a more efficient way. One would be to create a loop to generate the delayed calls offsetting the delay on each iteration. Another one would be to have an empty tween that repeats itself X number of times, each time it repeats, it calls the generate snowflake function and at the end of it, it can call another tween to white-out everything and remove the snowflakes. Both are simple ideas and should be easy to implement, just bear in mind they do nothing to improve the speed of it. You will need to use Canvas for that. Or try to reduce the amount of flakes to a level that you find acceptable and gives you smooth results.

Hello one2gov, You are mixing GSAP and jQuery. From what I have seen in your Pen everything is behaving according to expected behaviour. You don't see any change on _gsTransform properties because GSAP is not altering any of those properties. jQuery is altering the width and height of the element, there's nothing in there that's feeding that into the _gsTransform object. If you create a function called onResizeStart and trigger it, yes, it is possible to update the values.

Let's tackle one thing at a time. I got it correctly, the main point in your last comment is to understand the relationship between the set x/y to the tweening of x/y and then module of x/y. It's to do with translating the element in a coordinate system (in this case SVG but it's the same logic with DOM elements). Before you do any modifications to the elements with GSAP, your elements are all sitting at translate(0,0) (assuming no other translate() modifications were applied), when you tell GSAP to tween the elements using the relative syntax "+=", GSAP will add the amount specified to the element's current position. The first thing you want to do is to spread your elements along the space you have available. The .set() loop. Now the elements are sitting at translate(x * i,y * i), no longer all at the same spot. Tweening them by "+=10" will mean the element[0] is at translate(10,10), element[1] would be at translate(20,20) - assuming a 10 units gap - element[2] would be at translate(30,30) and so on. With the modifiers plugin, each element gets a check on its own local translate(x,y). By using a function that calculates the module of specific amounts, you can clamp the translate(x,y) as the value returned by the function is a number, not the relative "+=" string. When you ask for a module of a number by the same number, you get 0, making the element jump back to the starting position. Looking at your Pen (which is very helpful, by the way) I can see that you're nearly there. The main issue that I see is that you're not hitting the end of the x and y at the same time, the panels are all moving slightly to the right as they move as they get to the bottom. Basically the proportions are not right. With six elements, being 388 wide and 220 high, you want to move them by 2328 x and 1320 y. (388 * 6 = 2328 and 220 * 6 = 1320) Here's a fork of your pen with one of the lines corrected. I have also tweaked your css so we can see the clipped elements, it helped to see what was going wrong. http://codepen.io/dipscom/pen/ZBBeJb?editors=1010

My gut feeling is "not possible". You can achieve something like that with two tweens, one for the animation in, one for the animation out. With a delay on the second one. You would set some variables to use in your tweens so that you don't have to type everything twice and it would make amends easier.

Hi Ryan! You nearly got it. Actually, you got it right just placed the pieces in the wrong order. You won't achieve the desired effect if you just add the timeline inside another timeline because it's the tweening of the progress of the first timeline that creates the easing you're looking for. Just tween the progress of the target timeline inside your master timeline to get the easing. Swap your code for this and I think it's what you're looking for (I've left your original bits in for reference): var NUM1Timeline = new TimelineMax(); NUM1Timeline.staggerFrom(".SET1>g", 0.8, { opacity:0,}, 0.18) .from(".top1", 2.4, {x: '-22%', y: '22%', opacity:1, },0.0) .from(".shd1", 6, { opacity:0}, 0.0) // TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); var masternumbers = new TimelineMax(); // masternumbers.add(NUM1Timeline) masternumbers.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn});

Ok, so I now worked out what the issue is. And it is so simple that I did not see it to begin with. 1) You need to add the Modifiers plugin to you pen in order to use it. 2) The values the plugin are evaluating are relative to each element. The reason all of your plateaus jump back to the start at the same time, even when you are using the Modifiers Plugin is because they are spread alongside the space straight in the SVG so, when you are calculating the Modulus of 1000, they all reach 1000 at the same time. If you refer to the example pen: http://codepen.io/GreenSock/pen/QEdpLe?editors=0010 you will see that the boxes are first spread using GSAP before being animated. And so, when they are Tweened after, each box has a different starting point. In order for your idea to work, you will have to do something similar. Does it makes sense?

Hi Hobie, In your pen you have forgotten to add the ModifierPlugin. Having said that, I have added it to your pen but found that it throws a bunch of errors to do with the SVG. I know Jack has patched GSAP recently but I am not sure which is the latest version, I'll see if I can find a version that works or when Jack comes around he'll be able to point out if that bug has been squashed or not. Don't listen to this Dipscom guy. He's talking nonsense - there's nothing wrong with the ModifiersPlugin - the errors showing up is his ability to break everybody's code by simply staring at it. Just hang on there while I dig a bit to figure out what's the matter.

Hey, sorry was offline. Glad you worked it out in the end.

It's because you have assigned .SET1 to a single <g> tag and as such it is treated as a single element. In order to achieve what you are proposing, you need to assign the .SET1 class to all elements that you want to affect or write a CSS selector to target the children of .SET1. Something in the lines of: ".SET1 > g" - This will target the first g that is a direct child of any element that has the class ".SET1".

Right, it's not that hard, actually. Here's a crude implementation: http://codepen.io/dipscom/pen/ENgvRw/ I have no idea how robust this is given my lack of experience with ScrollMagic but It seems to work fine for me here.

Hi alancoppin, Do you mean in general or specific to TextPlugin?

Ah, ok. Well, that's now more of a ScrollMagic question rather than GSAP. I am not sure as I don't have experience with it but, in general, what you have to do is work out where the element is in the page and calculate how much scrolling needs to happen before it's viewable. Here's a stackoverflow topic giving you details on the matter: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 Hope it helps.

In any particular ad platform or just in general? If we're talking about banner ads here, it will depend on the ad platform you're working with as they will have their own methods.

It would still behave as the first one, yes. Because, you're still using the a setInterval to trigger change. What I meant was something like: var boxes = []; var dur = 2; // create one timeline that repeats itself var tl = new TimelineMax({repeat:-1}); tl.to(boxes, dur, { bezier: [ { autoAlpha: 0 }, { autoAlpha: 1 }, { autoAlpha: 0 } ] }); tl.call(function() { // update stuff if you wanted to trigger it somewhere in the middle of the timeline // Otherwise, just use the onComplete param of the timeline itself. }); tl.to(boxes, dur, {x:100});

Well, if all the client wants is animation for the sake of it.. I heard that vintage stuff is all the rage now so, maybe you might want to try full on old skool. http://codepen.io/DonKarlssonSan/pen/RoWYJa

Hey Kathryn, That surely is a lot of code... If you could slim that out a tad, would be great. But right out of the bat I can point out that the DrawSVG will only draw the stroke of your svg. From a cursory look, I see you're including text and clip-paths - those will certainly mess your timing as GSAP will be tweening numbers in the background but nothing will show on the scree as there's no strokes to be animated. What exactly do you have in mind? You will have a very hard time if you're planning on drawing every single letter as SVG strokes. Maybe a combination of DrawSVG and SplitText to the text as DOM objects?

Here's why your clip-path is not working. Scroll all the way down to the bottom of your SVG. http://codepen.io/dipscom/pen/yVewXN It shows us two things: 1) How much easier it is with some live code 2) It is working The issue is how it is all your shapes are being drawn initially and being imported into your document. The easiest way I know of is to set your document up in your vector drawing program with everything in place and at the size you want it to be. Then export the whole thing out. After that, you can pick the code apart and adding your filters and animation. Or you can just hack it with what you have at the moment to make it work: http://codepen.io/dipscom/pen/LbGazO The hacking is in the css, by the way... I'd advise going with option one.

Do you think you can whip a Pen up? It's very hard to make comments on implementations without seeing the big picture. Here's some displacement filter effect. Not directly what you want but might give you some direction. http://codepen.io/seanfree/pen/eBppyE

Hi cocacrave, Welcome to the forums! Every time I think I am getting the hang of JavaScript and being able to read code, someone throws me off my little horse... Is this the fabled ES6? Do forgive my ignorance, I never get to play with the shiny new web toys.... So, assuming it is and that's a function that's being called on a user click I would say the following (which may or may not be right): The reverse is never going to work because every time you click, you are creating a new paused timeline. Regardless of the state of your menu. If your menu is active, it plays, if your menu is not active it reverses - but the timeline already is at the start so, it won't move. You need to create your timeline outside of the click event to stop it being overwritten. const menuLine1 = document.getElementById('menu-line1'); const menuLine2 = document.getElementById('menu-line2'); const menuLine3 = document.getElementById('menu-line3'); const menuLayout = document.getElementById('menu-layout'); const onClickMenuTL = new TimelineMax({ paused: true, }).to(menuLine1, 0.3, { attr: { d: 'M0 29h100v2H0z' } }, 'menuCollapse') .to(menuLine3, 0.3, { attr: { d: 'M0 29h100v2H0z' } }, 'menuCollapse') .set(menuLine2, { opacity: 0 }) .to(menuLine1, 0.3, { rotation: 40, transformOrigin: '50% 50%' }, 'menuRotate') .to(menuLine3, 0.3, { rotation: -40, transformOrigin: '50% 50%' }, 'menuRotate') .to(menuLayout, 0.3, { opacity: 1, display: 'block' }); export const onClickMenu = (menuIsActive) => { if (menuIsActive) { onClickMenuTL.play(); } else { onClickMenuTL.reverse(); } };