Leaderboard

Hey Kim, Welcome to the forums I'm still relatively new to greensock but I've been designing for as long as I can remember. I've come to believe the two are actually very symbiotic. As @OSUblake said the other day on here. All the best developers he knows have come from a design background (I believe also the Greensock team). As far as design process goes dribble is really incredible for me for a few reasons. People post progress of their work as they are going along & other people rebound them. It helps me see the process & I can deconstruct how things are made a lot easier. For me at least 80% of the things I make come from some sort of visual inspiration. From there it's really just a question of "can I code this from scratch?" No matter what the answer is here, I'll go straight to after effects/in vision/webflow & make a prototype. From here I have pretty much everything I need to start coding it, general idea of structure/easing/colours etc. If I'm still unsure I head to Codepen and see if anyone has achieved anything close to what I'm trying to do and reverse engineer it, as you're doing already! If you're still struggling at this stage you can post your progress on a forum and see if anyone has done something close or can help you towards understanding the hard parts. Absolute worst case scenario: It's too complex & you can save the idea for later, or try and render your animation from after effects using bodymovin & GASP together (super powerful combo)! I also recommend The Futur (they literally have a series called the process which talks about... you guessed it, the creative process). IMO this is the best channel on YouTube... I've learnt more on here in an hour, then I have in some days at university. https://www.youtube.com/user/TheSkoolRocks Finally here's a cool bodymovin' tutorial if you're interested in that as well - Hope at least a tiny bit of that was useful as I say I'm still a nublet. All the best, Smallio

Hi Kim This is one of those subjective questions where 10 different people will most likely give you 10 different answers. I think a lot depends on your individual learning process. Do you prefer books, online tutorials, videos, demos, classes etc... I'm not sure there is a one-size-fits-all approach. You said you're a beginner, but I'm not sure if that means you've been coding for a month or a year. I've been doing this for a few years and there are days I still feel like a beginner. Our resident 'AI from the Matrix that escaped to the human world' @OSUblake will probably tell you that creating little games is an excellent way to learn as that will help you to think logically step by step. It's advice he's given before and I second it. It's one of the things I've been doing lately and it's a lot of fun in addition to being a wonderful learning experience. As far as real world projects go, I think what you're doing by reverse engineering CodePen demos is an excellent way to learn. I'm not sure about any particular classes that take you from concept to conclusion. Others may have some links and ideas about that. I think the biggest thing is just keep writing code. Everyone writes bad code and starts out knowing nothing at the beginning of their coding journey. Write code, write code, write code and then write more code. If you do that and learn a new thing each day, everything will start to click and you'll have may 'ah-ha' moments as you progress. I'm sure others will jump in here, but that's my little 'ol two cents worth for you. Happy tweening.

Hi @Scarybelles That's a really neat animation! I like your approach to learning. That's kind of how I got started. I rebuilt a pretty complicated project from scratch, adding one line of code at time, making sure I understood what everything did. It took awhile, but it was worth it. Here's the basics of the getCoords function. It starts off by creating a div and span. It copies the text from the input to the div, and copies every single style from the input to div. Basically, it creates a clone of the input, but as a div, and appends it to the body. A dot character "." is added to the span, and the span is appended to the div, so it will be right after the text. It calculates the position of the span, giving you the width of the text. That width is then added to position of the input giving you the coordinates of the caret. From there the function calculates the angle from certain points on the SVG to the coordinates of the caret, which are used to calculate other coordinates that are used in the tweens. And at the very end it removes the div so you don't see it. I modified the animation so you can see what's going on a little better. Creating elements and copying styles is a rather involved approach for getting the width of the text Tip of the Day You can use <canvas> to get the width of text, and it requires no DOM manipulation. var cs = getComputedStyle(email); var context = document.createElement("canvas").getContext("2d"); var spacing = parseFloat(cs.letterSpacing) || 0; context.font = cs.font || [cs.fontStyle, cs.fontVariant, cs.fontWeight, cs.fontSize, cs.fontFamily].join(" "); function getCoords(e) { ... var metrics = context.measureText(email.value); var textWidth = metrics.width + spacing * email.selectionEnd; } For help understanding some of the trig used in the demo. Note that JavaScript math functions use radians instead of degrees. Angle between two points var dx = point2.x - point1.x; var dy = point2.y - point1.y; // Note that dy is the first parameter var angle = Math.atan2(dy, dx); Rotate around point var x = centerX + Math.cos(angle) * radius; var y = centerY + Math.sin(angle) * radius; Distance between two points var dx = point2.x - point1.x; var dy = point2.y - point1.y; var distance = Math.sqrt(dx * dx + dy * dy); Convert radians to degrees and degrees to radians var RAD = Math.PI / 180; var DEG = 180 / Math.PI; var radians = 180 * RAD; // => 3.14 var degrees = 0.7854 * DEG; // => 45 Tween with radians // Just add a _rad string on the end TweenLite.to(foo, 1, { rotation: Math.PI + "_rad" });

