Popular Content

Showing most liked content on 04/19/2018 in all areas

  1. 4 points
    Hello Fellow GreenSockers, Well its that time again, The Mighty @Carl has just made and posted another great video tut about: Easy SVG Drag & Drop with GreenSock Draggable Keep in mind if you haven't done already please subscribe to the GreenSock Learning YouTube Channel so you don't miss out on this goodness. https://www.youtube.com/channel/UCFPckx3BFK_GvJag82CjDlg And here are the codepen to boot: Happy Tweening
  2. 4 points
    Hi Prison Mike Just want to point out that DirectionalRotationPlugin is built into TweenMax. TweenMax.to(rectangle, 3, { directionalRotation: { rotation: degToRad(90) + "_ccw", useRadians: true } }) Notice how this pen is only loading TweenMax, PixiPlugin and Pixi (http://prntscr.com/j7byn7)
  3. 4 points
    Hi @ScottJenson There's really no spec for this. The filters in Pixi are shaders, little programs that run on the GPU. The displacement filter is a fragment shader, which runs every pixel through a function to get it's color. That's what gl_FragColor returns. To learn more about shaders, The Book of Shaders is a good place to start. varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; uniform sampler2D uSampler; uniform sampler2D mapSampler; uniform vec4 filterArea; uniform vec4 filterClamp; void main(void) { vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale / filterArea.xy; gl_FragColor = texture2D(uSampler, clamp(vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y), filterClamp.xy, filterClamp.zw)); } The colors used in the displacement map aren't too important. What matters are the channels in the color. In an image, each pixel is an rgba value. In the displacement map, each pixel represents an xy value. A 2D vector. // color channels from 0-255 var color = { r: 100, g: 200, b: 0, a: 255 }; // convert to values from -0.5 to 0.5 var map = { x: (color.r / 255) - 0.5, y: (color.g / 255) - 0.5 }; So the red and green channel are what matters. The red channel is the x displacement, and the green channel is the y displacement. The displacement values will be from -0.5 to 0.5. If the channel is 0, the displacement value will be -0.5. If the channel is 128, the displacement will be 0. If the channel is 255, the displacement value will be 0.5. The filter uses the coordinates of the texture pixel being processed and offsets it by the corresponding displacement and scale value in the map, and returns the color of the texture at those coordinates. So if the red and green channel are both 128, it's going to return the same pixel. It's neutral. If the red channel is less than 128, it's going to return a pixel to the left of it. If the green channel is less than 128, it's going to return a pixel above it. This displacement map will work almost like the one you posted. The gray background has an rgb value of 128, 128, 128. The brownish background in the image you posted has an rgb value of 128, 128, 0. The red and green channels are what matters, so no displacement happens in those areas. Here are some terms worth knowing as they are kind of related. Displacement mapping - https://en.wikipedia.org/wiki/Displacement_mapping Heightmap - https://en.wikipedia.org/wiki/Heightmap Normal mapping - https://en.wikipedia.org/wiki/Normal_mapping A normal map is used for lighting, but it's similar to a displacement map. http://www.falloutsoftware.com/tutorials/gl/normal-map.html https://cpetry.github.io/NormalMap-Online/ This tutorial shows the relationship between a normal map and a displacement map. http://zarria.net/nrmphoto/nrmphoto.html And here's a demo I made for some fabric. You can drag the letter. The displacement map is black and white.
  4. 4 points
    Hi @mary92. I threw together a quick CodePen to demonstrate this without ScrollMagic. I love ScrollMagic, but I try to stay away from it where possible to remove complexities. Because you're dictating user direction and position (within the content), I'm not so sure you need the sauce of ScrollMagic (which fires events at trigger points). Here I demonstrate The parallax effect by manipulating the background position A method to capture scroll direction to dictate which direction to tween to A few notes ... I'm making use of jQuery and a jQuery plugin (jquery-mousewheel) to simplify everything by getting a positive or negative scroll delta to determine direction and to ignore scrolling after the initial detection until the scroll event is done. Here is the CodePen to illustrate. I'm not sure how well it will function embedded here ... you may want to pop out into CodePen itself.
  5. 3 points
    If you need help, post a demo instead of code. It's hard to understand what's going on without one. That's why I'm going to have to take a guess on this one. If something goes crazy when you change tabs and come back, it's probably because you're using setTimeout or setInterval. And I don't know if you should really be using xOrigin and yOrigin like that. Those are used for internal calculations done by GSAP, so they might not be what you expect. For SVG positioning, look at this thread.
  6. 3 points
    Here's an example of page piling from a previous discussion that uses scroll majic with pins that may help get you started.
  7. 3 points
    Good questions, @Babakness. Your questions aren't annoying at all; in fact, we love folks like you who show so much respect for the licensing terms and aim to honor the work of other developers. You're exactly the type of customer we love to serve. I completely understand your caution too; if costs aren't clear up front, it makes it very difficult to gauge if GSAP's awesomeness is worth building on. Don't worry; we try very hard to be more than fair and always air on the side of generosity with our customers. In 18 years of being in business, we've never sued anyone and our business model is almost entirely based on the honor system. Hopefully our track record proves that GreenSock isn't a scary company to get involved with. Trust is a BIG deal to us. The "Simply Green" and "Shockingly Green" memberships include various bonus plugins but are intended for individuals, thus only the standard license applies. The "Business Green" memberships get the expanded coverage of a commercial license (and all the bonus plugins of course). -- 2 & 4: Your license covers an unlimited number of your Work Products while it’s active. The only other caveat is that it covers your unedited work, meaning that if your clients/customers want to make any changes, they’d need to get their own license. Otherwise, it’d make it easy for a huge company like Microsoft to circumvent the license by hiring a freelancer to start a project and then take it in-house and piggy-back on that single-developer license without getting their own license for their numerous developers. See what I mean? But again, all of the work you do is covered as long as it’s not edited by others outside your organization. If, for example, Company A develops a Work Product that uses TweenMax and sells it to Company B who will be licensing it to end users, Company A should have a “Business Green” membership. Company B would not be required to have a membership. If, however, Company B prefers to maintain a membership instead, that is perfectly acceptable as long as it wouldn’t reduce the club level, meaning if the development company has 20 developers and Company B has 1 developer, it wouldn’t be fair to circumvent the terms by only having Company B get a single developer membership. A 20-developer membership would be required. Again, only one of the companies needs to have the license, not both. -- 3: The ads themselves don't require any special license, no. If the site that's displaying them uses GSAP and it is indeed charging multiple users a fee (in this case, the advertisers) for something related to that product (the site in this case), then yes, technically it'd be appropriate to get the proper "Business Green" license. -- 5: Only if they update GreenSock-related code. In other words, if the "fresh out of college" developers never touch a line of GSAP code, there's no need for that company to get their own license. The original developer's license would cover it. -- 6: Wow, that's a big company! We'd love to have them as a customer (ha ha). You only have to count the number of developers who may interact with GreenSock tools. So in your example, that's only 1 developer, not 50,000. -- So in summary: You only need to count the number of developers who'd interact with GreenSock tools. Your license covers all of your unedited work, even if your clients are reselling it. If your customer wants to make edits themselves, they should get their own license. Our licensing is based on the honor system; we've never sued anyone. No need to be scared that GSAP has a bunch of thorny tentacles that'll invade your work and make things really awkward and expensive. Hopefully our licensing model actually boost your confidence in building on GSAP because it's what has allowed us to continue to innovate and support our products, unlike most other libraries that fade after a matter of months. GSAP is very unique in this regard. Does that help? Don't hesitate to ask if you've got any other questions.
  8. 3 points
    Hello @mackay2588, and welcome to the GreenSock forum! When i go to your page I got redirected like @Carl did. Thanks @OSUblake for providing the right link. But when i go to the right link I see errors first thing in the browser console. jquery.mobile.js:3337 Uncaught TypeError: Cannot read property 'concat' of undefined at jquery.mobile.js:3337 at jquery.mobile.js:3814 at jquery.mobile.js:22 at jquery.mobile.js:22 jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'top' of undefined TypeError: Cannot read property 'top' of undefined at animateDiv (https://mackay2588.github.io/scripts/randomMove.js:31:33) at HTMLDocument.<anonymous> (https://mackay2588.github.io/scripts/randomMove.js:9:9) at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375) at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined jquery.min.js:2 Uncaught TypeError: Cannot read property 'top' of undefined at animateDiv (randomMove.js:31) at HTMLDocument.<anonymous> (randomMove.js:9) at l (jquery.min.js:2) at c (jquery.min.js:2) dbLogoB&W.png:1 GET https://mackay2588.github.io/dbLogoB&W.png 404 () You might want to also handle those console errors. But like Blake advised above you might want to use x (translateY) instead of using top. And reduce the amount of animated elements. I have also seen with that particles.js library being a great resource hog, especially on mobile draining my battery. Just my two cents
  9. 2 points
    You can calculate snap using a function as in following demo, a lot more flexible when your slides are of same width. Idea is to use a container with width 100%, which becomes your "viewport" for slider. Then calculate width of your slides container by multiplying length and then use snap function to keep track of active slide so you can recalculate slides container on resize.
  10. 2 points
    I'm not familiar with the jquery plugin but you should be able to wrap it in a timeout or find a debouncing function to prevent overscroll. I.e. prevent it from firing more than once per scroll. Shaun would know more about it maybe the plugin has a setting for debouncing?
  11. 2 points
    Thank you for taking the time to show me these errors. Silly me thinking I could just drop it in and go. I'll go over your notes and make another go at it. Really appreciate the help!!
  12. 2 points
    Seems like you just dropped your animation in there and expected it to render automatically, following are some of the things you need to fix, 1. Your animation is made up of multiple svgs, In @OSUblake's demo he uses single svg as source. 2. All your style must go directly in svg, because in javascript only SVG Markup is getting extracted so canvas is not aware of what is happening inside svg. 3. You are rotating svg element itself but it won't help you, you must animate elements inside svg. Which cause svg markup to change and it gets captured by canvas. Otherwise no animation will get rendered because SVG is not changing from inside. 4. In his javascript he is using animation variable to assign Tween to it so that it can be used to extract frames, in your example you are using animation in different file so you will never get output you want because code is tracking different animation. 5. Your SVG's have different viewbox size, in his example his svg viewbox is 350x350 and canvas is of same dimension so basically your viewbox and canvas should be of same dimension. 6. He is using a white rect as background otherwise canvas will render black background. Following is just tiny bits I edited here and there but you get the idea, http://plnkr.co/edit/Nf7shKxcoonMXsfcBU1Y?p=preview
  13. 2 points
    Yeah ... the performance is certainly choppy because of the big backgrounds. I didn't do my "preferred" method of manipulating the dom to create new element and applying the background image and then tweening that element's Y position. As a matter of fact ... I'll fork it and do that.
  14. 2 points
    Great solution, @OSUblake should promote you to Vice President of the 'You May Not Need Scroll Majic' club. Performace is somewhat choppy, at least on my machine almost certainly due to animating the large background images, not the script itself, I'm curious has the community come up with any solutions/best practices for optimizing performance in this kind of situation?
  15. 2 points
    Hello @Massimiliano Aprea and welcome to the GreenSock forum! As far as making sure your animations pause when you switch browser tabs. You can always use the HTML5 Visibility API, so when you switch tabs you can trigger a pause on your tween(s) or timeline. And then resume the tween or timeline when you give the active tab focus. Like in this example which pauses the animation when you focus out of a browser tab, and then when you give the tab focus again it will resume the animation. Keep in mind that the example also checks for when browser window is focused in and out since that doesn't use the HTML Visibility API, which only works with browser tabs not un-docked browser windows. Also Like @OSUblake advised we can help you better if you provide a reduced codepen demo example so we can see your code in context in and editable environment. Happy Tweening!
  16. 2 points
    Directional rotation is not built into the plugin. Maybe @GreenSock can add it. You'll have to use it at as separate plugin. tl.to(rectangle, 4, { pixi: { ... }, directionalRotation: { rotation: degToRad(90) + "_cw", useRadians: true } }, 1)
  17. 2 points
    Dear Sahil, I am not a GSAP guru, instead I know the banner area more, with the necessary amount of tweening knowledge to be able to make ads. So I leave the other side for Your expertise to answer questions. Regards
  18. 2 points
    Here's a super simple example: Click anywhere to toggle between a timeScale of 1 and 4. Initially it's got 0.5 seconds inbetween each "frame" (at a timeScale of 1). So jumping to a timeScale of 4 means that there are 0.125 seconds between each one (0.5 / 4). And you don't have to immediately change the timeScale - you can gradually change it by animating it, like: //animates tl.timeScale() to 4 over the course of 1 second TweenMax.to(tl, 1, {timeScale:4}); I hope that helps.
  19. 2 points
    Well, it doesn't matter anymore. You can do this now with the CustomEase. https://greensock.com/docs/Easing/CustomEase
  20. 2 points
    @Shaun Gorneau your example is amazing for what I need now, thank you for an effort! You all are great, I already love gsap community. I'm gonna get through your code carefully as soon as possible and return with an answer. Thank you again <3
  21. 2 points
    Yeah, that's kinda by design because multi-touch typically enables other stuff like pinching/zooming. But to get the behavior you're after, why don't you set allowNativeTouchScrolling:false on your Draggable and then add this: function ignoreEvent(e) { e.preventDefault(); e.stopImmediatePropagation(); if (e.preventManipulation) { e.preventManipulation(); } return false; } document.addEventListener("touchstart", ignoreEvent, false); document.addEventListener("pointerdown", ignoreEvent, false); Does that help?
  22. 2 points
    Hm, I don't know why that would happen, it works fine on my computer. It might come from the fact that you're using deprecated events – you should use 'wheel': $window.on("wheel", stipple(onMouseWheel, {delay: 0.2, leading: true})); function onMouseWheel(event) { if(event.originalEvent.deltaY < 0) { // go up (or down, I can't recall) } else { // go the other way } } More info here: https://developer.mozilla.org/en-US/docs/Web/Events/wheel (that page also provides a convenient polyfill for older browsers)
  23. 2 points
    Hi and welcome to the GreenSock forums. Yeah, it looks like you just need to give your logo element a css position value. It's just a css requirement that you can't change the left or top of something unless it has position set to relative, absolute or fixed. try: .logo { position:absolute; } We tried to make note of this in the video but it can be missed: https://greensock.d.pr/OssUPB In most cases its better to animate transforms (x/y) instead of position (left/top). Hope this helps. Let us know if you hit any more bumps in the road. We're happy to help. Carl ps. Definitely check out this thread on using CodePen its a great way to learn GSAP and makes it super easy for us to help you
  24. 2 points
    Hi and welcome to GSAP A few quick issues I noticed before getting into how you can use GSAP to accomplish what you described. You should omit the opening/closing <html>, entire <head>, and opening closing <body> from your CodePen. CodePen basically is setup in a such a way to assume all the html you provide is within the <body></body>. You did a good job of including your scripts through CodePen's settings and providing the necessary CSS within the editor. You also included duplicate code blocks within your Javascript ... everything within and including $(document).ready(function() { ... } OK, with all that said, I've forked your pen and modified a few key things. Namely, removing the use of Timelines and using TweenMax in the over/out functions. Another key thing is that var $items = $('.content-text span'); as a selector is targeting all of those elements (within the hovered tile and all other tiles) at once. You only want to target those elements within a tile being hovered/unhovered (over or out). So I moved that selector to be within the scope of the tile being over/out Example function over(){ $items = $(this).find('.content-text span'); //<-- $(this) being the hovered TweenMax.staggerTo($items, 0.4, { y: 0, autoAlpha: 1, ease: Power4.easeInOut }, 0.1); } You'll notice that the initial hover is not moving the items from a lower position up. That's because the hover function has them resting at y:0 and the out has them moving down to y:20. So only after `out` runs on each tile will they be in a position to "move" up to y:0. There are a few ways to tackle that, but I went for a simple one ... simply set all to y:20 on page load. TweenMax.set( $('.content-text span') , {y:20} ); Now the initial hover Tweens them up to y:0. Here is a CodePen showing it all in action Happy Tweening!
  25. 1 point
  26. 1 point
    Yes, the solution is great although it is not smooth. Also full-screen background images are jumping during a scroll. jQuery mousewheel plugin seems quite sensitive - it can scroll to third or even fourth section on small move of finger at the starting point. It is already too high level for me to fix I’m doing small content animations in a meantime. The solution is great for beginners cause I can manipulate the order and time of tweens with ease!
  27. 1 point
    This is an amazingly helpful answer. Well beyond the call. Thank you!
  28. 1 point
    I'm glad it helped! Feel free to post any questions. I tried to keep it simple to show the key components at work ... but that doesn't mean it's clear! Both = ScrollMagic
  29. 1 point
    Well I don't consider myself GSAP guru either, there are some easy questions that you might enjoy answering. Plus if you really really want people to post questions about banner ads and sizmek, maybe write couple of introductory posts in main forum? I might never do banner ads but I am always curious to know little bit of everything. Some new users might take interest and join you on Banner Animation forum.
  30. 1 point
    Ahh!!! Thanks a lot!! This helps a ton...
  31. 1 point
    I've read a lot of articles on why ES6 classes are bad, and I can summarize every single one of them. Classes are bad, blah blah blah, classical inheritance is bad, blah blah blah, functional programming is good. It's all opinions. I'm not saying there's no merit to their claims, but there are no technical reasons for why classes are bad. But here's the thing about classes, what they do isn't new. It's mostly just syntactic sugar for constructor functions. https://hacks.mozilla.org/2015/07/es6-in-depth-classes/ I personally use classes all the time. The biggest argument against using classes is one of the reasons why I like using them, classical inheritance, creating a class from another class. The people that wrote those articles would consider my CustomSprite bad, but they would be OK with my CustomElement. They both do the same thing. See how to create a custom element. You need to use a class. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements // Inherits from PIXI.Sprite class CustomSprite extends PIXI.Sprite { constructor() { super(); } customMethod() { } } // Inherits from HTMLElement class CustomElement extends HTMLElement { constructor() { super(); } customMethod() { } }
  32. 1 point
    Thank you all for the feedback. I removed particles.js and everything else is running much smoother.
  33. 1 point
    Here's are some tutorials from from Peter Tichy that will walk you through basic Scroll Majic use including a parallax tutorial that should get you pointed in the right direction and help you determine if Scroll Majic is the tool for you. https://ihatetomatoes.net/product/scrollmagic-101/?utm_source=GW&utm_medium=banner&utm_campaign=S101 banner demo
  34. 1 point
    Hi @mary92 and welcome to GSAP! You may or may not need ScrollMagic here ... there are many cases where ScrollMagic is not needed for a parallax effect. I have two examples of navigating that produce a parallax effect; one where I use ScrollMagic and one where I don't In this one https://www.reynoldslakeoconee.com/golf I do use ScrollMagic to trigger the parallax movement at specific timings ... as each background image comes into view. (for some reason there is some jankiness in Firefox that I have yet to figure out ... Chrome gives the best result, Safari gives an acceptable result, Firefox is pretty bad) For this one https://www.reynoldslakeoconee.com/our-community/blog, a slider, I do not use ScrollMagic and just allow the slide transition Tweens to account for the parallax movement. It's the slider at the top ... it's not a true "parallax" effect, but uses the same principles which can be adapted for a more immersive parallax. Maybe picking them apart can help you?
  35. 1 point
    It's a bit hard to tell what you are trying to achieve. The example you show is a nicely functioning slider but doesn't really indicate what you are trying to achieve with respect to parallax. By smooth parallax do you mean you don't want a slide to slide transition and want to scroll the DOM as normal with animations occurring during scrolling or do you want slide to slide scrolling as you have now with animation occurring inside the bounds of the slides? If you're not sure of the type of effect you want perhaps search parallax scrolling websites on google or codepen to find something you like. Perhaps then we could offer some more specific advice. Maybe someone else here can chime in with some examples?
  36. 1 point
    If you want to show a sequence of images that are the frames of a video, maybe it would be worthwhile to investigate simply animating the video position:
  37. 1 point
    Welcome to the forum @thedurf18! A few quick questions ... Is this series of images supposed to produce an animation effect? Or is it more a "slideshow" of images? What is the approximate minimum and maximum frequency that you envision these images changing? (i.e. 1 image per second, 10 images per second, etc.) Are these hard cuts from one image to the other ... or should there be any transition between the images (e.g. a cross fade)? How many images in total?
  38. 1 point
    Hi @SimonDucak Looks like you just missed the ThrowProps plugin in your demo. Here's the CodePen version: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js Happy tweening.
  39. 1 point
    Hi @Chelsea and welcome to the GSAP forums! A few things I would do in this case. First, I would use a Tween to position the playhead by frequently polling the audio's currentTime/duration by using setInterval, clearing the interval onPress and recreating onRelease (in addition to the audio controls that happens in those events). I prefer an interval to an audio ontimeupdate event because ontimeupdate's frequency is all over the map. That way it's a simple positioning (as a % or the overall scrubbers width) vs modifying a timeline's playhead (i.e. progress) in parallel. That way you can remove all your timeline stuff and use a simple Tween with the setInterval. Hope this helps!
  40. 1 point
    https://mackay2588.github.io/ https://github.com/mackay2588/mackay2588.github.io Minor problem only in Chrome? Edge is using over 40% of a GPU just sitting there, and that is on a gaming PC. You simply have too many animations going on, and animating "left" instead of "x" only makes it worse.
  41. 1 point
    The only jQuery I see is the button handlers ... $('#someButton').click( function(){ ... }); You can swap that out for plain JS like so someButton = document.getElementById( 'someButton' ); someButton.addEventListener( 'click', someFunction ); function someFunction(){ // Do some things }
  42. 1 point
    Tough to see what is happening here with just a few lines of code ... if possible, a CodePen would give us a better opportunity to help. But, I suspect your issue is due to translating the `X` value vs changing the `left` value. The tween is affecting `x`, so the style.left property will remain unchanged. So we have to get its translated value relative to its initial offset.
  43. 1 point
    Hi @dimka Welcome to the forum. It looks like you're trying to create a timeline, but your pen isn't loading TimelineLite or TimelineMax. It's usually easiest to load TweenMax which includes the following by default: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack Here's a fork of your pen with that change. Hopefully that helps. Happy tweening.
  44. 1 point
    Gotcha. I wasn't sure if you wanted to target single and multiple elements, so that's why I brought up the event emitter. It's a great way to keep things decoupled. That's actually how reactive libraries like React, Vue, Angular and RxJS work, although they call it a observer/observable. A silly event emitter demo I made for another thread. 45 different input ranges are being driven by animating a simple object.
  45. 1 point
    I don't know anything about Appium, but from a quick search can't you do a TouchAction moveTo? https://github.com/appium/appium/blob/62700d3b1dc0edd985502cc1279747a782f3ee74/docs/en/writing-running-appium/touch-actions.md https://github.com/appium/appium/issues/10178
  46. 1 point
    Fixing the sidebar should just be a css solution. position:fixed As far as parallax goes, there is more than one way to skin that cat and it will depend a fair bit on your Javascript skills. Scroll Majic and pins are used commonly for this type of thing, for more information you should visit the Scroll Majic site it has some examples. http://scrollmagic.io/examples/index.html Shaun had some very good solutions that are applicable to parallax recently in these posts. In the second @Shaun Gorneau created a script that links tween.progress to scroll position which has great potential for parallax effects and would be very flexible for changing and/or adding your own logic to. var scrollMax = $(document).height() - $(window).height(); $(window).scroll( function(){ var curScroll = $(window).scrollTop(); if( curScroll > 0 ){ rocketTween.progress( curScroll/scrollMax ); } }) If you search the forum I'm sure you'll find more examples.
  47. 1 point
    I thought I was the only one who keeps waiting for questions. Maybe you can occasionally jump to other side of the forum to get some reputation.
  48. 1 point
    If you can convert your animations into a transparent png sequence - like img0001.png, img0002.png, etc. - you can use FFMPEG to overlay the image sequence onto your video. That's how I've been doing it. FFMPEG can use an image sequence as a single input parameter. https://en.wikibooks.org/wiki/FFMPEG_An_Intermediate_Guide/image_sequence
  49. 1 point
    +1 to that comment. @mikel - you've really been answering a lot of questions lately. The GreenSock community really benefits when more people jump into the mix. There are sometimes many paths to the same goal so seeing how other people approach a problem is always educational. Keep up the great work.
  50. 1 point
    HI Mikel, It seems once MorphSVG plugin is loaded that error goes away. The onComplete / talking() animation did not appear to run on restart because the count variable was never being reset In the demo below I added MorphSVGPlugin and a small conditional that set count to 0 after it is greater than moves This works well in this reduced case, but if you want to call the talking() function a bunch of times and build talking sequences I think you will run into some trouble. Since talking() is just creating tweens and re-cursively calling itself there is no easy way to stop the talking() routine or be able to trigger another animation when its done. I made some changes so that the talking() function creates a timeline of random open mouth sequences based on a talkAmount variable function talking(talkAmount) { var tl = new TimelineLite(); tl.set("body", {backgroundColor:"hsl(" + Math.random() * 360 + ", 50%, 50%)"}); for (var i = 0; i < talkAmount; i++){ tl.fromTo(mundAuf, random(0.2, 0.5), {progress:0}, {progress:random(0.1, 1), repeat:1, yoyo:true, ease:Sine.easeInOut}) } return tl; } I then built a main timeline moves the character around and has him talk when he is done moving like so: var main = new TimelineLite() main.add(talking(2)) main.to(".svgContainer", 0.5, {x:-200}) main.add(talking(5)); main.to(".svgContainer", 0.5, {x:0}) main.add(talking(2)); Check it out here: