Popular Content

Showing content with the highest reputation since 01/12/2019 in all areas

  1. 5 points
    Hi, I don't know if this is the ideal way of doing it, but the best approach I can think of is to create a reference to the timeline instance in the data() callback: data() { return { tween: new TimelineLite({ paused: true }) }; }, Then in the mounted hook, add the instances to the timeline: mounted: function() { this.tween .to(this.$refs.appLogo, 2, { rotation: 360 }) .reverse(); } And finally in the methods object define a method to play/reverse the instance: methods: { toggleLogoTween: function() { this.tween.reversed(!this.tween.reversed()); } }, Here is a live reduced sample: https://codesandbox.io/s/l261n378km Happy Tweening!!
  2. 4 points
    You might be able to segment the tail of your arrow up into several paths that each autoRotate on their own to achieve something similar. It'll probably take a lot of trial and error with some other properties to get where you'd need, though, and may be tough to get the curve as smooth and your illustrated sample. Think on these lines: https://codepen.io/lukasoe/pen/YNEoQR https://codepen.io/pmk/pen/YPdJax Otherwise, you could do several morphs, or a sprite map as mentioned above. Here's a sample of a sprite animation that I created just using GSAP's stepped ease.
  3. 4 points
    Although there are probably many ways to approach it, the demo below from @OSUblake should give you an idea of the level of complexity involved in something like that:
  4. 3 points
    Ah, sorry about the confusion there, @adamQ. There was a new feature we're working on in 0.9.0 that needed one minor tweak. That should be fixed now in that codepen flavor of the MorphSVGPlugin. If you refresh, it should work well now. Does everything look okay to you in the Microsoft browsers?
  5. 3 points
    Hi, Honestly I don't know how that can be done with just GSAP. Perhaps using ThreeJS and GSAP but I know nothing about ThreeJS. What I can tell you is that this particular letter: Was handed to my by a client as a PNG sequence. It is used in Streammm which is a native App. I worked on the front end that uses GSAP and PIXI, so my first guess is that this could be made using a 3D rendering software or engine. Here is the map used to create the animation in PIXI: I'll ask my client about the origin of the image and let you know just in case. Sorry that I can't help you beyond this. Happy Tweening!!!
  6. 3 points
    You're welcome. Well is just a pattern that you'll see quite a bit here in the forums and some bits I gathered throughout my time here. First unless is necessary I always create Timeline instances paused, because otherwise the time is already running and the playhead is moving forward. Granted, normal JS execution to add the instances might take only a few milliseconds but in some cases that could cause some unexpected behaviour. Now I'll jump forward to this: tl.reversed( !tl.reversed() ); Reversed is a getter/setter of the reverse status of a GSAP instance. By default all GSAP instance are created and going forward, therefore by default reversed() returns false. Since I'm using reversed() as a setter (by passing the opposite value) I need that the reverse status of the timeline to be true. Now since I created the timeline paused the playhead won't go anywhere unless I change that, hence I add a reverse() call at the end of the timeline. Now the timeline is paused, so I'm telling the timeline: "Go from being paused to play backward", but since the timeline is at zero seconds and negative time doesn't exists (although @GreenSock and/or @OSUblake might be working on that ) the timeline stays put at zero seconds and the reversed() value is true. Then on the first click (or any other event that triggers it) I toggle the reversed() value to false, which tells the timeline to go forward and so forth. Basically is just a way of doing it without the conditional block in it, which saves a tiny amount of time and a couple of lines of code. Hopefully this makes things more clear about it. Happy Tweening!!!
  7. 2 points
    Aha! That may be the key. I wonder if either the external CSS files haven't fully loaded at that time yet or perhaps they don't contain the style you think they contain. Again, I really wish you could provide an actual reduced test case that we could see for ourselves. I'm not sure we can do much else without that. I'd bet that if you put the styles directly in the page it'd work, though I know that may not be ideal in your scenario.
  8. 2 points
    Just in case anyone stumbles upon this and needs this as a solution, here's how I decided to handle setting up Custom Bounce and CustomWiggle. In my settings, I only allow up to 100 levels of variance so when the app opens this gets run. function createWigglesBounces() { let types = ['easeOut','easeInOut','anticipate','uniform','random']; for( let type of types ) { for( i = 1; i <= 100; i++ ) { CustomWiggle.create(`Wiggle.${type+i}`, {wiggles:i, type:type}); } } for( let strength = 1; strength <= 10; strength++ ) { for( let squash = 1; squash <= 6; squash++ ) { CustomBounce.create(`Bounce${strength}.sq${squash}`, {strength:strength*.1, squash:squash}); } } } Then, I can call the ease like this: let wiggleType = 'random', numWiggles = 20, wiggleVariance = 10; TweenMax.to(element, duration, {rotation: wiggleVariance, ease: `Wiggle.${wiggleType}${numWiggles}`}) /* or for bounce let cbStrength = 5, cbSquash = 3; ease: `Bounce${cbStrength}.sq${cbSquash}`; */
  9. 2 points
    I'm sure we could help if we can see your actual project or a codepen demo (even better). It's just so hard to troubleshoot blind like this. I really want to help, but my hands are tied. That error almost sounds like CSSRulePlugin wasn't loaded (which is odd because you're referencing it directly in that "plugins" const).
  10. 2 points
    Thanks for posting your output error. What is the version of GSAP you are using in that bundle.js? Also what OS and OS version are you testing this on? :)
  11. 2 points
    Sorry to hear about the trouble. Is there any way you could provide a reduced test case in codepen or something so that we can see what's going on? We'd love to help, but it's tough to troubleshoot blind. I doubt this is the main issue, but I was wondering if maybe tree shaking was getting rid of CSSPlugin in your bundler or something. If so, simply reference CSSPlugin somewhere in your code as we describe in the docs: https://greensock.com/docs/NPMUsage I also wonder if it'd help at all to use two colons, like .header__outer::after. I doubt it, but it's worth a shot.
  12. 2 points
    Hey! Thank you for the speedy reply. Everything is all set in both IE and Edge now it appears. Excited for the new features. Cheers.
  13. 2 points
    Hi @Yashi-2 and Welcome to the GreenSock Forum! Make sure that your the CSS rule used in your getRule() method is the exact same CSS rule used in your CSS stylesheet. So since you have the following getRule() : getRule(".header__outer:after") your CSS stylesheet should also have the following: .header__outer:after { } Happy Tweeening!
  14. 2 points
    Hi, I don't know if this is completely related to webpack. The error comes from the css rule returning null. Unfortunately the information you're providing is not enough to get a complete idea of what you're trying to do and your setup. If you're working with React, or VueJS this thread could help you: Here is a live sample: https://stackblitz.com/edit/gsap-react-pseudo-element-tween Beyond that is not much I can do to help you. Happy tweening!!
  15. 2 points
    Also you could just draw your branch and leaves as an svg in illustrator / sketch and do some animations where they scale And fade in. Probably best to to post a demo of what you are working with.
  16. 2 points
    Here I leave a repo in GitHub with a React Native demo app and some explanation about how to implement the plugin in your project. The performance using Direct Manipulation is really good, specially when compile our apps in a release version. https://github.com/tufik2/TweenMaxRN Video: https://www.dropbox.com/s/ioghw2t7ua5agpn/video.mp4?dl=0
  17. 2 points
    The best thing to do is read as much as the documentation as possible I think you'll be surprised at the level of detail that is put into the explanations. However, the primary focus of the docs is on how to use the API. Discussing the overall design and decision-making process that went into the API is probably better suited for an article some day. FWIW there is an extremely detailed article discussing how GSAP uniquely handles animating transform values that will be launched in the not-so-distant future. Also, go through the blog posts, even ones a few years old. https://greensock.com/blog/ Lots of important info in those. --- I just guessed for the 0.2 second delay. A set() has 0 duration so in order to read the value that was set, it's best to wait for the next tick of the engine (which runs at 60fps) to be able to read it. I could have put a call() in the timeline also at a non-zero time as well.
  18. 2 points
    To change an attribute use the AttrPlugin https://greensock.com/docs/Plugins/AttrPlugin It's included in TweenMax midi_tl.set(document.getElementById("__midi"), {attr:{fan:360},width:100})
  19. 2 points
    Thanks a lot. That works exaclty how expected. Just to clarify. Why do you add the reverse() function at the end of the mounted hook? Will it add the ability to reverse the timeline in general? If I'm not mistaken the methods is the same as. if ( !this.textTl.reversed() ) { this.textTl.play() } else { this.textTl.reverse() } Am I correct?
  20. 2 points
    Apologies for late reply!! That wraps it up!! You rock!! Thank you so much.
  21. 2 points
    Hello @mdo and Welcome to the GreenSock Forum! The issue is due to how the <span> element CSS display property works which defaults to inline, as well as how opacity works. Not to mention that the text is aligned to center. So since your using opacity: 0 that will just fade out but the element will still take up the same about of space in the DOM. So i added the CSS property display: "none" in the tween which will automatically add the display: none property after opacity reaches 0. GSAP is smart enough to do that I changed opacity with GSAP special property autoAlpha for better performance (See below for more info). Along with adding the CSS width property so it can be smoother. I also added autoRound: false so width can animate on a sub-pixel level instead of round whole numbers. Of course there could be more done to try and animate the static non SplitText text separately and in sync with the SplitText text. But hopefully this all makes sense: Keep in mind that i changed opacity to autoAlpha for better performance. See CSSPlugin Docs on what autoAlpha is. https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha autoAlpha: Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Happy Tweening
  22. 2 points
    Hi @namisuki, I have integrated another motif and for a better overview in the code an array for the motifs: var images = [ "url('https://tympanus.net/Development/BookBlock/images/demo1/3.jpg')", // tiger images[0] "url('https://tympanus.net/Development/BookBlock/images/demo1/4.jpg')", // deer images[1] "url('https://tympanus.net/Development/BookBlock/images/demo1/1.jpg')", // elephant images[2] "url('https://tympanus.net/Development/BookBlock/images/demo1/2.jpg')", // elephant images[3] ]; Some hints: the first motif is defined in the css the 2nd motive under iClick === 1 ... initial = current next = next last = the previous one that disappears under the stack Add another motif: complete the array with the url an additional condition if ( ... adjust in the previous the next image adjust: if (iClick> 3) iClick = 0; // "3" = total number of images - 1 Delete a motif: delete the condition for this motif adjust in the previous the next image adjust: if (iClick> 3) iClick = 0; // "3" = total number of images - 1 Just a little trial and error ... Good luck Mikel
  23. 2 points
    I just added a little blurb to the docs to make that more clear
  24. 2 points
    hmm, the video you linked to is for helping people with a very specific and somewhat common scenario of having competing from() tweens on the same properties of the same object. For TimelineLite.set() and TimelineMax.set() immediate render is set to false by default (as long as the start time isn't 0) If a set() is scheduled to run at 4 seconds into the timeline it will not render immediately at a time of 0. The engine is smart enough to know that a set() at 4 seconds should wait until its scheduled time. Please change your demo to use this code: TweenLite.set("#demo", {visibility:"visible"}) // it is important to set immediateRender:false when multiple from()-based tweens are animating the same propreties of the the same object. var immediateRender = true; //switch to true to see the difference var tl = new TimelineLite(); tl.set(".green", {opacity:0}, 0) .set(".green", {opacity:1}, 2) .set(".green", {opacity:0}, 4); You'll see that the green item starts with opacity 0, switches to opacity 1 at 2 seconds and goes invisible again at 4 seconds all as expected. There is no need to change the default value of immediate render on any of those set()s in this situation.
  25. 1 point
    Hi Lauren Johnson , You can use a fromTo() to reverse the direction. Just flip the start percentages like this: TweenMax.fromTo(yourElement, 1, {drawSVG:"100% 100%"}, {drawSVG:"0% 100% " }); TweenMax.fromTo(yourElement, 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100% " });
  • Newsletter

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

    Sign Up