You've got a typo: //switch this else if(menuOpen = true) // to this else if(menuOpen === true) Happy tweening.

Wouldn't that just be like one of the standard Power eases like Power1.easeInOut, Power2.easeInOut, Power3.easeInOut, or Power4.easeInOut? Don't forget, when you select one of those in the Ease Visualizer, there's a drop-down for the ease type right above the "RUN" button. Select "easeInOut" there. Is that what you're looking for? Of course there's also CustomEase which lets you build whatever curve you want (literally, unlimited control points and anchors).

That is creating some serious issues. You're not saving a reference to anything, so you're creating new event listeners and animations that run independently of each other every time you call that function. What goes on inside a function does not stop when the animation is done. These will continue to run unless you explicitly remove them. TweenLite.ticker.addEventListener("tick", drawPoly); window.addEventListener("resize", function() { TweenMax.set(svg, { width: target.clientWidth, height: target.clientHeight }); rect = svg[0].getBoundingClientRect(); }); You should read up on how closures work. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures And objects too. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects When you try to close the modal, you're creating a timeline and then immediately calling reverse on it. That won't do anything because the start of an animation is also the end of animation when reversed. You would need to do something like setting the progress of the animation to 1, and then call reverse. So what's happening is the onReverseComplete callback gets called immediately, removing your modal. How to animate points on a polyline/polygon You can't change an attribute. Setting an attribute initializes that property. So every time you set the points attribute, you're creating a brand new set of points. That's slow, and requires extra work. Here's how you can access and work with those points. When you change/animate a point, it will automatically update the element! var svg = document.querySelector("#svg"); var polygon = document.querySelector("#polygon"); // Create and add points to the polygon var point1 = polygon.points.appendItem(svg.createSVGPoint()); var point2 = polygon.points.appendItem(svg.createSVGPoint()); var point3 = polygon.points.appendItem(svg.createSVGPoint()); // Now animate it. That's it! var tl = new TimelineMax() .to(point1, 1, { x: 50, y: 10 }, 0) .to(point2, 1, { x: 90, y: 90 }, 0) .to(point3, 1, { x: 10, y: 90 }, 0) How to make paths, polylines and polygons responsive @Sahil was on the right track. This will make the SVG fill it's bounds, and will allow you to use values between 0 and 100. <svg id="svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> <polygon id="polygon" /> </svg>

Here is how you can apply that effect to multiple elements. I didn't go through your code because you were mixing jQuery animate and their hide/show etc animations with GSAP which over complicates things. This demo will give you idea how to approach it. Play and reverse is simple and you don't have to mess with classes. First create a paused timeline. Now first you have to check if timeline is reversed by using ternary operator. If Timeline is reversed then it will play timeline forward but our timeline is not played yet. So you can set timelines's reversed property to true and timeline will play on first click and reverse on second click. Does that help?

Hi @emilychews I think my question would be why you want to mix GSAP with CSS transitions? It's generally not a good idea as you can create a fight for control of the element. Since you're loading GSAP anyway, couldn't you just use it to animate your hover state? Happy tweening.

Agreed. I've seen several questions from you with just pasted code. Sometimes a problem is easy to spot with a quick glance at code, but as @Sahil mentioned, it's easier for us to troubleshoot with a demo. You'll also get better answers if you provide live code that we can test and edit. If you haven't made one yet, check out this post: Thanks for understanding and happy tweening.

