Leaderboard

Just to chime in @Visual-Q, some scroll events, depending on how they were trigered, cannot be cancelled. It might be outside GSAP's reach. @GreenSock himself will be able to confirm that. In the meantime, this article has some useful information about how browsers handle scroll. https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97

It's a security issue if you try to use the CSSRulePlugin without a server in some browsers. Try using one of these for a local dev server. BrowserSync https://browsersync.io LiveReload Chrome Extension https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei MAMP https://www.mamp.info/en/

I would second that. As the other two gentlemen have mentioned, it's a pretty common SPA technique, where you fake navigation manipulating the browser's history but do not refresh the page itself, therefore, you can have some elements stay in place while others come and go. Vue is my personal preference, for no other reason than being a personal opinion. React is another one, Angular... Preact... There seem to be a new one every other week. Throw a stick and pick the one that falls from the branch, you should be fine with it.

Totally understandable. Somebody just brought up the same thing here. https://greensock.com/forums/topic/16172-svg-wave-animation/?tab=comments#comment-81769 If you hang around the forums and try to figure out some of the questions, you'll learn a lot. After a while programming won't seem foreign.

Oh, I will definitely learn the language. But having no programming background, it is sometimes very hard and frustrating. Anyway, thank you for this code snippet. This will help me getting further.

Hi @OSUblake AND @Dipscom, Thank you so much for the suggestions. I will look towards Vue.js for future projects that I would like to apply this effect to. Thanks for the detailed answer.

*bows to the floor*

I've been using JS for like 8 years. I started out making games with canvas, which I think really helped me out. Once you understand JS better, it's more about problem solving than anything else. Some people think I'm really good at math, and I don't know how to respond to that. Maybe at one point in time. I took a lot of math classes in college, but I also forgot everything. Almost all of the math I use revolves around a couple trig functions and the Pythagorean theorem, and I've used them enough to where they are burned into my memory. When I need a refresher, I turn to Keith Peters and his coding math videos. He uses canvas, but the concepts will work the same with HTML and SVG. https://www.youtube.com/user/codingmath/videos Here's some really good advice on math and JavaScript. You don't have to be a whiz, you just need to know how to google. https://codepen.io/rachsmith/post/hack-physics-and-javascript-part-3-springs-and-some-other-things And don't be afraid to experiment. Everybody writes bad code, and everybody starts out at the same level. I was a total n00b at one point in time.

Your a god holy cow. Thank you so much! Now it's in context it makes total sense. I'm gonna study the heck out of this code. Just wondering how long have you been using JS and what's your background in math? Aha thanks @PointC. My day will come I promise I'm putting in the hours so hopefully with the help of my pet Rosetta Stone I might be able to start deciphering some of this. Funnily enough your post actually inspired me to take GASP seriously! Big love from the UK man. Can't say enough about how cool this forum is, I just can't wait to be able to give back on here.

You didn't select the 'email' element. And a polygon doesn't have a 'width' and 'height' property. You could use scale or scaleX and scaleY for that. var star = document.getElementById('star') var email = document.querySelector(".email") var onEmailFocus = (e) => { TweenMax.to(star, 5, {x: '+=1000', y: '-=1000'}) } email.addEventListener('focus', onEmailFocus)

How's this @smallio Create your blob like so. The options should be easy enough to understand. var blob1 = createBlob({ element: document.querySelector("#path1"), numPoints: 20, centerX: 500, centerY: 500, minRadius: 300, maxRadius: 325, minDuration: 1, maxDuration: 2 });

I think the easiest way to get started would be with a framework like Vue.js, right @Dipscom ? https://vuejs.org/ But don't trust me because I've actually never used it. I just know how it works. jQuery's AJAX is easy to use. https://api.jquery.com/jquery.get/ $.get("some.html", function(data) { // Inject html $(".container").html(data); // Play animation TweenLite.to(".foo", 1, { x: 100 }); });

