Leaderboard

Check this thread for drag along the path demo by @OSUblake

That was kind of the point. Asking how to make a site is very ambiguous, and could take hours to deconstruct. If you asked how they did a certain animation, then it would be easier to tell you something more concrete, or even provide you with a demo. But it sounds like you figured it out, so more power to you.

Congratulations! I've made everyone in this thread an honorary member of my "You Might Not Need ScrollMagic" club. This is pretty much all ScrollMagic does. Yes, I've looked at the source code. And the problem with ScrollMagic pins.

Baby steps. That's how. I know you don't want to hear that, but making a site like that will not read like the recipe to baking a cake. That site uses framework-X, so if you use framework-X you should be be able do the same thing. That site is obviously made by a team of developers who have years of experience. I'm sure they could have a used a completely different set of tools and would still end up with the same result. It's not about what you're using, but how you use it. Start out small and build on that knowledge. That's the best advice I can give. There is no way to fast-track building a site like that.

Dealing with coordinates inside an SVG is complicated, especially if the SVG has a viewBox. I wrote this script to help get the transformed bounds of SVG elements. That's commonly known as an axis-aligned bounding box, or AABB.

And yes, I do understand the point you were making about precaluclating values for better performance. I would never argue that that is a bad thing. I was talking about the actual inverting of an animation, which is what @jesper.landberg was probably asking about because that is what it looks like he is trying to do in this post. That is very similar to the video animation I did in the post that @Sahil linked to.

in addition to what Shaun advised, if you need to add them at a specific time, use the position parameter var tl = new TimelineMax(); tl.to("#someElement", 1, {opacity:1}) //call function and start tween at time of 2 seconds tl.add( function(){ console.log('This function is running at the same time as the tween below is beginning'); }, 2 ) .to( '#someElement' , 1 , { x: 100 }, 2 ); also if you are calling your function with call(), that also has a position parameter: https://greensock.com/position-parameter The position parameter can be an absolute time, relative time, or label.

If I'm understanding what you're asking, it's as simple as var tl = new TimelineMax(); tl.add( function(){ console.log('This function is running at the same time as the tween below is beginning'); } ) .to( '#someElement' , 1 , { x: 100 } );

OSUblake, Sir your work saved me from sleepless nights. Thank you master!

Yep. That should give you an idea on how to get started, but it's not a perfect solution. For example, if the mouse is equal distance between two or more points on a path, which point should it use? That's something you'll need to figure out.

While not a benchmark, you can look at the source code and see the difference. A from tween is the same thing, but it adds runBackwards and immediateRender to the vars. TweenLite.to = function(target, duration, vars) { return new TweenLite(target, duration, vars); }; TweenLite.from = function(target, duration, vars) { vars.runBackwards = true; vars.immediateRender = (vars.immediateRender != false); return new TweenLite(target, duration, vars); };

Never really thought about it, always assumed they perform same, which is correct.

Yes, I think we worked it out. Sometimes it's very hard to see the point of a FLIP animation, and it shouldn't be used for every animation. It's really only useful for when the DOM has changed, and you don't know what the end values are. Once you figure out what the end values are, you could do a regular .to() tween, but if the DOM changes during the animation, then it might jump at the end. TweenLite.to(element, 1, { x: 300, y: 200, scale: 2 }); The invert step helps fix that problem, so you end up with an animation that looks more like this. TweenLite.fromTo(element, 1, { x: -300, y: -200, scale: 0.5 }, { x: 0, y: 0, scale: 1 });

Sorry I was late to the party. Sounds like you guys worked it out though, right? And yeah, my understanding of FLIP is that it's different than the progress(1).play(0) thing (which just forces the recording of all the initial values immediately). FLIP is for when you're animating to a state that has a totally different document flow (jockeying things around in the DOM), thus you're taking its new position in the document flow and making it APPEAR (only via the animation) as though it's coming from where it used to be (old document flow). Correct me if I'm off base here. And Jonathan, I think it's smart to do the pre-calculating thing in many cases (sounds like Blake is totally on board with that too).