What? Aw, that spoiled my day. Come on, @Sahil, we love having you around here! Don't let @PointC intimidate you He's only pretending to be insecure. This place just wouldn't be the same without @PointC, @Sahil, @OSUblake, @Jonathan, @Dipscom, @Carl, @Rodrigo, @mikel, etc. And now we've got some others coming on strong as well, like @Acccent, @Visual-Q, @Shaun Gorneau and more. Love it! Battle for that leader board, guys.

Have you tried console logging TweenLite? I haven't really seen any ruby on rails question here so can't suggest anything. But console logging the TweenLite will give you idea if it is being included in your project or not. If it does get logged then problem will be with your code and if not then problem will be with how you are including GSAP files in your app. As I said that we have never received any ruby on rails question so chances are slim that someone might be able to help you. Maybe give it a try on ruby on rails forum as well?

Thank you for providing the codepen. I asked for it is so we have context of what your trying to get to work outside of codepen. Since we can not see your files for Ruby on Rails. Do you see any CSS in your Ruby Rails that might be causing a conflict? And i notice your only trying to tween 0.1 of a second. That amount of duration wont be noticeable since its 100th of a second. Were you trying to just set it to transparent with no transition animation? (if so in GSAP a zero based tween you can use the set() method) One thing I do notice that the codepen is using different versions of TweenLite, TimelineLite, and CSSPlugin TweenLite - 1.20.3 TimelineLite - 1.20.2 CSSPlugin - 1.20.4 That might cause an issue when running outside of codepen. They should be the same version number for each of the GSAP scripts (TweenLite, TimelineLite, and CSSPlugin), try changing them so they are using the same version number. Since you see no error in the console, try going to the browser debugger in Chrome and turn on pause on exceptions. That should throw any errors in the console, that are silently failing. This way we can try and rule out errors in the console. https://developers.google.com/web/updates/2015/05/automatically-pause-on-any-exception Thanks!

@Sahil - two things. 1. Congratulations on achieving 1,000 likes and Superhero status. You're a terrific addition to the Moderating team. Well done! 2. I'm gonna need you to slow down a bit. At this pace you're gonna catch up to me and I'm just too insecure to handle that.

I'm using the same timeline. Here's a reduced look at my code. I'm returning an object with some properties and methods on it. var modal = createModal(); function createModal() { var animation = new TimelineMax() var modal = { animation: animation, open: open, close: close }; function open() { animation.play(); } function close() { animation.reverse(); } return modal; } So I can control the timeline from outside the createModal function. // calls the open function on the modal object, which calls animation.play() modal.open() // the same goes for close, but it calls animation.reverse() modal.close()

Yep. The trick is setting preserveAspectRatio="none" on the SVG. If the points are already set on the attribute, you can still use them. for (var i = 0; i < polygon.points.numberOfItems; i++) { var point = polygon.points.getItem(i); TweenMax.to(point, 1, { x: Math.random() * 100, y: Math.random() * 100 }); } It depends on the element and attribute, but you can usually access values like this. Just console.dir(element) an element, and explore some of the properties. var circle = document.querySelector("circle"); circle.cx.baseVal.value = 100; circle.cy.baseVal.value = 200; circle.r.baseVal.value = 50; var svg = document.querySelector("svg"); var viewBox = svg.viewBox.baseVal; viewBox.x = 100; viewBox.y = 200; viewBox.width = 1000; viewBox.height = 500; I use the viewBox object to drive all the dragging and zooming in this demo. Thanks. I've done that in other posts, so it's not totally new, but I'm going to start doing it more.

@OSUblake I love these detailed replies from you. If you ever want to compile stuff like this into a guest blog post on greensock.com, we'd be happy to do that. Or a recurring "Blake's tip of the day" Nice work as usual.

