Popular Content

Showing content with the highest reputation since 08/22/2018 in all areas

  1. 9 points
    Oh my turn! my turn!! PS: Sorry couldn't resist
  2. 8 points
    Here's a super rough and quick version that I did. You could probably smooth out some of the paths in Illustrator a bit more even.
  3. 7 points
    Hi @Kalimeromax I don't think a master timeline is a good idea for what you're doing. All your timelines repeat, but with different durations, so they aren't synced with each other. And the infinite repeat creates another issue. When you reverse a timeline, it's going to play in reverse for however long it has been playing forward i.e. its .totalTime(). That's why some of your reverse animations take longer than 1 second to complete. See if this is more of what you were going for. On hover enter, I adjust the totalTime as if the animation where on its first iteration.
  4. 7 points
    I'd certainly recommend what Jack has done in his answer, but another way to do it would be setting the SplitText divs to position:absolute and animating the left position. This isn't as versatile and animating x/y instead of left/top is usually preferable, but depending on your animation, this could work too. Happy tweening.
  5. 7 points
    Hi and welcome to the GreenSock forums. Thanks for the demo. That's a pretty cool way to make a rotating sphere. The API makes it pretty straightforward to detect the midpoint of an animation. For any given animation you can query its duration() or progress() to get the "halfway" or mid point var tween = TweenMax.to(something, 10, {x:100, ease:Linear.easeNone}); to start another animation when that tween is in the middle you would schedule it start at a time of tween.duration() * 0.5 //or tween.progress(0.5) And, yes I'd use a timeline to schedule one tween to start at the midpoint of another. An issue with your setup is that your elements are dispersed all over the globe initially and each rotate 360 from their current position. So let's say an element is exactly behind the globe, if you fade it out halfway through its animation it will fade out when it is in front of the globe. no good. My first step was to set up every element in a vertical half-ring around the front of the globe and get them all to rotate the same way and fade out at the same time once I got that working I then randomized the started progress of each elements timeline using progress(Math.random()) A big component to this is using a SlowMo ease with yoyoMode set to true at the right time to get the elements to fade out and back in. https://greensock.com/docs/Easing/SlowMo I could probably take 2 hours explaining all this, but hopefully this gives you something to play with and tweak. --- Another approach might be to use an onUpdate callback to map the current rotationY to a range of opacities so that its opacity will be a factor of its rotation.
  6. 6 points
    appendMultiple is indeed deprecated and replaced with add().
  7. 6 points
    Hi @kbeats, and welcome to GSAP! To get two tweens on a timeline to happen at the same time, you would set the position parameter. And more info on that https://greensock.com/position-parameter Happy tweening!
  8. 6 points
    Looks like a neat script, but it's $49 for unlimited commercial projects. SplitText can do all that (& more). IMHO, it seems like Club GreenSock would be a better bang for the buck since you'd get a bunch of bonus plugins in addition to SplitText. https://greensock.com/club https://greensock.com/SplitText If you haven't seen them yet, here are a couple threads showing a typing effect with SplitText. But as @Carl mentioned, you'll probably have better luck with their support channels. https://github.com/alexmacarthur/typeit/issues
  9. 6 points
    Sounds good. It's officially item 1,437 on my 'to-do' list so I may not get to it until the year 2029. Unless you're gonna let me use your Blaketrix headjack so I can learn it in a few seconds.
  10. 6 points
    The signal is only visible at night, so it might be awhile before he actually sees it. Maybe you should fill that void. I hereby promote you to the role of Senior Daytime React Answering Manager, so you should start learning it. I think the basics are pretty easy to pickup, and being able to combine JavaScript with HTML/SVG is a joy. https://reactjs.org/ https://reactjs.org/tutorial/tutorial.html
  11. 6 points
    There's no chaining. He's creating an animation for an element, and then storing that animation on the element to make accessing it easier later on. An element is an object, and you can add properties to an object after it's created. The name doesn't matter as long as you don't use a name that is already being used or is reserved. var box = document.querySelector(".box"); var Anim; box.mySuperAwesomeAnimation = TweenLite.to(box, 0.7, { yPercent: -100, paused: true }); // later on you can access that animation box.mySuperAwesomeAnimation.play(); // creating an alias to the animation Anim = box.mySuperAwesomeAnimation; // both of these will work. They are the same animation Anim.play(); box.mySuperAwesomeAnimation.play();
  12. 6 points
    I don't mind if you use my waveSVG() function. Here's a forked version that starts with a flat tail so that the resulting curves look a bit more natural: I'm sure it could be tweaked to be more natural, but hopefully this gets you going in a the right direction.
  13. 6 points
    No. Graphics data is stored as an array of points. It does not keep track of the parameters you pass in. You can create an object with the properties of your shape, and animate that instead. The reason I'm animating the angle to 361 is because there will be a tiny gap at 360. It's either that, or draw a circle at the end. Also, graphics rendering can be slow, so it's best not to create a different graphics object for every shape you draw. If you look at the Pixi example, notice how they are using a single graphics object. https://pixijs.io/examples/#/demos/graphics-demo.js
  14. 6 points
    As @PointC said, you need to use .call(). Parentheses after a function will execute it immediately. .add(insertContent(element)) Your function isn't returning anything, so that is essentially the same thing as this. .add(undefined) This will wait to call the function. .call(insertContent, [element])
  15. 6 points
    Hi @jsciumi The problem is your intro() timeline. In that one you're targeting the individual characters with a staggered color animation. So when you go to animate the color of the words (the parent div of those characters) it won't work correctly because you've set the color at a more specific level. One fix would be at the end of your intro() timeline you can use clearProps to get rid of that color on the characters. Hopefully that helps. Happy tweening.
  16. 6 points
    If you're going the SVG route, then you can move a lot of code into SVG markup. You can also use software like Adobe Illustrator or Inkscape to generate SVGs. JavaScript doesn't have movie clips and a lot of other stuff like AS3 does. Well, some canvas libraries do, but if you want something similar to a movie clip with SVG, you'll probably need to code up your own version. Maybe something like this. You can set the visibility of the path, and start and stop the animation.
  17. 6 points
    I'll have to agree with Carl here, it really seems to be excessive and a bit convoluted at the moment. Even though I have been following this adventure of yours for a little while now, I am still struggling to visualise what is the journey you are trying to implement. What you are doing wrong, in my view, is trying to have one parent component controlling all its children behaviour. What you really need to do is to have the children take responsability for their own behaviour and only report to the parent whenever they acomplish something. Vue already has all the behaviour you are trying to achieve baked into the framework, you're just not really tapping into it. Currently your components are nothing but HTML templates when they should be self-contained components with their own data and logic. You should stop what you are trying to do at the moment, go back to the Vue docs and digest the different patterns already designed by the framework. Because, what you are describing here is basic routing but you are not following Vue's pattern for routing and transitioning between routes. Here's a fork of your pen after dieting.
  18. 6 points
    It's funny you should mention this as I still have worries about code from time to time. When I make a demo, I think "If Blake sees this, he's gonna think I'm a total goof. " I think I'm getting to a place now where I'm satisfied with my results. I can't imagine I'll ever be at the skill level of @GreenSock or @OSUblake and I'm fine with that. If everything in my code works as I'd like and I'm not repeating myself too much, I call it a good day. @Robert Wildling I work alone too and that can be challenging. But that's one of the awesome things about being a member of the GreenSock forum. We have access to a community of talented people from across the world who are here to help when we need it. Happy tweening.
  19. 6 points
    I don't. I worry about getting it working first. When I first started coding, I was constantly questioning everything I did because I was worried about writing code that did not fall under some set of "best practices", like I was going to be graded on it. It took some time, but one day I realized that I was spending most of my time trying to adhere to someone's opinion and I didn't know why. I was a cargo cult programmer. (hat tip to @Dipscom for showing me that term) https://en.wikipedia.org/wiki/Cargo_cult_programming DRY All this means is don't write the same code repeatedly. If you're typing a similar block of code more than 3 times, there's a good chance you can refactor it into a single function/method or other mechanism like a loop. If it's too hard to refactor, makes your code harder to read, or adds unnecessary complexity, then it might not be worth the refactor. SPEED Google some of the problems with premature optimization. GSAP is already highly optimized, so there's not much you can do to make it run faster. If performance is a problem, then you should look at the properties you're animating. Anything that triggers a layout or paint is a potential bottleneck. https://csstriggers.com/ https://gist.github.com/paulirish/5d52fb081b3570c81e3a SETTINGS Your settings object is way too granular. It looks like you're defining your entire app inside of it, and it's very hard to follow because it's nested way too deep. The advice @Sahil gave about breaking it down into specific settings is a good idea. You may also want to look at using Object.assign() for default or extending settings. Why does that irritate you? Sure, querying the DOM can be slow, but I think what @PointC did in his Star Wars demo is fine because it's all done upfront, and he has no need to reference any of those elements again. Once an animation is created, it's not going query the DOM again, but you can always pass a real element into a function. And note that keeping references to objects can lead to memory leaks if you're not careful. The elements that you're storing in your settings object are going to remain there until you remove them.
  20. 6 points
    To normalize the time, you would have to base the size on the center of the circle to the furthest corner. You could probably change the timeScale, but if you're going that far into calculations, you might as well just set the correct size. All the circles here will finish at the same time. There's lot of uses in trigonometry. The relationship is like this. To get the diagonal of a 200 x 200 square. 200 * Math.SQRT2 = ~283 To get half the diagonal of a 200 x 200 square. 200 * Math.SQRT1_2 = ~141.5 If you know the diagonal is ~283, then the length of each side is 283 * Math.SQRT1_2 = ~200 Math.SQRT1_2 is the same as sin 45 Math.SQRT1_2 === Math.sin(45 * Math.PI / 180) If you've ever heard of the golden ratio, √2 is used for the silver ratio. https://en.wikipedia.org/wiki/Silver_ratio
  21. 6 points
    onReverseStart() is pretty thoroughly discussed in these threads. Happy tweening.
  22. 6 points
    1. On line 125 you were passing function to the timeline instead of executing it. Once you execute the function, it will return the timeline instead of function itself. In your case child timeline was never getting added to parent timeline. 2. When you reverse the animation, it just reverses nothing more. If GSAP tries to do anything else, it will just create same problems when you will try to create two separate timelines for play and reverse. 3. Safest way to approach this is, create two timelines. If user interrupts, then just reverse ongoing animation. If there is no active animation then use alternate reverse animation. Little punishment to user for interrupting. 4. @GreenSock can comment on that. Usually we avoid pens with hundreds of lines of code, I just gave it a try because you seemed frustrated in other thread. Hope this helps you.
  23. 6 points
    You can post your code here, while editing you will notice there are buttons at the top of editor. 7th button lets you paste code, but avoid posting more than 30-40 lines. You can also use codepen or something else if you prefer, where we can see your code and edit it as well. The link @GreenSock posted shows you step by step guide about how you can use codepen to post your demo. So far it is not clear what your question is about, 1. Are you trying to animate HTML elements like Div etc? 2. Are you using canvas or any library like p5js? 3. Which course or tutorial you are studying using Khan Academy? So we can guess what you are actually trying to do.
  24. 6 points
    Let me use my psychic powers. It's unclear if GSAP is being used, but I am seeing p5.js. That's the only thing I know of that uses a draw() function. We don't get a lot of questions about p5.js, but it's pretty to easy to animate with GSAP. I remember helping somebody with p5.js here.
  25. 6 points
    Hi @Tompy and welcome to GSAP There are a few things going that may be the issue, depending on my understanding of the issue your having and the desired outcome you want. If you want the labels "NUMBER1", "NUMBER2", etc. to only appear on a click of "back", or "next" ... here are some fixes. 1. Your javascript uses var back = document.getElementById("back"); var forward = document.getElementById("forward"); But your HTML had no id's on those elements. 2. Your looping because your Timeline's are set to call() the next/previous timeline setup which in turn are free to play through and make the next call() 3. Your onclick handlers had an issue (noted in the JS comments) 4. In previous() your --index logic was looking to see if index was less than the length of the array ( should be greater than -1 ) And I just made a quick assumption that you would like "NUMBER1" to run through on page load (I could be wrong there)
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up