Oh I see.. I understand your understanding, that makes sense. We were both talking about different munchkins varieties in the same Dunkin Donuts box. I was focusing too much on trying to get 60 (fps) munchkins in my mouth at once as fast as I can.

getBoundingClientRect includes transforms. Sometimes it's better to use offfsetLeft/Top/Width/Height. And if scale is involved, you should probably animate the x/y values from the center instead of the top/left corner. Basically, calculate the x/y values based on where the transform origin is. By default, it's at the center for HTML elements.

In that case you could try keeping all of the animations in your timeline with Linear eases and never play() the timeline. Always tweenTo() the next frame and add the ease to the tweenTo(). Doing this you will have to determine what the next label is, but getLabelAfter() will help With the solution above you will notice a problem if you are tweening to label4 (or any label) and you hit the next go tl button while the animation is happening, then you are still going to end up at label4. So you may want to disable clicking while animations happen or work on a more robust approach where you use getLabelsArray() and increment an index each time you click and then tweenTo() the next label based on the new index value. Also, be careful to check that there is a label after. In other words, you can't tweenTo() label6 as it doesn't exist.

I guess I don't understand what you're asking for because you've shot down two solutions I've provided. Your requirements are 'I'm looking for a solution which works without labels or events and I need to be able to specify progess and such on the timeline." What is it you're looking for?

You can just ask for the top/left after the transform If you're asking for the new position of a specific vertex after the square is rotated 90º, it would just be the original position on the axis it's moved across plus the length of the side in tow. If asking for something more complicated, this SE post could help https://math.stackexchange.com/questions/1917449/rotate-polygon-around-center-and-get-the-coordinates

Hi @lisartur I'm not sure if you meant preventing additional clicks during the active tween or you wanted it to count each click and continue? If it's the former, I'd add an isTweening() check like this: More info: https://greensock.com/docs/TweenMax/static.isTweening() If it's the latter, I'd probably just increment/decrement a rotation variable and feed that into the tween. That way if you click 10 times, you'd end up at -900 degrees. Maybe something like this: Hopefully that helps. Happy tweening.

Unfortunately, that was the last gold badge I had in stock. They are custom made in a monastery in the Himalayas and transported on the Silk Road to Istanbul where they are put on carrier pigeons that island hop across the Atlantic. It takes several months. I'm going to try and source a local supplier, I'll let you know when yours comes in.

I'm glad to see Blake and Jonathan still love each other and all is right in the world again. Each time you guys mentioned FLIP, all I could think of was this scene from The IT Crowd.

Not sure what the issue is, it looks same on Firebox and Chrome on windows. Maybe you are missing something from your production code. You can confirm that by opening your demo in debug mode, which will prevent codepen from messing your code. You can read following thread about stacking context, see if that helps.

You can either calculate the difference scale will cause or you can record values after applying scale. Check following demo where I calculate difference scale will cause, this will work only if your transformOrigin is center, otherwise you will need to do more calculations. But what you are doing doesn't seem like right approach because if user scrolls, your element vanishes at wrong point. You will need to recalculate position in both direction to fix it.

I still love ya Blake

Why did Paul Lewis make a GSAP helper for FLIP? https://github.com/googlearchive/flipjs/blob/master/src/gsap.js And why does this code code look very close to what I posted above? if (this.updateTransform_) { Object.assign(options, { scaleX: 1, scaleY: 1, x: 0, y: 0}); } FLIP animations are not new to me. I have been doing them for several years, and I realize that at face value they might look like a regular animation, but they aren't. Look at those Flexbox animations I linked to. There is simply no other way to do them other than with a FLIP-like animation technique.