thanks for the demos. Unfortunately we can't spend a lot of time trying to figure out how you should construct your project and do general consulting work for you. It could take an hour or two just to dissect both examples and get an idea of how it might work. As for the performance, I saw that things got considerably better after clearing the css for the mask .mask-slide { } Again, I can't dig through 80+ lines of un-commented code with no console logs and do a deep dive into what's happening based on timers and various conditions at a certain time. Like you mentioned though, I highly suspect that if you are doing many opacity / alpha changes on large images simultaneously that is probably causing the biggest rendering struggle (un-related to GSAP). If you have performance problems with any of the transitions you should create a reduced demo that just has a single transition between 2 images. Nothing dynamic. Just the most basic example of the GSAP code that you need help with. If you find that the timing isn't accurate, look into replacing your setInterval() with delayedCall(). delayedCall() runs in perfect unison with all GSAP animations. https://greensock.com/docs/TweenLite/static.delayedCall

In following demo you can see demo by @OSUblake, it is really great demo and perfect starting point for you. You can use that demo to animate those texts. Animating those slides is easiest part, you just have to figure out index of current slide and animate slides using xPercent. Or to save complexity you can slide all slides from one direction only just like those texts.

Thank you @Sahil for pointing that out. I did try staggerTo but it couldn't work. @PointC your second approach is super clear, thanks for that!

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.

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

Hi @athuillier Welcome to the forum. In addition to @Sahil's excellent advice, I'd add that if you do want to loop through a group, it's easy to do so. Here's a basic example: Using that same technique, you could add all those individual animations to a master timeline for complete control. Happy tweening.

You were using really old version of TweenMax which wouldn't work even though you used correct code. You can use a staggerTo tween to add delay to subsequent tweens and to use random values on each tween you can pass a function for each property. So GSAP will loop through and get random values for each tween. BTW cool demo.

Oh @DD77... You really make it hard for us to help you. I know it sounds wingy but you need to make a bit more of an effort to make it easy for people to look at your code. You need to make as simple as you can otherwise you won't get attention. We only have so much time to spend around here that we cannot afford an hour or two going over one person's code if there is four or five others with questions and a much smaller code base to look at. Also, by making it as small as an example you can, you will probably end up seeing ways of simplifying your own code. You didn't even change the title of the pen... One does not know which pen one is looking without refering to the thread. There is so much code in both of your examples that I think your issue is that you have tangled yourself and have too many side-effects in your functions that are causing trouble. Your preloader, for example: - You have a tween inside 'loadProgress' targeting 'progressTl' - But up to that point in your code there is no object declared with a name of 'progressTl'. - Then, afterwards, you do define a 'progressTl' with an onUpdate and an onComplete calls. Why are you returning a timeline on your onComplete? It's not doing anything that return statement. And on your onUpdate you are calling a progressUpdate but, in there you are calculating a 'loadingProgress' variable that you already had calculated in your previous loadProgress function. I have no familiarity with jQuery so, I don't know what the .progress() bit is doing but I guess it is calling the given function a set number of times. Is it calling it everytime the loading of the image updated? And all of that is without even looking at your slider example...

@harp It will be nice if you make habit of posting codepen demos where we can check working code. It is too hard and time consuming to debug anything just by reading code.

@OSUblake @Sahil Thanks for all the help!! All works well, play AND reverse, so far no glitches. Of course the best part is that I learned quite a bit about gsap and javascript in general while tinkering with this code. Super heroes! Cheers

@GreenSock Ya but I am trying to control myself. Don't worry I hope I have made your day again.

He's not gonna reduce his forum time. He's just playing Moderator mind games to lull us into a false sense of security. Right now he's planning to overtake @Dipscom and then he's only gotta get through @Diaco and @Rodrigo to take me down.

Thanks Craig. Ya I am trying spend less time on forum actually, can't decide yet if I should reduce down to an hour or take break for few weeks. But you should not take any breaks because my eyes are on leaderboard next two spots are target for sure. More people might try to catch up after my next post.

Exactamundo. Just include CustomEase in your JS.

@OSUblake Thank you for the elaborate and enlightening answer! Seems like this is going to be a rewrite All for the better. About moving the timeline to a function, you wrote the following: I was afraid for that actually, but I didn't know the details about it, nor how to go about it differently. Could you tell me how exactly it is different in the CodePen you have shared? (Please excuse me if it's obvious) I will try this out tonight in any case, and report back. Thanks again!!

