Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Carl last won the day on April 4 2019

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. Thanks! Ok, I can clarify: When the GSDevTools script is simply loaded (not instantiated with GSDevTools.create()) the onComplete in your callback fires twice (strange and unexpected). When GSDevTools script is removed the onComplete fires once (good and expected). When GSDevTools script is loaded and GSDevTools.create() is called the onComplete only fires once (good and expected) When GSDevTools script is loaded and GSDevTools.create() is called GSDevTools is really small and has a big red square ( strange, yet expected once you realize thereis a css rule for div in the css panel ) We will have to look into this deeper. Sorry for the confusion.
  2. I'm sorry but I'm not seeing GSDevTools in your demo. When I added it I did not see the onComplete fire twice. Perhaps I'm missing something, feel free to clarify or provide a demo that clearly illustrates the issue without us having to edit it. Thanks
  3. Carl

    the new to Gsap

    Hi Racke, Welcome to the forums. If you are using spans and divs chances are you will not want to use Animate CC. Animate CC exports to HTML5 canvas which doesn't contain any divs or spans. I would strongly recommend Mikel's advice above. Start small. Learn a bit of the GSAP API with just a few elements in CodePen. Carl
  4. Hi and welcome to the GreenSock forums, Yeah, you can use splice() to grab any number of elements from the end of the chars array that is created by SplitText. //grab the last 3 characters and reverse them var lastChars = myText.chars.splice(myText.chars.length-3,3).reverse(); Here is a simplified demo: Here is an explanation of splice() http://www.tothenew.com/blog/javascript-splice-vs-slice/
  5. texture export is new. this is what Adobe has to say about it: https://helpx.adobe.com/animate/using/create-sprite-sheet.html#texture-publishing I don't really have much experience with it.
  6. To get each circle to move on its segment of the path is pretty advanced. You could create a custom svg path segment for each circle that controls how far it should move and hide it on top of the visible path. Another approach is that you can make each ball tween along the same full path and then tween the progress of each of those tweens. So 1 circle could animate on the first 50% of the path or another on the last 50% or another on the middle 50% of the path.. Keep in mind this is a very advanced concept and pretty much requires that you've experimented with the GSAP API for a few weeks. I really can't explain it all in proper detail but here is a demo: var tl = new TimelineMax({paused:true}); //create unique path data for each circle var bezierData1 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle1"}); var bezierData2 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle2"}); var bezierData3 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle3"}); //apply to all circles tl.set("circle", { xPercent:0, yPercent:0}); var circle1tween = TweenMax.to("#circle1", 1, {bezier: {values:bezierData1, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true}); var circle2tween = TweenMax.to("#circle2", 1, {bezier: {values:bezierData2, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true}); var circle3tween = TweenMax.to("#circle3", 1, {bezier: {values:bezierData3, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true}); //create a timeline that tweens each tween to and from unique progress values var tl = new TimelineMax(); //red tl.fromTo(circle1tween, 4, {progress:0}, {progress:1, repeat:-1, yoyo:true, ease:Power0.easeNone}) //green tl.fromTo(circle2tween, 2, {progress:0.25}, {progress:0.6, repeat:-1, yoyo:true, ease:Power0.easeNone}, 0) //blue tl.fromTo(circle3tween, 3, {progress:0.3}, {progress:0.8, repeat:-1, yoyo:true, ease:Power0.easeNone}, 0)
  7. Yup, Mikel was exactly right about the align property. Another issue is that you have 3 circles with the same id (id="circle") ids must be unique so change your svg to use: id="circle1" id="circle2" id="circle3" Also since each circle exists in a different location in your svg you have to align each to the path to get the proper bezier data. var tl = new TimelineMax({paused:true}); //create unique path data for each circle var bezierData1 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle1"}); var bezierData2 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle2"}); var bezierData3 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle3"}); //apply to all circles tl.set("circle", { xPercent:0, yPercent:0}); //animate each circle along its own unique bezierData //start each animation 1 second after the previous tl.to("#circle1", 4, {bezier: {values:bezierData1, type:"cubic", autoRotate:70}, ease:Linear.easeNone, repeat:-1, yoyo:true}); tl.to("#circle2", 4, {bezier: {values:bezierData2, type:"cubic", autoRotate:70}, ease:Linear.easeNone, repeat:-1, yoyo:true}, 1); tl.to("#circle3", 4, {bezier: {values:bezierData3, type:"cubic", autoRotate:70}, ease:Linear.easeNone, repeat:-1, yoyo:true}, 2); tl.play(); Here is your example with a few modifications:
  8. Thanks for the demo. The time value gets recorded when that tween is added to your timeline. It doesn't automatically keep updating. For something like this its best to create a new tween for your timeline or create a new timeline each time you want to play. The demo below calls a function that clears your timeline and puts a fresh new tween inside it i'm using a random number so that you don't have to wait a minute to see a new value. feel free to switch it back to what you had.
  9. actually... As long as the symbol at its natural size is the biggest you want it to appear, you can that take that symbol from the library at normal size, place it on the stage, scale it down using the transform tool, and then scale it to a scale of 1 with TweenMax. it will look fine. EDIT: quick video: https://greensock.d.pr/nv2HJb
  10. the main issue is that in your publish settings you have "export document as texture" selected That tells animate to pack all your vectors in to spritesheets (as bitmaps at the size they are on the stage) So you were creating a super small bitmap circle and scaling it massively. Try deselecting that option and then drawing your circle at its biggest size and scaling from 0. TweenMax.from(this.circlebig, 1, {scaleX:0, scaleY:0, ease:Back.easeOut}) see attached Animate Scale.zip
  11. Hi and welcome to the GreenSock forums, Thanks for the demo! When tweening attributes like that it's important that the element already has an attribute with the values you are tweening and it has the same number of numbers. Please read the section "tween complex string values" here: https://greensock.com/gsap-1-18-0 in your SVG markup you had gradientTransform="translate(0,0)" but in you are trying to tween that value to "rotate(360, 250, 250)" which is much different and contains 3 numbers. I changed your svg to have <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse" gradientTransform="rotate(0, 250, 250)">
  12. Yeah, what Sahil already posted are the best examples of showing the complexity of what you want to achieve. It's no small task. I also thought of this example from Chris Gannon which is a bit simpler all around but necessarily easy. Just for inspiration
  13. Hi Severinskr, Welcome to the GreenSock forums. All three of those websites use GSAP for their animation, so it's safe to say it would be a good choice for you However, it's important to note that you only need a membership if you need one of the the bonus plugins or the commercial license. The vast majority of GSAP is free to use and you can do amazing things without joining the Club. It seems like you are just dipping your toes into your investigation so I don't want to confuse you with a bunch of options that you probably don't even need. I would recommend the following path: Play with GSAP for a week two. Read the Getting Started article, read the docs, watch our free videos, and most importantly try building your own animations of VERY simple things. https://greensock.com/learning Once you understand the API and how to build some simple timelines, then check out ScrollMagic. ScrollMagic is a third-party library that makes it fairly easy to trigger GSAP animations based on your scroll progress. It is not necessary for what you want to do, but probably the easiest approach to learn with solid examples to follow. http://scrollmagic.io/examples/basic/simple_tweening.html I would only suggest you look into Club GreenSock after you have a working knowledge of the API of the core tools (TweenMax, TimleineMax, etc). The good news is you can try any of the Club plugins for free. https://greensock.com/try-plugins
  14. Great work, Mikel. Nice and simple. just the way I like it!
  15. SVG doesn't officially support 3D. I'm not so sure your trick of putting a div inside a foreign object inside an SVG is a valid workaround. I think it would be better if you made a reduced test case with just a simple div in an SVG and tried to get it to render the way you want just with CSS (static, no animation). If it is technically possible to achieve, then I would suggest trying to animate it with GSAP. SVG code is a disaster to try to read (not your fault), so it always helps to reduce it as much as possible... for instance there is no need for the carts or even the truck at this point. I would start with a simple rectangle or 2 and work up from there. There are some folks around here who know more about SVG than I do, so perhaps there will be some helpful info for you.
  16. Thanks for the demo, but unless your issue is related to React it's really best not to provide something that complex with multiple files, dependencies, code for components and all that. A simple demo will be just fine and helps us better focus on the issue without getting hung up on all the unnecessary overhead. I tried looking at your demo but it wasn't immediately clear how your verticalHandler function was supposed to be invoked. I didn't see a button for that in the UI or any code that called it. That aside, the following demo should meet your requirements as you described:
  17. Hi iLuvGreenSock, Sorry, but pasting some css styles into your response does nothing to get us closer to understanding why you think an onComplete is firing early. As Sahil noted it is virtually impossible for an onComplete to fire before its scheduled time. I've also increased the tween duration to 3s and onComplete gets fired 3s while tween started slowly and ends another 3s later. Please provide a demo that clearly illustrates this issue and we will do our best to explain what is happening and offer a solution.
  18. Hi and welcome to the GreenSock forums, If your intent is to kill all your animations at once, please see TweenMax.killAll() https://greensock.com/docs/TweenMax/static.killAll() To track individual tweens, yes you can assign them to a variable or push them into an Array. var myTween = TweenMax.to(something, 1, {x:100}); //and then you can kill or control that animation using common methods such as myTween.restart(); myTween.pause(); myTween.reverse(); myTween.kill(); someArray.push(myTween) Also you can grab all tweens and put them in a timeline that you can then control or kill as a group using TimelineLite.exportRoot() https://greensock.com/docs/TimelineLite/static.exportRoot() That's a fairly advanced concept and may not be super easy to grasp for beginners. Definitely crack open the TweenMax docs and explore the methods in the left-hand nav. Its a great way to get an overview of the capabilities of the platform https://greensock.com/docs/TweenMax/TweenMax() and find some stuff you may not know was possible. Don't worry about understanding everything the first time through. Just good to have some mental notes that you can follow up on later.
  19. Hi, I think your best bet would be to reach out to the author of that demo. He's extremely advanced and I suspect he wrote it in a way that could be extended without much trouble. We really have to keep our support focused on questions related to the GSAP API. Digging into hundreds of lines of code that we didn't write can be quite time-consuming and something that we just don't have the resources for. Perhaps someone else will stumble into this and enjoy the challenge.
  20. Thanks for the demo, unfortunately it is incredibly confusing due to the language (we're primarily English-speaking here) and the fact that there are 500+ lines of code. I'm confident your issue could be illustrated with less than 50 lines of code. Perhaps you could make something very small and clear... like you press a red button and something that is the colored red moves. press the green button and the green thing moves. Very simple like that. We don't know what the words Vakantiebudget, eindVakantiekilos, huis, gemisstat3 mean so when we see those as targets of tweens, we have no idea what we are supposed to look for. I'm sure if you can create a super simple timeline or 2 with one or 2 clearly named objects moving around, we will have a better chance of being able to help. Thanks
  21. Thanks for the demo, unfortunately I'm not really following what is happening. Please understand it is very difficult to look through 150 lines of code with no comments AND large chunks commented out for no apparent reason. It seems the core of your issue is that you want an animation to open, revealing somethings and then close via some interaction. I'm certain you could simulate that with a dozen or so lines of code and 2 or 3 elements that reveal and hide. All the stuff about dom elements being populated with different data is just unnecessary clutter. The one area that jumped out as a potential trouble spot is that in your open function you have this code this.tl .fromTo(this.DOM.img, 0.8, { x: (rect.boxImgRect.left - rect.detailsImgRect.left), y: (rect.boxImgRect.top - rect.detailsImgRect.top) },{ x: 0, y: 0 }) .fromTo(this.DOM.img, 2, { width: rect.boxImgRect.width, }, { width: '100%', clearProps: 'width', onComplete: () => (this.isAnimating = false) }, 0); which keeps adding new tweens at a time of 0 to the same timeline. putting new tweens at the beginning of a timeline isn't going to place the playhead at a time of 0 and play the timeline. maybe you need to call restart() also? Its not clear to me why all those values have to be recalculated and why the timeline needs fresh tweens every time. in most cases you would just restart() the timeline again and your open and close would just be a play() or reverse() of that timeline. I suspect that if you can simplify the demo so that you can demonstrate the issue with as little code as possible, we will be better suited to give you more decisive guidance. Also if you are going to revise your demo, please make a fork as it makes it very difficult for people to try to figure it out if it changes. Thanks
  22. given this gradient <linearGradient id="MyGradient"> <stop offset="1.281415e-03" stop-color="#FFDD15" id="stop1"/> <stop offset="0.5" stop-color="#EE4036" id="stop2"/> <stop offset="1" stop-color="#9E1F63" id="stop3"/> </linearGradient> you can tween those attributes using the attr plugin TweenMax.to("#stop1", 2, {attr:{"stop-color":"red"}}); TweenMax.to("#stop2", 2, {attr:{"stop-color":"white"}}); TweenMax.to("#stop3", 2, {attr:{"stop-color":"blue"}}); we warn not to tween stuff in <defs> so its worth testing. In the future please consider providing a demo as it makes things easier to test.
  23. I don't see how you can morph shape A into shape B and keep the original shape A on screen without duplicating that path data in the SVG as Blake illustrated. Perhaps you can better explain what you would like to have happen or how GSAP would do this for you. Something to note that is semi-related and not a solution to your problem is that GSAP puts a "data-original" attribute on the target of your morph so that you can easily morph back to the original shape. the data-original attribute stores the original, pre-morph, path data var tl = new TimelineLite({onUpdate:updateSlider}), circle = document.getElementById("circle"); tl.to(circle, 1, {morphSVG:"#elephant"}) .to(circle, 2, {morphSVG:"#circle"}, "+=1")
  24. Carl

    For all BANKSY fans

    First, one of GSAP's most important features is its ability to help people create animations that tell stories. Your work certainly excels at that. Great job! The reason EGON moves so fast at the end is that he is moving a great distance in a short amount of time I know you know that, but now we have to consider why is the time so short and not longer for the big distance he has to travel. I have to admit I'm having trouble deciphering the walk() function. I see it takes a target parameter, in GSAP the target is the thing that is being animated, but it looks like you are passing in numbers like walk(0.1) walk(0.001) walk(0.25) its ok, to use your own target variable and be number... I just don't know what those numbers represent. I also noticed that you are getting the start value by doing start = egon.offset().left; console.log("start = " + start) If you log it out start you will see that it is always the same. In order to get the distance and speed I think you need to know egon's current position and where he is going to when those tweens are created. I think it will take a bit of tinkering, so hopefully this helps you or someone else get into the proper solution. Again, great job on the animation!
  25. backgroundColor is a css property and has no meaning in the Animate CC / EaselJS world. You can use the EaselPlugin to animate color effects in Animate CC from the EaselPlugin docs: //tween the tint of the circle to green and scale it to half-size TweenLite.to(circle, 2, {scaleX:.5, scaleY:.5, easel:{tint:0x00FF00}}); https://greensock.com/docs/Plugins/EaselPlugin You can load the EaselPlugin from this CDN URL https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/EaselPlugin.min.js