I had a horrible time getting my point across in that thread. Please don't make me do it again. Changing the progress of a GSAP animation has nothing to do with the FLIP technique. A FLIP animation should always look the same. We are animating to an identity matrix. That's because we are already in the end state. There's a big difference between transitioning to a new state, and transitioning from a previous state. The underlying values are different, which makes a FLIP animation very hard to break. TweenMax.to(element, 1, { x: 0, y: 0, scale: 1 }) Please look at the many posts I've made about animating Flexbox. I may not have used the term "FLIP", but it's still doing the same thing.

You can play with custom ease to get desired effect when usual eases don't work for you. You can also merge two eases by using this demo by @GreenSock if you are after an effect like that.

Hi Guys, my Name is Oliver. I am the developer of anivendo. A fast, modern and easy to use HTML5 Banner-Animation-App for Windows (Mac-Version will follow) which uses TWEENMAX. · No Coding Experience required! · NO COMPLICATED TIMELINE! anivendo animates your Banner Creatives very much faster than traditional HTML5 Animation Tools like Google Webdesigner, Adobe Flash, Adobe Animate CC, Adobe Edge Animate, etc… Why don’t you take a Look. We are currently searching for alpha-Tester! https://anivendo.com/ Update (03-23-2018): anivendo is now fully documented! https://anivendo.com/docs/ Questions, Bug Report and Improvement Suggestions can be made via anivendo Community Forum https://anivendo.com/community/ _ Cheers Oliver

Hi @nmarketti You can, but I'd then ask why do you want to do that? I've seen some CodePen demos creating this effect, but they seem a bit over-complicated for the end result. DrawSVG does it with one line of code and SVG scales perfectly with window resizes. I would think SVG would be the easier choice, but that's just my two cents worth. Others may drop by with different thoughts or an easy solution. Happy tweening.

Hi @DevSaver, It's hard to troubleshoot with just an image. Could you put that into a demo for us? It doesn't have to be your actual project assets. Just enough to demonstrate the issue would be great. If you could do that, I'm confident we can point you in the right direction. Thanks and happy tweening.

Are there T-Shirts? Follow up question: where do we get these gold badges that Shaun has now? My Moderator Badge is still green. Is there a Gold Level and does that lead to a Platinum Level?

I get what you're asking, but I'm just not sure how you could do that without modifying the scroll behavior. To make it seem like the scroll is getting harder, you would have to add a bunch of extra space to the bottom, and then start translating all the content down once you reach a certain scroll position, but with some friction. I think coding something like that would be pretty difficult.

I don't see a problem in Firefox. For Safari, translateZ can fix clipping issues.

The progress trick can help out with the start of animation. There can be a little stutter the first time you play an animation. It usually only happens with long or complicated timelines, but if you have a bunch of animations going on at the same time, then the stutter is likely to be more noticeable. So it can help out, but at the same time, doing the progress trick can cause a stutter if you do it when there are a lot of animations going on. You kind of just have to play around and see.

Well I still love ya too. That's why I said I'm done... with this thread, not with GSAP. I don't want to get into an argument and say something that I can't take back.

You are taking that definition completely out of context and applying it to some trick that Jack showed you. Yes, I know about that progress trick. That is not the flip technique. Can somebody else please verify what I'm saying? I'm really losing my mind having to re-explain this all over again.

Yep, GSAP is doing exactly what you're asking it to do. But again, this is an order-of-operations issue. If you really need to define your rotations in that order, you could simply tap into GSAP's string-parsing capabilities and use a proxy object like this: That circumvents the entire CSSPlugin and lets you apply the string directly. GSAP will find the numeric values inside the string and animate just those. Make sure you've got matching quantities in order for that to work, of course. Does that help?

You will need to use Linear.easeNone ease on each tween for smooth transition. You can also set it globally for all tweens if you want.

What I meant by 'avoiding them' was more, like, when you learn about a new thing you get all excited about it and try to do everything with it – even stuff that actually doesn't need it. I can totally see myself reworking animations to add CSS variables everywhere even if they don't do anything at all to improve the animation in question. So, gotta watch myself

