Leaderboard

Hello @hemmoleg and Welcome to the GreenSock Forum! Seems like your custom JS code is running before the DOM and window is loaded, meaning your stylesheet is not loading before the GSAP getRule() runs. You can do a number of things: Try placing your script tags right before the </body> ending tag. So the DOM is almost compiled by the browser. Wrap your custom JS code with a DOM ready and or a window load event check to make sure that the DOM is fully ready and the window event is fully loaded. // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until external stylesheets, links, images, and other external assets are loaded in the window window.addEventListener("load", function(){ // custom GSAP code goes here }, false); }); Make sure that the selector in your external stylesheet file has the same CSS rule that you are targeting in your getRule() code. i.e. "#t1:after" Let us know if any of those help. If your still having an issue please create a limited codepen demo example so we can see your code in context. Happy Tweening

Very nice site there. It looks like it is using a Single Page Application (SPA) approach Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript. For the traditional ASP.NET developer, it can be difficult to make the leap. Luckily, there are many open source JavaScript frameworks that make it easier to create SPAs. https://msdn.microsoft.com/en-us/magazine/dn463786.aspx For some demos using GSAP in an SPA check out this wonderful thread from @OSUblake

That made me chuckle a bit because I feel your pain @smallio. I've been using GSAP and JS for a few years now and I'm much better than I used to be, but I'm also still in awe of @OSUblake. At least I can now read his alien language. I have more experience in After Effects just like you so I know exactly how you're feeling some days. You're on the right track though. Just try to learn a little bit each day and you'll start to feel more confident and knowledgeable as time goes by. I promise you'll start to have more and more 'ah-ha' moments and things will really start clicking. If you've never read my 1 year anniversary post, it may give you some encouragement. Good luck and happy tweening.

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

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

Hi @Woohoo That falls outside the scope of GSAP, but it sounds like you're looking for info about HTML5 local storage. Here are some links that may help. https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Happy tweening.

There seem to be a lot of problems with that codepen demo. Open the console and you'll see there are a bunch of JS-related problems (not related to GSAP). There are almost 200 lines of code (not including CSS and HTML) - are you hoping someone will diagnose all the problems and provide solutions? We really try to keep these forums focused on GSAP-specific questions. The more isolated/reduced, the better. You'll have the best chance of getting an answer if you try to strip down your demo into the smallest pieces possible and then ask a GSAP-specific question. I really wish we had more time to provide free general consulting services, but unfortunately we just don't have the bandwidth. Well, perhaps someone else has the time and interest (I hope they do). Happy tweening!

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.

Thanks OSUBlake! Much appreciation.

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

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.

Damn, that's crazy. I was actually looking to adapt your waves plugin to work on svg circles. I love the pen you just posted, but I feel I'm not quite at the level yet to be able to then adapt that to a circle *googles catmull rom* I'm a designer in my first year of learning JS which gets frustrating because I can do this easily in after effects, yet when I look at the code you've written on this example I feel like a lost child. I'm unworthy of your logic atm senpai, sorry Can that first waves plugin adapt to circles? If not I guess i can just make it via after effects then export as json and whack it in a timeline. I guess I just like trying to do things the hard way to learn faster, aha

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.

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

@GreenSock Yesssss, this is just what i'm going for! Buttery smooth - I love it.

That is a really odd Safari rendering bug (unrelated to GSAP). One way to get around it is to just slightly animate one of the coordinates of the points in the line which would be unnoticeable to users, but it forces the browser to re-render things, like this: In that demo, I just added: attr:{x2:"+=0.01"} Seems to resolve things in Safari for me. But it may be a non-issue if you just use that regular <div> solution I offered. I'm not saying that's "better" at all - just different. Happy tweening!

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.

I see - each of the <li> elements is its own trigger on the way out. That's the part I was misunderstanding on the first demo. It looks like you have it working now, but if you have more questions or problems when you add new elements, please post an updated demo and we'll do our best to help. Happy tweening.

Hello, I love GSAP! Thank you so much for creating it. I'm running into a problem that I suspect has a simple answer but that I'm just missing. In the Codepen (https://codepen.io/dbcongravity/pen/MQXXjm?editors=0010) you'll see I have 4 messages in a chat. I want them to appear one after another, but I need to set the positions/scales/etc. for them to animate from. If I do this in the child timeline, then the sets are only called once each child timeline starts, so on the master timeline, all messages are visible at the beginning and then each one disappears to then reappear. I'd like to run the set commands on each child timeline at the start of the master timeline, so that every message is hidden right at the beginning of the master timeline. Thanks in advance!

I don't know why I didn't think of that. ??‍♂️ Thanks!

You can explicitly hide all those elements before timeline starts, or call another loop before adding those child timelines that will hide them. There is nothing GSAP can do about it, you can use call method on master timeline right before adding these child timelines to hide elements but either way it is same thing I am suggesting. Just comes down to how you would prefer to do it. EDIT: @David Barker Sorry for the confusion, you will need to hide those elements using CSS by setting their scale to 0. That will give you desired behavior.

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.

I might be misunderstanding something here about your goal, but couldn't you simply do this:? tree.set("#map-container", {className:"+=show-map"}); Remember, CSSPlugin allows you to animate between classes, and you can use "+="/"-=" prefixes to do relative values.