Leaderboard

You are using CSS transitions on those elements with .over class, which causes GSAP and CSS to try control the properties. I removed the transitions from your demo and it works fine in Firefox on windows.

CSSPlugin rounds values. TweenMax.to("#logo-home", 4, { filter: "blur(6px)", autoRound: false });

You can add your tweens in a timeline and then pass that timeline to the setTween method. http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween GSAP doesn't have default duration on tweens, you will need to use to, from or fromTo methods to create your tweens. If you are not familiar with GSAP or timelines checkout the 'Sequencing and grouping tweens with TimelineLite' section on following page, https://greensock.com/get-started-js Also check the examples page on ScrollMagic, there are enough examples to find almost all solutions, http://scrollmagic.io/examples/

You can do something like this, by using fake cursor. It will be a lot easier to control and to get smooth animation. I am using HTML but you can do same concept with PIXI.

Hm, I don't really have time to analyze and re-engineer things for you, but it looks like you're animating each and every <li> (using 27 different sequenced animations for each) and they're all moving as a group, so why not just toss them into a container and animate that instead? That way, you only have 1 thing animating instead of 27. Also, it looks like you're loading a somewhat recent version of TweenMax, but then some super old versions of CSSPlugin, TimelineMax, TweenLite, and EasePack. If you're loading TweenMax, it already has all of those inside of it, so it's wasteful to load those too. And I'd definitely recommend using the latest version (2.0.0 as of today). You've also got a few script tags that are pointing to non-existent files. Hope that helps at least a little.

The final param is the position parameter which controls at which time the animation will be inserted. What is happening there is that it is inserting that animation at a label of "textEffect" so that the next animation can be placed at the exact same time. note both animations use "textEffect" as the position parameter. tl.staggerFrom(txt, 0.4, {alpha:0}, 0.06, "textEffect"); tl.staggerFrom(txt, 0.8, {rotationY:"-270deg", top:80, transformOrigin: "50% 50% -80", ease:Back.easeOut}, 0.06, "textEffect"); Definitely check out this comprehensive overview of the Position Parameter.

I can confirm what GreenSock has reported. It's a closed path, not a stroke. I've quickly swapped out the fill colour for a stroke and drawSVG did its trick. Obviously it looks wrong as it's not a line but a super thin polygon. If you amend your SVG to not be closed paths, all should work as desired. As for the debugger, that's quite odd. Something during the installation of your repo might have gone wrong and I have a broken copy of it. Downloading git repositories while tethered to a mobile phone, riding a train with patchy signal might not be advisable.

Hi jakub40, This looks like it's related to ScrollMagic, which this forum isn't dedicated to. You'd probably have more luck looking at ScrollMagic's official documentation or asking in its issues page on GitHub. However, from what I can tell, it looks like maybe you shouldn't be chaining .setTween methods immediately after creating the new scene? So you could try something like: var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}); scene.setTween(".layer_8", {top: "100px"}) .setTween(".layer_7", {top: "100px"}) ...

Sorry, I totally forgot that I had built in a special option for this - just set reduceWhiteSpace:false.

Checkout @PointC's sage advice on using DrawSVG on a mask to reveal non-solid strokes

I proud to announce that I finally published first release. Many thanks to all of you who send me feedback! @davi Thank you for detailed feedback, Unfortunately current release is Windows only but I plan to add Mac edition in the future. Yes, app have it's own file format but the exported document is single html file with embedded js\svg\images. The only external dependence is GSAP library. I don't see any benefits in placing everything in single svg instead of single html and I'm afraid it can cause browser compatibility issues. Unlike bodymovin\Animate CC I''m trying to make result jscript easily readable\editable so I think it's possible to add some "snippet generation" workflow in the future. @Oliver16Years I spent some time trying same animations in code and in visual editor and I have to agree with You that if you work on complex animation and you know your animation library very good things can be faster with manual coding. I must admit that first version of my tool is mainly for people who can't code or don't want to learn GSAP syntax. But in general I still believe that one can be very productive using sophisticated visual tool. I hope I will be able to prove this with future releases of my app.

Hi @ghost666, Sahil has given you the solution to your problem. What you want to do is, as he said, shrink the other columns, not grow just increase the width of the third column. By the way, you probably don't want to use GSAP just to add classes to your elements. You can toggle that without GSAP - As a rule of thumb it's actually better to animate either with CSS transitions/animations or with GSAP, not both. They'll be fighting for control and causing all sorts of headaches. It really looks like you don't even need GSAP for what you are trying to achieve, simply a :hover pseudo attribute and some transitions and classes.

Thank you Jack and crew for GSAP 2.0.0 Released and an especial thank you for the ES modules version of the GSAP libs!

