Leaderboard

Here's a super simple countdown. Happy tweening.

Hey mkurdziel, I'm not super experienced with Webpack myself but I wonder if you have gone over the guide in the Docs, specifically the bit that talks about "Tree shaking"? It is possible that when you're bundling up Webpack is throwing it away thinking it is not being used.

hmm, this smells of something @chrisgannon would conjure. This comes close to your description but I think it misses the mark with the rotation: I'd suggest cruising through his pens: https://codepen.io/chrisgannon/pens/public/ Hit next about 100 times. Even if you don't find it (if its not his), you'll be amazed at what you see.

Nice one Sahil, but I am now on my way. Can't go over those in the 15 minutes it takes me to drive to the venue. But I will check all of those out and possibly show some. Time to break a leg!

That's actually a bit of an illusion due to the fact that there are white space characters at the start and end of the strings. I just updated the codepen-only version of ScrambleTextPlugin so that it trims those by default (you can set trim:false if you DON'T want that behavior) - please clear your cache and give that a shot. Better?

I'm not 100% sure what you're asking, but I'm guessing it's about immediateRender. Please try this on your last tween. .fromTo('.menu-1', 1, {drawSVG: "0%"}, {drawSVG: "100%", immediateRender:false}); Does that help? Happy tweening.

Some simple transitions that people find hard to do, you can live code these https://greensock.com/forums/topic/18904-transformorigin-help/?tab=comments#comment-87689 https://greensock.com/forums/topic/17978-try-to-do-block-reveal-with-diagonal/?do=findComment&comment=82156 This one is simple but also has a bit more advanced demo by Blake https://greensock.com/forums/topic/18880-page-transition-with-barbajs/ Simple Add some simple morphSVG, drawSVG and split text effects, https://codepen.io/PointC/pen/aawwgx?editors=0010 https://codepen.io/PointC/pen/oPELMe Intermediate Motion blur using SVG https://codepen.io/osublake/pen/WZqBjV?editors=1010 Animate along the path, a bit pacman touch. You can also include your Mario https://codepen.io/osublake/pen/vWGGGv?editors=1010 FLIP using GSAP to animate flexbox https://codepen.io/osublake/pen/vWGGGv?editors=1010 Drag along the path https://codepen.io/osublake/pen/YYemRa Circlular clip path https://codepen.io/osublake/pen/QKEjwv?editors=1010 Handwriting hamburger https://codepen.io/PointC/pen/zLbxzO Movie rating slider https://codepen.io/PointC/pen/devBRB?editors=1010 Gooey Dial https://codepen.io/PointC/pen/oqeJbo Polygon snapping https://codepen.io/osublake/full/QdbQjN SVG Dynamic Text https://codepen.io/PointC/pen/jpEdBd?editors=0010 Advanced https://codepen.io/PointC/pen/LmOvEQ https://codepen.io/osublake/full/RNLdpz https://codepen.io/osublake/pen/XXbLer/ https://codepen.io/osublake/pen/dMLQJr basically all of Blake's popular demos. Ran out of time.

