Dipscom

Hi MaximusNikulin, I'm not too hot with Babel as to be completely sure of what's going on and exactly how you are accomplishing things, one thing I think it could be the reason of this strange behaviour is that it appears ( to me ) that you are animating the strokeDashoffset in two different timelines. As they are not connected, when you hover over while the first timeline is playing, the second timeline takes over and overwrites what values the first timeline was setting. I can't go check the exact length of your paths to see if the values are what the should be but I think what is happening here is that you are cutting the progress of the strokeDashoffset before it reaches its final amount if you hover over before the end of the first timeline. Then, the second timeline is working with the values registered at the moment you hover over. As a test (this is what I did) change the duration of the first timeline, make it super slow and hover at different points in time, you will see that the stroke animation always gets cut at the point where you hovered over. I think you will need to change how you have set your timelines or calculate the length of the strokes outside the timelines so that you have a fixed length to work with rather than a dynamic one that gets overwritten.

Personally I would go with an negative relative position parameter to create the overlap, that'll be more flexible than the stagger and will suit your situation better as you want the user to have a moment to read the text. var tween = new TimelineMax() .add(TweenMax.from('.infographic-text-wrapper-1', 1, { autoAlpha: 0, scale: .9, repeat:1, yoyo:true, repeatDelay:1 }) ) .add(TweenMax.from('.infographic-text-wrapper-2', 1, { autoAlpha: 0, scale: .9, repeat:1, yoyo:true, repeatDelay:1 }), "-=0.3" )

Hi wondergryphon, Welcome to the forums! Without a demo all we're doing here is guesswork, which may or may not work. You really don't need to reproduce the whole project to show us, only really the bit that you are having difficulties. In this case, a simple fixed bar with the two elements and a scroll trigger would have been enough. In fact, the simpler the demo, the better for us and the more likely you will spot any mistakes made. I will assume everything else has been set correctly, the following is how I would have set the timeline if I were trying to set a crossfade between two elements. It's better to use autoAlpha over opacity. It will toggle visibility as well as change the opacity. // Timeline var tween = new TimelineMax() .add(TweenMax.from('.infographic-text-wrapper-1', 1, { autoAlpha: 0, scale: .9, repeat:1, yoyo:true, repeatDelay:1 }) ) .add(TweenMax.from('.infographic-text-wrapper-2', 1, { autoAlpha: 0, scale: .9, repeat:1, yoyo:true, repeatDelay:1 }) ) In the CSS, you can remove the opacity and scale. infographic-text-wrapper { position: absolute; top: 0; left: 0; /*opacity: 0; transform:scale(.9);*/ } However, I don't think the issue is in the code itself but when the code is being run. Again, seeing the issue in a live environment would make thing clearer but here, I'll have to hazard a guess. You are creating this on the fly, when the page loads or when the trigger anchor is reached. If that's the case, there will be a brief moment where GSAP is taking over the element and setting up the animation. That's why you see it work after you scroll the page down and then up again. Maybe if you create the animation before you reach the trigger point and have it paused will solve your issue. Hopefully it is as simple as that. If it doesn't help, we really ask for a reduced-case example that shows the issue you are having. Happy Tweening!

hoejun, I'm not sure I follow what you are asking. Do you think you can get a little demo to show us what is it that you are trying to achieve?

Hello! It's been done before. I have included some of the premium plugins in that way a couple of times myself. It's not a bad idea if the requirement for the creative is to not have any external JavaScript. Obviously, it's better to link to the CDN but given that's not allowed in your case, there's not many options.

No, it doesn't exactly. It's just a general hypothesis for the most generic cause of improvement from reduced frame rate. We're all happy to help as much as we can. I hope you also appreciate that there is only so much we can do without seeing the application running and the code in context. We also understand that not everyone can share what they are working on. So, blind we march onwards. What makes me suspicious of that is that it jumps up around the 30000ms mark and stays in that cyclical pattern. Even more now that you say the animations are finished and the scene stays idle with some looping cycles and the occasional hints popping up. There's not much left to do other than trial and repetition to see if you can isolate the issue. I'd start there, listing all the animations that stop and should not play, going over the ones that are looping and checking that they're not calling other methods or that they're creating phantom repeats. I'd start disabling other animations that are not freezing to see if stops the freezing, i'd turn off the hints to see if helps and so on. Ultimately, it could be something on the hardware itself, a power saving mode that kicks in if you leave it alone for a while... Or on the iBooks itself.