@bparticleIt's not bad, it complicates things. And trust me, if you stick with GSAP then you will never feel the need to use jQuery animations. I was like you but I have simply forgotten jQuery, life is easier with less jQuery. But it is personal choice, if you prefer you can continue using jQuery animations with GSAP. And wait, @OSUblake is responding so he will have some better approach. BTW you are using svg element as modal then can't you reuse same element throughout the page? Just give it position and dimension of whatever element you are animating?

You can give Barba.js a try that works with simple HTML templates if you don't want to learn new framework, though at some point you will have to. Check the following thread that discusses Barba.js.

Ouch, interpolation is the only area where I didn't dare to work Thanks a lot! Still staring at your interpolation magic! Massi

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.

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.

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.

Yeah, using canvas requires a little bit of setup. Another option would be scaling an outer element, and apply a counter scale to an image. It would at least perform better than animating width and height. One problem is that scaling in Chrome can be rather difficult due to bugs in will-change CSS property. This is all done using scaling. That's based on some stuff from this thread.

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.

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 @smallio Are you trying to do that with SVG or canvas? Either way, the path needs to be closed. This demo is setup for SVG, but it show how to make a smooth, closed path with a Catmull-Rom curve.

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 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 }); });

The best JavaScript programmers I know come from a art/design background. In fact, GSAP was a written by a graphic designer, so there's no harm in learning the language. You'll be able to do a lot more with your animations. That said, this is still a complicated question. I guess the biggest question is, for how long should the animation be stopped from playing on a page? A session? A day? A week? Rest of eternity? Regardless, I think the answer will come from the sessionStorage or localStorage urls provided. You can store and retrieve a variable in the browser, so you could store a variable like if the animation has played, or maybe the date it was last played on. The syntax is very easy. var hasPlayed = sessionStorage.getItem("hasMyAnimationPlayed"); if (!hasPlayed) { TweenMax.to(foo, 1, { x: 100, onComplete: function() { sessionStorage.setItem("hasMyAnimationPlayed", true); } }); }

Thanks Dipscom. Looks like a very useful article. I don't know how scroll cancelling is handled by gsap. In fact I don't much about scroll cancelling at all. To fix the problem for my instance I just used some found code that I modified into enable and disable functions. I run the disable function just before GSAP scrollTo and enable onComplete or in a timeout the length of the scrollTo tween. Seems to work I still have to do complete browser testing to check reliability. function disableMouseWheel(){ //Blocking the Mouse Wheel document.onmousewheel = function(){ stopWheel(); } /* IE7, IE8 */ if(document.addEventListener){ /* Chrome, Safari, Firefox */ document.addEventListener('DOMMouseScroll', stopWheel, false); } } //Re-enabling the Wheel function enableMouseWheel(){ document.onmousewheel = null; /* IE7, IE8 */ if(document.addEventListener){ /* Chrome, Safari, Firefox */ document.removeEventListener('DOMMouseScroll', stopWheel, false); } } function stopWheel(e){ if(!e){ e = window.event; } /* IE7, IE8, Chrome, Safari */ if(e.preventDefault) { e.preventDefault(); } /* Chrome, Safari, Firefox */ e.returnValue = false; /* IE7, IE8 */ }

Thanks Jack - Yes Power4.easeInOut is pretty near on close inspection. Almost identical in fact. I have been using that, but I was just looking for a straighter middle part (without constructing a custom version):

@OSUblake but that won't work for rectangular shapes right? It works. I was going to do something similar with 100x100 viewbox and looked for if viewbox can be stretched etc but didn't find anything so decided to not use viewbox. I didn't know polygon points can be animated like that. Thanks. Any similar trick for paths to avoid setAttribute? BTW have you decided to start answering in blog format? It does look great and more impactful.

Hey @DD77, I am sure we can get to the bottom of this if we break your issue into smaller steps. Let's start by just having a GSAP-powered image loader. Can you set a pen that only loads the image with the animated loading bar?

Blake, this is so cool! Thank you. I'm trying to whip something up in canvas now. I should have thought of it before, it's just so much more work than a simple line of TweenMax Luckily, your Codepen is there to help me along... thanks again!

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)