Leaderboard

Hi @cgorton How are you making out? I didn't recognize you without a avatar. Learning the basics of canvas isn't that hard. Instead of declaring what you want the browser to display with CSS and markup, you write instructions to draw stuff. It works a lot like Logo programming (turtle graphics), which is a programming language for children. You tell the turtle where to go with very simple instructions/commands. With canvas, the context is the turtle, and that's the only thing you can really interface with. https://turtleacademy.com/lessons/en Having only 1 object to work with can be quite limiting, so the solution it to create your objects to work on. If you had some CSS and an SVG... <svg> <style> #rect { fill: #2196F3; fill-opacity: 0.5; stroke: #111; stroke-width: 2; } </style> <rect id="rect" x="20" y="100" width="200" height="150" /> </svg> ... it could be represented as a simple object like this. var myRect = { x: 20, y: 100, width: 200, height: 150, fill: "#2196F3", fillOpacity: 0.5, stroke: "#111", strokeWidth: 2 }; Now you can tween that object as if it were an a real element. If it's a number, GSAP can animate it. The properties you use and how you name them is entirely up to you. The context has no concept of your objects, so do what makes the most sense. You can also make optimizations by reusing objects. Notice how the line has 3 different strokes applied to it. With SVG, that would require 3 different elements. The only way to end a path is to call context.beginPath(), so you can keep applying different styles to the same path. If you haven't already, check out these threads. CSS tricks. It's a little advanced, but it shows some nice rendering techniques. https://css-tricks.com/using-gsap-animate-game-ui-canvas/ I would also recommend going through every property and method on MDN. It's very helpful, and most of the pages have demos. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D MDN also has some pretty good tutorials. Some of the stuff is dated, but it's fine if you're just getting started. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

[Sorry about the late reply] For the record, the newer behavior is indeed the correct one, as @Sahil mentioned. One of the main challenges here is that I don't believe that SVG transforms even recognize %-based translation values (at least in the transform attribute). In the spec, I only see px-based units (well, more like a viewport unit because SVGs scale). Some browsers may go beyond the spec and support %-based values anyway, but GSAP has to be very concerned about compatibility and consistent behavior across browsers, so we're translating percentage-based values into px-based ones (and baking them into the matrix). Happy tweening!

Hi @kreativzirkel, I'm not sure if you expect something like this: The scaling factor, the size of the big box is not calculated correctly. Best regards Mikel Grüße nach Düsseldorf.

Is it just because your first and last frames are the same, so they appear to be delaying just because 2 frames are duplicated? What if you change backgroundPosition to "-4202px 0" and the SteppedEase to 14 steps instead of 15? Better?

I think I've fought most every SVG mask battle imaginable and I can probably help, but that is a massive amount of code to sort through. As @Carl mentioned, a stripped down version with one masked group would help us troubleshoot. You may also want to take a look at my post about Adobe Illustrator exports here: It will make things much easier for you. Happy tweening.

Hi @yulia, Here is one possible solution - not very DRY: However, the scroll function should be suspended while the auto function is running! Kind regards Mikel

Oh I noticed it yesterday, but I was out for most of the day. It's hard making a demo on a phone. ?

@mikel Thank you!

Well you will certainly get better performance compared to DOM elements because you would be writing minimal code that draws directly and skips any DOM API calls. If your game has a lot of effects or particles, PIXI JS might give you better performance because WebGL takes advantage of hardware accelaration. Otherwise canvas is your best option. If you really want to squeeze out performance then you can avoid rendering text on each frame and render text to offscreen canvas once to reuse it as image for far better performance because rendering text on canvas is expensive. In fact, you can do that for any complex shapes to avoid redrawing them and use sprites wherever possible. Check out following article, https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas And our discussion about canvas performance,

Hi @cgorton After chatting with you via Twitter it's good to see you posting in the forum. I tweeted that book at you 10 days ago and you still haven't ordered it? @Sahil gave you some good info there. He's a master of the canvas. Via Twitter I recall Jack mentioning Pixi.js to you too. If that's of interest to you, here's a quick example of creating some rectangles with Pixi and pushing them into an array. You can then stagger all the properties you like. Pixi is fairly easy to use and GreenSock has a terrific Pixi plugin: https://greensock.com/?product-plugin=js-pixiplugin Lots of cool stuff happening with Pixi right now with the release of version 5. http://www.pixijs.com/ Hopefully that gives you some ideas. Happy tweening.