Throttling the fps helps probably because the browser then has twice as much time to calculate whatever it needs to before showing the frame. Sometimes higher fps is detrimental to your animation. If you have too much going on, it will fail some of the calculations, dropping frames, janking a bit, if you give the browser a bit more time (less frames to render per second), then it may stop struggling and will be able to do all its work in the time given so, all frames are rendered and show in time thus, the experience feels better. Still looking at your snapshot, something just kicks in at 30000ms and a pattern emerges. What is it that is happening there to create such intense and constant heaps? I'd narrow down around that moment in time and see what fires there that causes such pattern. We know bugs in computers these days are all caused by us, it's just a matter of isolating the components and reviewing them to spot where it is. It's not like in the old, old days where a real bug could be the cause of an application error.

That is sooo cheating Diaco. It's not even in the docs! You can't bring secret weapons to a fencing duel. There you go hoejun, someone's always going to one you up in life.

Hi ChrisZio, Let me follow up your message here so others can see the answer, if you don't mind. You asked for more info using MorphSVG on a DIV and how to toggle between two shapes when clicking on a DIV. The info on the MorphSVG will be in the docs and on that link Carl has provided. As to "using MorphSVG on a div", well, that'll be generic JavaScript knowledge. It will be a matter of you wanting to do something and digging around to see what is available. Just like now, creating a toggle. Here's a super bare bones example: http://codepen.io/dipscom/pen/ZBmrXM/?editors=1011 Hope this helps.

I can't think of a quick easy way from the top of my head other than, you create the classes you want to add to the children and add them to the children rather than adding a class to the parent that would trigger an animation in the child. TweenMax.to(".parent div", 1, {className:"+=newClass"}); Obviously, if you want different classes for different children: TweenMax.to(".parent .child1", 1, {className:"+=class1"}); TweenMax.to(".parent .child2", 1, {className:"+=class2"}); Maybe someone else knows a way that I don't. There's plenty of things I don't know myself

To me, it looks like there's some leaking going on. You say there's no cumulative growth in the JS heap but there is a seesaw pattern to that and the teeth get longer and longer as time passes. As Jack himself said, it's very hard to troubleshoot blind, though. There seems to be a very definite point in time where the JS really hits a snag and things just get complicated there. See if you can zoom down where the seesaw pattern gets longer and look check what methods kicked in at that very moment.

Hi hoejun, Welcome to the forums! Don't stress about the Google translator, you're here, that's what matters. Next time please set a little demo up demonstrating what you are trying to achieve. Even if it doesn't work, it will help us to understand your intent and what step(s) you might have missed. I copied your code and placed into a pen, yes it's trivial but it adds a lot of time up when we're going over everyone's question to do this. Help us help you. Only after copying your code over to CodePen was that I saw there was an error in your code. You were using "class" instead of "className" TweenMax.to(".parent", 1, {class:"+=on"}); //Typo TweenMax.to(".parent", 1, {className:"+=on"}); //This is the correct way Now both of the Tweens you wrote will work. However, I am not sure this is the result you are looking for because of the way you set your CSS cascading. You're setting new classes for child1 and box1 based on whether parent has a class of on or not. GSAP will not Tween the values of the children classes of child1 and box1, it will only Tween the values contained in the on class. I'm adding a width property to the on class and you can see it Tween while the children's classes just flick from one set of properties to another. http://codepen.io/dipscom/pen/WoYOgB/ Press the "run" button at the top to replay the animation.

Don't put yourself down, we're all at different levels with different subjects in life There's no such thing as stupid here, just inexperienced. Happy to hear that it makes sense, I can be a bit convoluted when explaining things sometimes.

Hello Buntafujiwaaa! I'm back. It seems no one's been here or said anything so the glory shall be all MINE! As I mentioned before, if you want to manipulate the path in SVG without using DrawSVG (or another specific library), you will have to learn to read the actual path code. Why? Because half of what DrawSVG (and any other library) does is read the code int that attribute. The other half is to write another load of code. Granted, for complex shapes it's very, very, very hard - We wouldn't need all the plugins and JS libraries if it wasn't, right? Onwards to the main act: The reason just grabbing two different SVGs and combining their paths generate gibberish motion is because they are two different SVGs. The code that makes their paths will be different because they were created differently (I could go into a bend here over chaos theory but, let's not...). If you are able to read the path code then you will be able to alter it just so, and achieve the desired effect. Here's MDN's info on path. And here's w3chool's one. If we look at the code that's in your Pen, clipping it to just a tiny section, more precisely the very first point in the drawing. Bear in mind the viewBox size being 1440 wide by 240 height. Original shape: M329.8,0 This reads: Move to position 329.8 in the horizontal axis and position 0 in the vertical axis. Target shape: M1440,100 This reads: Move to position 1440 in the horizontal axis and position 100 in the vertical axis. In the original shape the point is quite close to the top left of the SVG. In the target shape the equivalent point is very close to the bottom right corner. When you use GSAP to tween just that one point, it will look like it is traveling from the top left to the bottom right. Now, extrapolate that into all the points in your shape and you will get what you see in your Pen. In another words, that's expected behaviour. Here's a Pen I put together, it shows how little you need to create a decent simple shape and what you need to change to make it move, I have kept it with as little points as possible and as close as your original. http://codepen.io/dipscom/pen/jVQWJm/ Happy Tweening!