Hi @pcdavis I'm not a React user so I can't be of any help in that department, but I can answer your morph group question. The MorphSVG plugin works path to path so you can't just add a group to the tween, but it's fairly easy to accomplish with a loop. The trick is just making sure you artwork is in the right sequence to loop through and perform the morph. Here's a basic example: In my example, I've added a number to each path name. By doing that, I find it easier to see if I've made any mistakes, but it's not necessary. If your start and end paths are in the same sequence in their respective groups, it should be as easy as selecting the elements and creating morphs based on the index of the loop. In your case, you have a little extra work to do with the eyebrows. They aren't present on the happy face so you'd have to create a scale or drawSVG tween for them when you morph the mouth and eyes from happy to sad. Hopefully that helps. Happy tweening.

Just made your sky container's position fixed. Changed easing on mickys to Power1.easeInOut because you are animating elements for long time to short distance so it was looking stuttering. With easeInOut animation will be fast at start and end so you won't notice stuttering a lot. Changed your tweens to staggerTo tween. And commented out anything that wasn't important. And added new div tag for content.

For what it's worth ... ScrollMagic is a bit unnecessary here (unless the CodePen isn't displaying the entirety of the project). This could be handled with a simple paused timeline where the current scroll position progresses the Timeline. Also, using some X positions rather than "left" could help. Lastly, I'm a fan of using background images on divs and moving the divs (using X/Y) rather than moving the backgrounds because of the hardware acceleration. Here is a quick codepen taking ScrollMagic out of the equation and using the users scroll position to progress a Timeline. I didn't spend to much time on making sure the timings match up, but it should give you the idea.

Hi, Does this comes close to what you're trying to do?

Thanks for clearing this up, and such a rapid response! I would be happy to use the gsap shortcuts that utilise css matrix3d, If i were able to reproduce the angle / rotation in my design (screenshot). Perhaps you could point me in the right direction on how I could do this?

That's just an order-of-operations thing which I explain here: If you NEED that non-standard order-of-operation, you could just animate to the "transform" property instead of the component shortcuts (rotationX, rotationY, etc.), like: TweenMax.to('.gsap-box', 1.3, {transform: "rotateX(36deg) rotateZ(331deg)"}); Just beware that it's typically more efficient (uses fewer resources) and allows rotations beyond 180 degrees if you use the component shortcuts. The "transform" method basically converts things into a matrix3d() under the hood using the browser itself, and parsing those is inherently ambiguous math-wise. Does that explain things? Let us know if you need anything else. Happy tweening!

In your example you are trying to get 'content' attribute but I think you are trying to retrieve text of your li tags. You can do that using text method of jQuery. To use it to Tween, you need additional class to your tabs, like contentOne, contentTwo. Though your example is way too complex, you can simplify it as follows,

Basically what I'm saying is that you can't use ScrollMagic if you want to modify the scroll behavior. The library is not designed to handle such scenarios. By modifying the scroll behavior, I'm talking about modifying the native scroll behavior. How the user scrolls the page. https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#hwQTx9IDZT5f4TgU.97 Trying to do an overscroll effect would involve modifying the native scroll behavior.

Actually, this might be easier. I just modified the closestPoint function from this d3 demo. https://bl.ocks.org/mbostock/8027637

+1 too [Edit] Solution: Use the Ease plugin with this great js library: bezier-easing.js: TweenLite.to(mc, 5, {x:600, ease:new Ease(BezierEasing.css.ease)}); (the default css's ease! @Mark) or specify any cubic-bezier: TweenLite.to(mc, 5, {x:600, ease:new Ease(BezierEasing(0.25, 0.1, 0.0, 1.0))}); Check also this: http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/ And this, if you want directly the approximations of the principals cubic-bezier easing functions (in easing.js): https://gist.github.com/mckamey/3783009