Good solutions, guys. You can use roundProps if you want the number rounded (or @PointC's toFixed() if you prefer). Here's a super-simple one: Or you could use a SteppedEase. Lots of options

Well, I'm honored to be mentioned in the same sentence with Blake and Chris. ? @Dipscom if there's anything of interest to you in my CodePen collection, feel free to use it as you see fit. Good luck with your presentation.

That's great Carl, thank you. I will resist the urge to impersonate you. More because most of the people at the meetup know me and I wouldn't get away introducing myself as Carl Schoof... Will definitely rip half of your presentation off. Still open for further suggestions, people!

I don't think I will be able to program this to your exact specifications, but one approach is to create a function that randomly scales each word. When that animation is done, it uses an onComplete callback to call that function again and create a new random animation:

Although I have no experience doing that myself, the starting point would be getting yourself a game engine and get familiar with it. Phaser is well known and widely used. Get started with that, build smaller versions of what you want to achiever, sections of your bigger project. Then, start putting those different pieces together. Somewhere along that line, sprinkle some GSAP magice and you'll be golden!

I'm looking forward to a post-presentation report about how many attendees heads exploded after being exposed to Blake's wizardry. ?

Here's the challenge: when GSAP is asked to interpolate between two strings, it can walk through that string and pick out all the numeric values and match them up for interpolation, BUT what about more advanced cases where there are special ways those values need to be interpreted? For example, some strings may have colors like "red" or "#F00" or "#FF0000" or "rgb(255,0,0)" or hsl() values. Those are no longer plain strings - the colors must be converted into rgba() values in order to cleanly interpolate them. CSSPlugin adds that filter automatically. Or in this case of morphing, the 2 strings must be converted to cubic beziers and then compared and the number of points matched so that interpolation is clean. THAT is what stringFilter is for. You can define it on a per-tween basis (as I did in my demo above), or you can set TweenLite.defaultStringFilter. A filter is basically a function that accepts an array as the first parameter (sometimes filters can accept more parameters too, but they all at least accept an array). The first element of the array is the "start" value, and the 2nd element is the "end" value. The filter's job is to look at those and, if necessary, CHANGE those values in the array. So feed an array into MorphSVGPlugin.pathFilter() and they'll be changed into cubic beziers that have matching numbers of points. It's not documented because it was intended as more of an internal mechanism. But perhaps soon we should go ahead and make it more public for cases like this

You can have either one or another. What you can do though is check referrer on your server side and decide which class to add, if it is your site then don't show loader if it is external url then show loader. If you don't want to mess with server-side then look into barba js http://barbajs.org/

Not sure what your question is exactly. One of the reasons your animations are jittery can be because your paths are too complex and/or long. You can simplify your paths using https://jakearchibald.github.io/svgomg/ Another reason would be, you are running too many animations at once and asking browser to do too much work. Take a look at following article it has few performance optimization tips for canvas. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas As for your question about how to setup your animations, the demo you posted has a example using TimelineMax so I am not sure which part is confusing you. For parallax effect you can't use TimelineMax, here are simple examples of how you can do it in HTML. You can apply same logic for canvas,

Glad to hear it's working, but I'm a tad confused because "gsap" actually points to TweenMax (long story), so the only things exported from there are tools that are inside TweenMax (like CSSPlugin, TweenLite, TweenMax, TimelineLite, TimelineMax, all the eases, etc.) but TextPlugin is NOT included in TweenMax. So you can either import things from "gsap/all" or you can import TextPlugin directly (and separately) like: import TextPlugin from "gsap/TextPlugin";

Yeah, it can take a bit of time to go through everything, but once it 'clicks' it becomes second nature and lots of fun. Here's some more info about immediateRender: https://greensock.com/immediateRender Happy tweening.

Thank you, I spent probably over 10 hours to read and learn the documentation and around 6 hrs to tweening but still there is lot of things I am not familiar or I do not know at all (just like this). Absolutely great platform but takes lots of time to master it.

@PointC is there a way for you to transfer ownership of a certain Star Wars pen?

Hi @hallibus. If I understand correctly, you're looking for setInterval and clearInterval. Hope this helps!

I usually find more than enough pillaging the CodePen profiles of Blake, Craig and Chris Gannon. Here is a presentation I did a while ago: http://slides.com/greensock/pch#/ Feel free to rip anything you want out of it. Awesome to hear that you are doing this presentation. I'm sure you'll do great.

Sorry, but we just don't have the resources to guide you one-on-one through building these types of things. However, as a fun little challenge, I'd encourage you to start here: Step 1: watch the Getting Started video here: https://greensock.com/get-started-js Step 2: Create an html page that contains an SVG that has a single <circle> in it Step 3: Try to move the <circle> to the right using TweenMax The CodePen demo below loads up every GSAP tool (including the bonus plugins) so you can just drop in your SVG code in the HTML tab and write some JavaScript in the JS tab. After clicking "Run Pen" you can click the "Edit on CodePen" button. If you get stuck on any of the above, let us know, we'll be happy to help. Once you get a single circle moving you can experiment with more circles, adding mouse events, etc.

Yeah, this is all CSS and box model stuff, unrelated to GSAP. You haven't set a height on .home-below-animation, so it'll just keep expanding vertically to fit its content. You could set height:100vh but beware that "vh" units don't factor in horizontal scrollbars. To show you what's happening, I set overflow:hidden on the <body> in the below example: Also keep in mind that you cannot scroll the contents of an element past the very end. For example, if you have a 100px tall <div> that contains a 100px-tall <div> and then a 10px-tall <div> under that (totally 110px of content), you can't make that last 10px <div> scroll all the way up to the very top of its container. The browser will only allow it to scroll a total of 10px because that'll be the END of the content. See what I mean? Of course you can add a bunch of padding to the bottom of that element (or add another tall element) to stretch the content out so that whatever you're wanting to reach the top can actually reach the top, like if you set padding-bottom: 100vh. We really try to keep these forums focused on GSAP-specific questions, so feel free to post those. We just don't have the resources to devote to answering CSS and HTML questions. Anyway, good luck with your project!

I prefer SVGs for my little icons so I'd probably do it like this. Happy tweening.

So, later on tonight I am doing a 45 minute talk in a MeetUp I take part. The topic: GSAP Crash Course And as a great and prepared guy that I am, I am getting my stuff together now 5 hours prior to the thing. Ops. The plan is: - Short Introduction on GSAP: What is a tweening engine, what GSAP does, GSAP plugins - Live code a simple DOM tween - Live code a simple SVG tween - Live code a simple Canvas tween - Live code a simple timeline - Build a shirne to the CODEGOD (Scratch this one, not enough time in a 45 minute talk) Then, I would like to show a few practical day-to-day example and that where YOU come in. Can I have some suggestions of things I can either steal or setup? Suggestions of simple things Suggestions of medium/advanced things Suggestions of which of @OSUblake's pens to show to make people's head hurt.

Hello again. For my exact situation, setting the height of .home-below-animation to 100vh did the trick. As suggested, the area that is supposed to scroll must be smaller than the area of its contents to scroll. While this seems simple, it took a second to figure out. When the window scrolls it is only so high and the contents are larger. That appears to be what I was missing. Anyway, thanks again!

Wait, what? What is this "stringFilter" ??? What is this wizardry? ? There is a never ending bundle of surprises in the GSAP toolbox.

Hey, Yes thanks. A little bit to go before production but this is a great starting point thanks again for the info. Once done I will post the results.

This was it @Carl! Exactly! Thanks a bunch. Thank you for your quick response, and great help. And @chrisgannon, stop making me feel like a complete amateur!

If you're asking about TimelineMax vs. TweenMax, it makes virtually no difference performance-wise. Think of TimelineMax as an organizational tool and/or a way to control a group of tweens as a whole. It can greatly simplify workflow too in certain situations, like when you're trying to build a complex sequence. See https://css-tricks.com/writing-smarter-animation-code/ Here's a fork of your demo that cleans things up a bit and uses a little-known "stringFilter" property that basically controls how two strings are compared and then tweened. In this case, it taps into MorphSVGPlugin's special capabilities to convert the shapes into ones that have a matching number of points so that they can be interpolated cleanly. Is that what you're looking for?

Hm, you said that if you use the modified ScrambleTextPlugin.js in your project, you get an error - are you trying to use the codepen-only version? Can you tell me how I can recreate this error? Do you have a codepen demo that shows the problem? I just need to be able to recreate it on my end in order to troubleshoot effectively. Help?

Thanks Dipscom! It was exactly what i was looking for! It's woking

Hi and welcome to the GreenSock forums, If I understand correctly you can make the element return to its normal size without using a Timeline or a mouseout. A single TweenMax tween can repeat and go back to where it started. I used a separate yoyoEase for the return animation. I am also using a repeatDelay so you can see where the forward animation ends and the repeat (yoyo) begins. You can remove the delay and yoyoEase if you like $(".red").mouseover(function(element){ TweenMax.to(this, 1, {scale:1.5, ease:Elastic.easeOut, yoyoEase:Power2.easeOut, repeat:1, repeatDelay:0.2}) })

As @mikel mentioned, you'll probably want two timelines as this animation is not a reverse() situation. One other option would be to create one timeline and then addPause() at the halfway point. Then resume() when the mouse leaves. Something like this should work. Happy tweening.

Hi @Carl, I assume you mean 100% pixeled virtual chicken. In real life, my Cesars salad only contains meat from free-range chickens and for breakfast eggs from happy chickens. No gene food and cloning. Best regards Mikel

@mikel in keeping with the license agreement, please be sure that GSAP is only used in the ethical cloning of 100% organic chickens.

Hi @vektor, The masters voice ... But here are many ways to Rome - and out of the coop. Here is a version with clones ... in an SVG: Vote for happy chicken ... Mikel

Hi and welcome to the GreenSock forums, Yes, the site you mentioned is using the GreenSock Animation Platform. Unfortunately it would be extremely time-consuming to try to explain how all of that works, especially not knowing just how new you are to web development. There are probably a dozen or so different things going on there, each with their own varying levels of complexity. Honestly, this is a very ambitious project for a beginner. There really aren't any shortcuts to these types of things (unless you find a tutorial or demo online that provides all the code for you). Perhaps someone around here knows of a tutorial or demo that does something similar. The only thing I thought of was @Sahil's canvas tutorial that makes a bunch of elements scale and move based on their proximity to the mouse: Regardless of how closely that resembles what you need to do, it paints a nice picture of the level of complexity. If you have any specific questions about the GreenSock Animation Platform, we'll be happy to help.

The trick here is that all those SVG child elements like <g> and <rect> have x and y of 0,0. Please see this thread here in which @OSUblake explains getBBox() and provides a helper function that takes into account transforms. Its probably a bit more than you need for this, but its a great utility to have around. I used his getBBox() function to figure out the distance between the x and y of each chicken and the box using a function-based value for each chicken in a single tween. var tl = new TimelineLite(); var rectBox = getBBox(document.getElementById("box")) tl.from(".chicken", 1, { x:function(index, element){ var chickenBox = getBBox(element, true); return rectBox.x - chickenBox.x }, y:function(index, element){ var chickenBox = getBBox(element, true); console.log(chickenBox); return rectBox.y - chickenBox.y } });

Hi @vektor, Here's an option to build a centered coop for the chickens (the chickens are fitting not perfect to the viewbox !). Relative to the wrapper you can now send the chicken in the corners: Here an example for centering info Happy tweening ... Mikel

Sahil, thanks a lot for this great answer! I will try this out on Flexbox. //Devotee007

Welcome to the forums, @connorv. This doesn't really sound like a GSAP problem (we try to keep these forums focused on GSAP-specific questions). What exactly do you want to show while the page is loading and the script is parsed? It seems like that's what you've got to decide and then code accordingly. For example, you could have a generic "Loading..." overlay initially that either changes to your normal overlay or simply goes away once the cookie situation is figured out. Or you could just position your <script> tag in your HTML flow so that the overlay is at the top (first in the flow), then immediately after that is the <script> that contains the cookie logic, then the rest of the HTML. I suspect that part of the problem is that you're waiting for the entire page to load, then running your JS, right? Anyway, hopefully that gets you moving in the right direction. Enjoy the tools. Happy tweening!

Yep, @PointC pointed to a useful thread that shows all the logic, but if you just want to use simple GSAP-specific code that, this should be a rough approximation: var fps = TweenLite.ticker.frame / TweenLite.ticker.time; Just remember that it'll usually be less than 60 because the "time" starts measuring the moment the JS loads, but there's typically a bunch of other tasks that the browser must do initially (like reading/parsing HTML, rendering the page, subloading other files, etc., etc.) so that first few seconds it's quite likely that there will be a lower FPS. And this technique measures the OVERALL performance, not the moment-by-moment performance. If you need something like that, use one of the techniques discussed in that other thread. Happy tweening!

I think this thread can help you. Happy tweening.

Well, it does immediately stop the timeline itself (and internally release it for GC), but it can't know if you've got a variable somewhere in your own code that'd keep a reference to it (meaning it can't be GC'd). It also can't really know that a completely separate (external) tween is animating that timeline's playhead. I suppose we could add more code internally to try to sense this condition, but it seems like such a rare edge case (this is the first it's ever come up in 10+ years) that's easily solved by implementing the code I mentioned above. See what I mean? So I've gotta weigh if the edge case really justifies the additional kb of the internal code. That's tough in cases like this. Glad you've got things working well, though.

oh, forgot to tell you guys. As of 1.20.0 if you add a tween to a timeline immediately after a repeating tween the new tween will go directly after the first iteration of the repeating tween. https://github.com/greensock/GreenSock-JS/commit/fb5cede26aa0a6463f2faac755d09579750c9e7a var tl = new TimelineMax(); tl.to(".red", 1, {rotation:360}) .to(".blue", 1, {rotation:360, repeat:-1}) // add next tween as soon as 1 iteration of previous animation ends .to(".green", 1, {rotation:360}); See demo below where you don't need end() and recent() for this

Yup, infinitely repeating animations definitely make it difficult to add things relative to the end of the timeline. All great suggestions so far. There are 2 methods of TimelineLite() that can be used together to bypass the need for labels, hard-coded offsets, function calls etc. in this scenario. recent() : Returns the most recently added child tween/timeline/callback regardless of its position in the timeline. endTime() : Returns the time at which the animation will finish according to the parent timeline's local time. tl.to(".red", 1, {rotation:360}) .to(".blue", 1, {rotation:360, repeat:-1}) // add next tween as soon as 1 iteration of previous animation ends .to(".green", 1, {rotation:360}, tl.recent().endTime(false)); http://codepen.io/GreenSock/pen/vLPxLq?editors=0010