Leaderboard

Hi and welcome to the GreenSock forums, To create that slice effect without Canvas or SVG people usually create a bunch of divs that use the same background image with different placement. check out this demo here: @romain.gr wrote the script for doing the slicing. full thread: and here is another by legendary forum ninja @Rodrigo I would suggest geting the animation you want it first and learning the basics of GSAP first. Then you can look into a library like Scrollmagic to trigger animations on scroll : http://scrollmagic.io/

Sounds like you're using the plugin to animate something that can't be rendered. A display object is something that can be added to the stage, like a sprite, graphics, or container. The main Pixi file includes only a handful of filters, but they have a bunch of other filters that can be downloaded separately. http://pixijs.io/pixi-filters/tools/demo/ https://github.com/pixijs/pixi-filters Just to show you how you can add and animate animate additional filters.

Hi @iammarkmulvey, I'm not sure what you want exactly. But there is a cool CodePen from @OSUblake: Happy tweening ... Mikel

Something like this? You can get position and dimension of element relative to viewport by using getBoundingClientRect method. A lot of your code can be reduced and simplified but I wasn't sure about exact effect you are looking for so I just made the change to button click. Also, you were using version 1.17.0 which is really old version of TweenMax, current version is 1.20.3.

Guys, Firstly, I was deeply impressed/grateful when Carl posted back on a Saturday! But now I see Jacks post from yesterday - can I just say here I think your commitment to an already great product is outstanding, you gentlemen are totally invested in GSAP and it allows guys like me to say "yes, we'll depend on this library". I think of you now as brothers in arms - when we launch our new site we'll be doing an article on GSAP. Ok, I'm going to grab the updated TweenMax and try it on my dev pen and see how it goes. I am still struggling with timing from the aspect of just using the timeline to control sound events. Using a simple patch for now with a setTimeout inside the sound function to allow me to pass a unique time variable to control deployment - not ideal obviously, particularly as any changes to the timeline will mean individual changes to those times which defeats the great power of the dev tools to control the tl! I've updated the pen so you can see what I'm aiming at. Again, if I'm being exceptionally dense feel free to humble me. Meanwhile, massive thumbs (socks) up for the Green Team. You rock. Buzz

I agree. Creating things dynamically certainly gives you more options and would probably be a better way to go. I just wanted to show that it was possible with MorphSVG as you mentioned it in your original question. I'm not sure you necessarily did anything wrong with your SVG. You probably just didn't quite see the morph behave the way you wanted it to. MorphSVG is an amazing plugin and not needing the same number of points is pretty incredible. That being said, there's no reason not to try and help it as much as possible. In my demo I have the same number of points on each path all cloned from the same master. If you can carefully plan your morphs while creating your artwork, you'll almost never seen undesirable behavior from the plugin. Happy tweening.

@bromel Doesn't your last thread contain multiple pens with working scrubber? Just curious if you came across any issues because scrubber in each example work fine for me.

There are just too many variables and too much code to effectively troubleshoot your live site. We really need a reduced test case in something like codepen. If you can't reproduce it there, it seems like you must have something else interfering on the live site (a different library? Some rogue code that affects the transform-origin? Not sure). I wish I had time to do custom troubleshooting on live sites like this; perhaps someone else does.

Did you have a particular GSAP-related question we could help with? Were you saying that you want us to keep the useFrames feature in 2.0.0 or were you jut asking for general suggestions for taking an Animate CC project that uses GSAP for all its animations and recording it as a movie/MP4? If you've got all your animations in a TimelineLite/Max, you could pause() it and then advance it one frame at a time manually by setting its time() in a setTimeout() loop or something. You'd simply do the math to figure out how much time each frame would be (like 60fps would be 16.67ms per frame) and increment things accordingly.