Yup - it can certainly be frustrating when you're just starting out with GSAP and JS. As @OSUblake mentioned, hanging around here will almost certainly add to your knowledge and the language will start making more sense over time. Regarding your question about non-GreenSock tutorials: That would be nice, but it's a matter of resources. @GreenSock & @Carl take care of the company and monitor the forums. The rest of the Moderators and active members volunteer as much time as we can in the forums because we love the platform and enjoy helping community members. That's why we try to keep the threads & tutorials focused on GSAP questions and problems. Depending upon your preferred method of learning, there are many resources available. In addition to the obvious books and online tutorials there are a large number of free YouTube channels dedicated to JS. Here's a good list that may be worth bookmarking. https://github.com/andrew--r/channels#english-language Hopefully that helps a little bit. Happy tweening.

Ohhh ok, now I get it. Thanks!

Appreciate the insight & advice, very interesting to hear. Also just checked the pen again & saw show points ... very cool!

Fantastic article!

I added an option to show the points in case it's not clear what's going on. Each point is animated between the minRadius and maxRadius at a certain angle. And on every update, the catmull-rom/cardinal function creates a smooth path between all the points in a blob.

Thanks OSUBlake! Much appreciation.

Well, I wouldn't expect anybody to understand how those catmull rom functions work unless they're really good at math. Good news though, I already did the hard part for you. So it's really an exercise in trusting me, copying and pasting the code, and then calling one of those functions on every update from something like a timeline. path.setAttribute("d", cardinal(points, true)); I'll make a demo with a circle, but the major concepts will based on this thread. Animating an array of points.

Hi @hemmoleg Are you saying the CodePen demo isn't working for you in Chrome? Or are you only seeing errors in your local testing? I ask because the demo works fine for me in all browsers. I also noticed you're using the /latest/ directory for the scripts. Those are actually older versions of TweenMax and the CSSRule plugin. For the latest versions, please use these links instead. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/CSSRulePlugin.min.js"></script> Happy tweening.

This thread on canvas morphing reveals some hidden tricks about the MorphSVGPlugin

Update nevermind I see the syntax error after checking the docs.

Not a div, but my favorite is the canvas drawImage() method. You can provide optional source and destination sizes/coordinates. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage That's what I'm using to scale these images.

I figured this was actually becoming something I might find useful. So I did some more work. Brand new codebase. This now reverse toggles on click, and calculates size and position for however many columns of slides you want. A worthwhile exercise I learned several new things about GSAP and jQuery.

I added some logic for a clickable reverse that seems reliable.

This should get you going. Demonstrates the css and how you might do the expansion animation with your switch. Note that if you are expanding the panel to full width then your idea doesn't take into account reversing to the initial state. You're going to leave viewers with the expanded item and no way to escape it without additional logic.

Most probably you are using from tween and setting scale to zero somewhere or you have multiple tweens controlling same element. Without a demo it will be hard to help you, so please post a reduced case demo.

Thanks for the clarification. It sounds like you are going to have to determine which column you clicked on and move it over to the left based on how many columns are to the left and how wide they are. Likewise every column to the left of the one you clicked will need to move left and every column to the right will need to move right. Its all possible but it would take a nice chunk of custom code and how its written would be highly dependent on how your html / css is set up, whether or not the whole thing is responsive, and whether or not there can be a variable number of columns. There a hundreds of ways to approach accordions like this going back to the Flash days. I'd say google around a bit as I'm sure you will find some ideas to borrow from similar examples. Unfortunately, unless someone has a similar situation or demo to reference its not the type of thing we can dive into. If you have a question more related to animation and GSAP, we'd love to help.

The only issue with using set for items initial state is that the DOM may render the elements before the javascript is ready and you may see a flashover of the item unexpectedly. There's various ways to get around that such as hiding page display until the javascript is loaded. Setting the initial state in css will pretty much always prevent it though. You could even set it inline on the item since gsap is just going to animate the inline properties anyway, lots of people would frown on that, but I don't care. With respect to performance I don't see any likely difference in performace whether you set the css in gsap or pick it up from the item's current state. Maybe if you had a large number of items it might.