Thanks Jack! Makes perfect sense in that light, especially if that's how people have been using the kill() method. I was expecting it to completely reset everything but I see that that's tricky given the conversion to transform-based positioning etc. Still, from a (read: my) design standpoint there should be some public method that completely resets any mutations on elements not directly created/defined by a controller like Draggable. In non-trivial applications the DOM element that can be dragged may also be controlled by other plugins and if they all leave properties behind on elements they don't directly own you're quickly in a situation where you have to clean up plugin internals that you shouldn't really have to care about. Maybe a future version of kill() could simply accept a boolean (with default false) that indicates whether the element should be reset completely... My two cents.

you are insane! thank a lot , i will study this in few hour ..

Ha.. @OSUblake beat me to it, I was gonna suggest the same thing to do with autoRound and without an onUpdate. @maguskrool That codepen you forked from me was made several years ago when CSS Filters were not supported consistently cross browser. But since then browser support has increased and there is really no need to animate CSS filters with an onUpdate anymore. Plus GSAP supports animating CSS Filters without it now. CSSPlugin Docs: autoRound: https://greensock.com/docs/Plugins/CSSPlugin#autoRound Happy Tweening

Hi The Mighty @Carl.. Yeah i found that odd. When i click twice i see this in the console it outputs Clicked false Clicked false Clicked true The user has to click twice and wait for an action which could be a usability issue. @Simion Iulian Any reason on line 23 ( let play = false; ) you just don't set that to true so the user only has to click one time ? On line 23 you have the following: // you have this let play = false; // if you set to true the user only has to click one time let play = true; Also couldn't you just animate scrollbar instead like Jack ( @GreenSock ) advised so your only animating one thing, the scrollbar versus staggering animating every <li> tag? Just my two cents. Happy Tweening

Oh, and I forgot to mention that you're asking a lot of the browser by animating that large of an area. You might want to consider at least setting visibility:hidden on any elements that aren't in the viewport so that you can reduce the repaint work that the browser must do.

Hi, thanks for the demo. For anyone else looking into this it appears you have to click on the document twice and then wait about a second before any animation starts.

Hi Sarmad, Welcome to the forums. Like Dipscom, I'm a bit unclear on your question. How responsive your animations are really depends on how you code them, what properties you animate and how you structure your HTML and CSS. We are not aware of any limitations imposed on GSAP by third party tools, but its hard to give a firm answer without some actual specifics.

Eh? Could you rephrase your question?

I'm sure you did read the docs carefully... it wasn't there I added it recently. You're not crazy.

I suppose you're forgiven, @emmanuelulloa Did you know that GSAP is whitelisted on EVERY major ad network? So its file size doesn't count against you. We went to bat for ad developers years ago and all the ad networks recognized that GSAP is kind of a defacto standard in the industry, so they saw the value of whitelisting it. We explained why that was so important here: https://greensock.com/kilobyte-conundrum/ https://greensock.com/html5-banners Hopefully your client sees the value as well and will offer GSAP on their CDN without counting file size against you. Refer them to those articles if they push back Cheers!

I used to have problems like that. Updating my graphics driver fixed the problem.