Yes you can achieve such effects without a JS library, it's more about knowing how the path is drawn in order to manipulate it. I'm AFK all day today but if no one's shown you how by the time I get back, I'll show you.

It's because one is for the start of the path and the other is for the end of the path. If you wanted your line to be drawn from the center to the extremities, you would do something like: TweenMax.fromTo("path", 1, {drawSVG:"50% 50%"}, {drawSVG:"100% 100%"}) The docs have all of the details nicely explained and examples.

Hey proweb1991, can you re-phrase your question? I am not sure I understand the question. Are you asking: Can the line be drawn from right to left, then be erased from right to left, instead of reversing?

I am nuthin' These are the ones you should look up to: http://greensock.com/forums/topic/15588-dragging-masked-svg-path/?p=67966

Hi Marshmallow, Yes, it's possible and very handy. It's all about scope, though. And in JavaScript that can be confusing. In the docs, there's plenty of detailed information on how GSAP behaves, have a look at this link and the methods: onComplete, onCompleteParams, onCompleteScope. http://greensock.com/docs/#/HTML5/GSAP/TweenMax/ I can't help you much further than this because I am having difficulties seeing when you want what triggered - get us a simple tiny demo and we'll tinker with it until you get your solution, how about that?

In many ways: With DrawSVG Plugin: http://codepen.io/dipscom/pen/zomYXE?editors=1010 Without DrawSVG Plugin: http://codepen.io/dipscom/pen/rWqNom?editors=1010

If someone could track down Jonathan in the real world and snap a picture of him, I would order a printed poster myself. As for you and your fish, Blake, I think it is a fitting match. Must say that I did not think you were stealing the fish, more like you were the lord of them fishes... Diaco hasn't complained about having a lamb.

Too much typing to write an answer....

Ah. DUH! I didn't see a little detail in the timeline... My bad. You are creating your tweens using an absolute time parameter. This is your first line of the timeline: tlWork.to('.prev-work', 0.3, {opacity: 1, cursor: 'pointer'}, 1) That last 1 is telling GSAP to start playing the animation at one second. So, when the click tells the timeline to play, it starts playing as you would expect but there is nothing happening for one second, that's why you think nothing is happening. You can either set all your starting tweens to 0 and the subsequent ones to whatever absolute time you need tlWork.to('.prev-work', 0.3, {opacity: 1, cursor: 'pointer'}, 0) .to('.yellow', 1,{top: '-100%', ease:Power2.easeInOut}, 0) .to('.blue', 1, {top: '0', ease:Power2.easeInOut}, 0) But better yet would be to set labels to group the animations that do not start immediately, that way, you won't need to be adjusting the position parameter every time the length of the animation changes. tlWork .to('.prev-work', 0.3, {opacity: 1,cursor: 'pointer'}, 0) .to('.yellow', 1,{top: '-100%',ease:Power2.easeInOut}, 0) .to('.blue', 1, {top: '0',ease:Power2.easeInOut}, 0) .addPause() .to('.blue', 1,{top: '-100%',ease:Power2.easeInOut}, "NextSection") .to('.red', 1, {top: '0',ease:Power2.easeInOut}, "NextSection") .to('.next-work', 0.3, {opacity: 0,cursor: 'auto'}, "NextSection") Here's a video about the position parameter. And some bonus tips: Use autoAlpha instead of opacity - You won't have to keep changing the cursor from pointer to auto if you do. Use x/y instead of left/top - That way the browser will use the GPU and animation will be smoother.

hugonoro, Did you try feeding the $container as the bounds for your handler element? It seems to achieve your desired behaviour (although if you push it against the corner it does go one pixel over but, surely you can mask that out, right?); Alter this: Draggable.create(handle, { type:"x,y", bounds: { minX: 0, minY: 0, maxX: $container.width(), maxY: $container.height }, To this: Draggable.create(handle, { type: "x,y", bounds: $container,

Hi Marshmallow, Welcome to the forums! If you create a demo of what you are trying to achieve, does the same issue occurs? I see nothing particularly wrong in the code you have posted so, it will probably be something else on your setup. With a live demo we can see everything in context, making it easier to identify what could be wrong in the setup. Without the whole context, it is very hard to debug as we would be shooting in the dark. Here's how to create a codePen. And bellow the video with a walkthrough.