Not sure if you need help with GSAP or if this question is more about creating a responsive layout with 3D depth. Perhaps this demo and thread can help in addition a google search for GreenSock Lerp Your Way to Glory will yield some good results. Pay particular attention to any posts from @OSUblake and videos from Keith Peters / Coding Math

GSAP works with objects, so in order to animate multiple square you need to use objects. But better option would be to use prototype so you can have more flexibility, each object will have it's own draw method and other methods as well if you need. I am passing context to draw method so just in case you want to reuse your code or it gets too complex, you can easily separate your code to organize it better or create your own simple library to draw common shapes. Once you do that you can animate each square independently just like you animate DOM elements. Also, please avoid posting private pens as we can't fork them. In case you haven't already, I would recommend getting this book: https://www.apress.com/in/book/9781430236658

thanks for the demo. Once you start pushing a few hundred divs around the browser is probably going to have some trouble. Seems dangerous to let a user create 300 new particles on mouseover (or maybe that was just for the demo). I thought I noticed the effect slightly faster without the rotation and scale applied, but that advantage appeared to go away once 900 or so were animating. For something like this, you can't beat canvas and Blake's snow demo is the perfect example. http://codepen.io/osublake/full/BjNZYP/ That's 12,000 particles but I'm sure it can handle more. also:

Rodrigo, nice to battle with you again my friend! Really nice job. Scary how similar our approaches were. ochalmers, Yeah, separate divs are the key. Your latest is perfectly fine. Absolutely nothing wrong with it. I took another go at it, just in case you someday want to animate 50 lines of text or something. Using the power of jQuery to loop through the Array of messages and spit out new divs and then chuck a bunch of tweens into a timeline. var fullText = $("#splitThis"), index = 0; messages = ["Rodrigo", "and ochalmers", "are", "swell guys!"], numMessages = messages.length; var main = new TimelineMax({repeat:-1, yoyo:true}); function createTextDivs(){ for(var i = 0; i < numMessages; i++){ var textDiv = $("<div/>", {class:"headline"}).text(messages[i]).appendTo($("#messages")) var textSplit = new SplitText(textDiv, {type:"chars, words"}) main.staggerFrom(textSplit.chars, 0.3, {autoAlpha:0, y: -20}, 0.1) .staggerTo(textSplit.chars, 0.3, {autoAlpha:0, y: 20}, 0.05) } } createTextDivs(); http://codepen.io/GreenSock/pen/vOMdJW?editors=001 its set to repeat just show that it can be reversed and controlled in all the ways we love

Thanks for the demo. I couldn't figure out why the huge blockletters timeline was there so I removed it and simplified things quite a bit. The tricky part of this is that SplitText and TextPlugin can't really work in conjunction the way you have planned because SplitText literally sucks all the content out of a div and breaks it apart into new divs - replacing whatever was there before. The problem with your approach in simple terms is that you are using the variable chars to refer to radically different elements throughout the life of your timeline. When your timeline is first created, chars means one things... but as it plays you are attempting to change those values by using TextPlugin and SplitText. Trust me, its not the easiest thing wrap your head around. Again the basic idea is that SplitText radically modifies the DOM by creating new elements and replacing old ones. I'm assuming you want to have an end result like this: http://codepen.io/GreenSock/pen/eNoyYr?editors=001 (edit was originally wrong) The key here is that there is a function that generates a timeline based on the existence of some text in an Array. Since each animation is in essence breaking apart text in the same DOM node it is imperative that the second sequence isn't created until AFTER the first sequence is played. So the timeline-creating function creates timelines that check to see what the next timeline should be when they are done playing and then the next timeline gets created and played. You will notice this works pretty well, however there are some serious drawbacks, most importantly, you can't really control this sequence, especially you can not reverse it or restart it. If you want one timeline that you can play, pause, reverse, restart you will have to abandon the notion of replacing the text in a single DOM node for each sequence. It would be much better in my opinion to create new container divs for each sentence of text that you need to animate. I might be able to find or produce a demo that does that a little later today (or if someone else has one, cool).