Hi @Daniel Park I can't speak for everyone else, but my general rule of thumb is I use GSAP to set() everything I plan to animate. If a property is not going to change, I use my stylesheet. If you're triggering animations on scroll, you wouldn't even need to set() them. You could simply use a from() tween and they'll be all ready for you to tween when you hit the scroll trigger. As far as performance and the FPS drops you're seeing, we'd have have to know what you're animating. Are they large SVGs and pushing the browser a bit too hard? Ultimately, GSAP is animating values and a lot depends on what you have moving on the screen and how hard you're making the browser work. I'm not sure if that helps at all, but that's my two cents worth. Others may jump in here as well. Happy tweening.

Here is how you can get it. The SVG path that you see is only updated externally using retrieved values. In case you don't want to create element. Another method I tried was using modifiers plugin it works but only if both paths have same number of points, I guess while working with svg element @GreenSock does some additional calculations.

Figured it out! Needed to use the invalidate function. See here: var box = document.querySelector('.box'); var timeline = new TimelineMax({ repeat: -1, onRepeat: () => { timeline.invalidate(); } }) timeline.add(TweenMax.to(box, 1, {x: 0, y: 100})); timeline.add(TweenMax.to(box, 1, {x: 50, y: 80})); timeline.add(TweenMax.to(box, 1, {x: 100, y: 100})); timeline.add(TweenMax.to(box, 1, {x: 150, y: 80})); CodePen Thanks all who helped out.

Carl brought up this canvas morphing demo I made... http://codepen.io/osublake/pen/RWeOWX But it's kind of old, so I told him I would make an updated version because doing canvas morphing is much easier now. You no longer have to use an actual SVG path as a proxy to get the transformed path strings. There's an undocumented method that the precompile option uses (pathFilter), so you a can tap into that to get the transformed path strings. // Path strings var path1 = "M300,25l86.6,150H213.4Z" var path2 = "M500,23.92L524.72,74,580,82l-40,39,9.44,55.05-49.44-26-49.44,26L460,121,420,82l55.28-8Z"; // Data for the start and end paths var pathData = [path1, path2]; // Run it through the MorphSVGPlugin MorphSVGPlugin.pathFilter(pathData); Using the pathFilter method might seem awkward at first because it doesn't return anything. It mutates the array you pass into it with the transformed path strings... http://codepen.io/osublake/pen/1754cdf8805e7061094036125958200d?editors=0011 There are also some other things you can pass in the pathFilter method, like a shapeIndex and map type... MorphSVGPlugin.pathFilter(pathData, 6, "complexity"); The next step is to decide on how you want to tween the pathData. In the past I would convert the pathData strings into a bunch of arrays of numbers, and tween the arrays using the EndArrayPlugin, kind of like in this demo I made before the MorphSVGPlugin came out... http://codepen.io/osublake/pen/RPKdQz?editors=0010 But that can get messy, and there's a much better solution with modern browsers, the Path2D object. It will allow you to use SVG paths directly inside of canvas. var path = new Path2D("M10 10 h 80 v 80 h -80 Z"); context.fill(path); And since GSAP can tween complex strings, we now have a pretty straightforward way to do morphing inside canvas! http://codepen.io/osublake/pen/EZNMEZ/?editors=0010 However, there is one issue. There won't be any IE support for this, and the SVG constructor feature is currently broken in Edge. Hopefully that will get resolved soon. https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8438884/ So there you go. High-performance morphing using GSAP and canvas. Morphing 50 different shapes while using a blend mode. http://codepen.io/osublake/pen/pRNYRM/?editors=0010 .

Hello swampthang, Have you looked at the various overwrite properties available? http://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/ overwrite : String (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property):"none" (0) (or false) - no overwriting will occur. "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties. "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers. "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controling the target at a time. "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet. "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role.