var tl = new TimelineMax() .set(".layer_8", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_7", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_6", {top: "55px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_4", {top: "35px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_3", {top: "20px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_2", {top: "5px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_1", {top: "-100px"}); // the tween durtion can be omitted and defaults to 1 var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}) // animate color and top border in relation to scroll position .setTween(tl) .addIndicators({name: "2 (duration: 400)"}) // add indicators (requires plugin) .addTo(controller); I believe you can set timelines as well as tweens so something like this should work. I'm not an expert on Scroll Majic but I believe you were confusing the Scroll Majic '.setTween' method which attaches a tween to a Scroll Majic scene with the GSAP '.set' method which sets a property on an object.

I see the problem. You were trying to do a drawSVG animation on a path that had no stroke! It was a filled shape, not a stroked one. It's deceiving, though, because it kinda looks like it would be a stroke just because it's line-like. You also appear to be creating overwriting tweens. You've got a TweenMax.to() on "#line-02" and you're simultaneously doing a totally different drawSVG value in this.tl (a TimelineMax). To show you that things are working, try eliminating all the tweens in componentDidMount() with this: TweenMax.to('#line-02', 2, { morphSVG: 'M0,0 L50,0,50,50,0,50,0,0z', ease: Linear.easeNone }); You should see exactly what I mean. And for the record, I was using the 2.0.0 release of GSAP and the latest bonus plugins that were posted last night (ES modules). The older ones would probably work just fine too. Does that help at all?

hmm, it appears to be an optimization built into the browser. I simplified your demo quite a bit to make use of GSAP's advanced tweening of complex strings. It appears the browser is only allowing integers to be set. I'm not sure there is a valid work-around.

I am interested to give it a try, I might be able to do it tomorrow evening but don't consider it a promise.

What you are showing should work fine with 2.0.0 in all browsers. Please let us know if you run into any problems.

If you look at those boxes, they go in order, and adjacent boxes will not overlap. So you can use that prevent unwanted movement. For example, if the user starts out dragging in the first box, we'll call that box #0, then you can limit dragging to that box and box #1 i.e. the next box on the curve. Once the user has dragged into box #1, then you would limit movement to box #0, #1, and #2. Once the user has dragged into box #2, then you would limit movement to box #1, #2, and #3. You would just continue that pattern until the end. Normally I would make a demo, but I don't have a lot of time right now. If @Dipscom or @Sahil wants a challenge, feel free to help out.

Yeah, that's one problem with finding the closest point on a path. Think about a circle. There would be an infinite number of closest points if your mouse was in the center. I commented out the distance property in the object returned by that function because I wasn't using it, but you could use that to run some logic to make sure it doesn't jump around. Breaking your curve down into smaller chunks might make that easier. Somewhat related demo where I create bounding boxes around smaller parts of a curve. You can see that progression could follow the order of the boxes.

Let it never be said GSAP fourms isn't value for money. Wait for Black Friday, we'll be doing some crazy deals: Ask one question, get three answers, five jokes and a CorePen example snippet.

Hi Christian, Doesn't seem possible from what I have tested. We had similar question where users wanted to snap to mouse on click. You can read about what the code does in following thread, I modified it to animate but there are some issues, like if you click instead of dragging which is if you lift mouse before transition completes, your mouse keeps dragging still, and I didn't find any way to get around it. Fixed it by setting allowNativeDefaults to check if mouse is down. You can also use proxy target and use it's value for transitioning and dragging. But all this might be possible to simplify if @GreenSock adds another event before onPress, which we can use to do any calculations and snapping. And ability to hold the onPress event until we decide to trigger it. For example, onBeforePress we can do the transition and once our tween completes use the onComplete event to trigger onPress.

Update #3: Lottie Animation is being controlled by GSAP, with basic functionality. @OSUblake thanks again for all the information! I have been on a learning spree today and your insights have been invaluable. So I think this is mostly done; although I imagine it's not very well optimized code. Trigger Tweening, and Duration Tweening both work. I haven't put the code through any stress tests to see how easily it breaks yet.

Hi, Since the approach followed here is based on the closest point on the path, the continuity of the drag(and correspondingly the fill) will not be maintained always. I am looking for something which will maintain the continuity as well. I am using this as a reference:

The transformOrigin only applies to transforms like scale, skew etc. not when you animate height/width. You will instead have to shrink your column1, column2 to achieve that effect.

Yeah, I was wondering what that question was referring to because I showed I how to do that in Post #7 using a path. If you wanted sharp edges, instead of smooth curve, I guess you could use a polyline. It's kind of funny how this topic was brought up again. I just saw on CodePen that the developers of waaark.com made a demo showing how they did the bouncing lines.

With a little bit of math we can actually apply a wave to a curved surface Sawtooth version...

What a wonderful post. And it doesn't have any question I need to answer or even mention IE! Sweet This is great, Craig. I really appreciate you sharing all of that and I'm sure it means a lot to the other guys too. I tell people all the time that they would be amazed at how much they will learn by lurking in these forums. I know that once I started challenging myself to answer a few questions its really where my learning and understanding accelerated. We all go through that fear of looking like a dope which is why we try so hard to be gentle with any newcomers. My typical experience starting out with trying to help aroud here: here's a question I don't know let me look in the docs oh there's the answer! When I found something in the docs that I didn't understand like shiftChildren() or invalidate() I'd build a little demo to try to see what that thing does. I found that even building little demos for the things that I conceptually understood still helped to ingrain the concept into my brain. Even after all my time in here I'm amazed at all the things I'm exposed to that I had no idea about. Although I appreciate all you did show your appreciation to the team, I truly hope this post serves to pull more lurkers out of the shadows. Thanks again for sharing your experience, its been great getting to know you and have you become such an important part of what we do. Carl

Glad to hear you're enjoying the jump from AS to JS with the animation platform. I miss Flash sometimes (especially when debugging) but JS isn't as bad as I thought it would be. Back to your question... You can tween siteY based on whatever object it is a property of. So, for example, if you've got it in the global (window) scope, you could do: TweenLite.to(window, 1, {siteY:newSiteY, ease:Elastic.easeOut, onUpdate:drawCanvas}); However, it's generally considered a good practice to NOT put things in the global/window scope, so you could create a generic object or an instance of some custom object and just tween it that way, like: var obj = {siteY:0}; TweenLite.to(obj, 1, {siteY:newSiteY, ease:Elastic.easeOut, onUpdate:drawCanvas}); function drawCanvas() { console.log("siteY is now " + obj.siteY); } Does that help?