@GreenSock So I best explain - I wanted to build a player that would allow me to synchronize both audio and tween together for which @Sahil has helped and done a cracking job on it. Seeing the power and the potential that GSDevTools has. It seems like a no-brainier to use it instead, since you have incorporated mobile and responsive considerations. For me the task would be to create a method of doing this, which would be challenging, but I also suspect that there is a 'best approach method' with GSDev's Architecture of doing this in the best way and that is beyond my capabilities (in my mind) But in terms of using it, no I do understand it, it is super easy to use Has for customizing it, it is relatively straight forward (for me) below is the unofficially 'Be my Valentine' non-dev theme But on more serious note there is a lot of scope for this tool to have a production ready version, just a thought tnxs Bromel

I can't quite understand what you're saying is broken. Can you please provide the most reduced test case possible in codepen and explain what SHOULD happen (but isn't)? I scaled the window up and down in Chrome and from what I could tell, things worked fine but I'm probably just missing something obvious. Again, the simpler the better

Hi @gmgurgen Welcome to the forum. I'm not quite sure what's happening there, but I do see the behavior that you mentioned in Chrome. (I'm also seeing the odd behavior in Edge). Strangely, your CodePen demo works perfectly in all browsers. Since that is the case, there has to be something different between the demo and your live site. Have you tried stripping down the live site to the same level as the demo and adding things back until that odd behavior occurs? Just a thought. I don't really have any other answers as it's hard to debug a live site. Maybe someone else sees something that I'm missing. Happy tweening.

I was looking into this and saw the problem simply had to do with the fact that when the playhead was moved backwards past that call() spot, it would trigger it (which is what it SHOULD do in theory). However, I think the most intuitive behavior when you're rewinding or going from the very end to the very beginning would be to suppress callbacks, so I made that change late last night and uploaded an updated version to the codepen URL (the updated version isn't in the main zip downloads yet). Sorry about any confusion that caused. So you'd probably need to clear your cache to make sure you're getting the latest version. Is it working better for you now?

Hi @gab Welcome to the forum. That demo looks pretty good to me. I'd recommend following along with that article and implementing it the way they did. It will give you a lot of control. That being said, you can make it work with MorphSVG too. I put together a quick pen for you to see how it could work. I just drew out a quick blobby path that I wanted for the mid-point of the animation & then duplicated that path twice - once for the start and once for the end. By duplicating the master, the clones will have the same number of points and that makes it easy for MorphSVG to perform the calculations. For the start and end paths, I just squished down the points and placed them slightly outside the viewBox. I manually duplicated a few copies of the start path so we could stagger some colors, but you could create a loop and clone those if you wanted. Here's the result. It's not exactly the same as the referenced demo, but it works. Hopefully that helps. Happy tweening.

The performance of filters used to be pretty bad, but browsers have since optimized most of their usage. If you notice performance is an issue, try adding will-change to your CSS. I was messing with a complicated blurring filter yesterday, and adding that made it run much faster. will-change: filter;

No. PixiJS is a canvas/WebGL based library. It doesn't work with HTML. Maybe you should look at CSS filters. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Hi @Sahil Yes you are completely right, but the scrubber works in a slightly different way to the one demonstrated in this example. The audio example works like: tl.progress(audio.currentTime / audio.duration); so the integer can never be anything small than 0; This example works like: t2.progress(x / (volRect.width - knob2Rect.width)); But the x value can be a negative integer hence the need for Jack's awesome solution And tnxs again for help, most appreciated

I don't think there's any question that something odd is happening on the live site. As Jack mentioned, since it works fine on CodePen there has to be something else interfering. This doesn't appear to be any problem with GSAP. It does seem like some sort of sizing or transform-origin issue. I tried looking at your live site, but there are just too many scripts loading and without editable code, its so difficult to debug. I'd recommend starting with the code from the demo and just keep adding scripts, styles and functionality until the behavior appears. If you could make it happen in a simplified CodePen, we should be able to point you in the right direction. Happy bug hunting.

Thanks for the kind words. Yeah, I think this community here is something really unique that makes GSAP even more special and trustworthy in a world of [seemingly] unending open source options littering the web (many of which are poorly supported). Very cool to hear that the timely responses boost your confidence. I'm looking forward to seeing the article you write. Please let us know when it's live. As for controlling sound events from a timeline, it should be as simple as dropping a call() into a timeline wherever you want a sound triggered. No need to fumble around with a bunch of setTimeout() calls (which wouldn't be synchronized with the GSAP timeline, like if you ever scrubbed the playhead or made it jump elsewhere). See what I mean? Let us know if you have any other questions. Happy to help.

Hey Accent, Thanks so much for keeping us posted on your progress. Love the latest demo. I have favorited this thread for future reference. Great job!

Hi @OSUblake Thanks. For the actual game, i used canvas and vanilla javascript, it is actually based on the code from Jakes Gordon - https://github.com/jakesgordon/javascript-racer, but heavily modified and optimized. On top of that, TweenMax is used for animation of all UI elements, for example when you collect coins, and the minimap etc. Right now, the game is not playable online as it was a project i created as a campaign for a customer. But I will see if i can get the game online on another link for you guys to try out I will get back to you here, when i figure out how. - Plenge

No problem at all. Regarding wiring it up to GSDevTools, what's the biggest challenge? Is the problem that you want to skin it in some custom way (you want it to look different)? Or is it just that you're not sure how to wire it up to your own tween/timeline? If it's the latter, it's literally as simple as: GSDevTools.create({ animation:yourTweenOrTimeline, globalSync:false //optional, but probably what you'd want. }); Done. I'm not trying to say you NEED to use GSDevTools - I just figured it might be a really good solution if your goal is to hook up a scrubber to your animation. It solves a bunch of problems for you already. But it's totally fine to build your own if you prefer. Happy tweening!

@GreenSock Hi Jack, thanks for the insight, absolutely brilliant. In regards to GSDevTools, I was speaking in regards to myself implementing the code, JavaScript is a bit of an illusive creature in my mind, if you asked me to do a complex Tween, I could probably pull it off. But ask me to use JavaScript to build something from scratch, I struggle to do so. Google is my life line Anyways tnxs again Jack, your support is awesome!!!

Aaaand a fancy new pen and now I'll stop spamming this thread. Thanks again everyone for the help!

Hi @Exhumator @OSUblake is the king of canvas animations. Here are a couple from his collection. I'd recommend looking through his entire CodePen profile for inspiration. https://codepen.io/osublake/ Happy tweening.

Hi @DeuxAlpha Welcome to the forum. I'm not familiar with Inkscape so I have no idea how to control its SVG export settings, but you can always drop your SVG into a clean-up tool like SVGOMG https://jakearchibald.github.io/svgomg/ I'm not sure if you're just presenting minimal code in your question, but neither code snippet would actually draw a circle as you're missing some attributes. At a minimum you'd need a radius for the circle and usually a cx/cy if you don't want it at 0,0. Hopefully that helps. Happy tweening.

It looks like you were loading in multiple versions of TweenMax, TweenLite, TimelineLite and TimelineMax. You only need to load TweenMax (as it includes all the core tools). Please see if this fork works for you

Hi @flash08 I'm not sure, but I think you're asking how far along the x axis to place those other divs so they're off the screen at the beginning of the anmation? If that's the question, you could just check the width like this: var ww = window.innerWidth; Then just use that value in your tweens instead of your hard coded 960px. Hopefully that helps. Happy tweening.

Hi @damonjentree Welcome to the forum. If I understand your question correctly, the DrawSVG plugin is made for that type of animation. Here's a fork of your pen: That would be the easiest way to animate the line and you wouldn't need a mask or clip-path. That is a Club GreenSock plugin, but you can try it for free on CodePen. Here's some more info about the club. https://greensock.com/club Hopefully that helps. Happy tweening.

Incase anyone else wants to do something similar, I made the examples below to show how this can be done. Note that with this technique there would normally be floating point errors due to the large amount of floating point numbers that get appended. I have added a precision variable which is the number of decimal places you want your number to be accurate to, I have noted that in Chrome this only works for precision values < 15. For this to work you have to use a getter function to read the true value of sway, e.g., getSway(); Examples: http://codepen.io/anon/pen/vLeCg (using TweenLite's onUpdate function) http://codepen.io/anon/pen/KaJiw (using native Object setters and getters)