Popular Content

Showing content with the highest reputation on 08/10/2018 in all areas

  1. 2 points
    Based on Craig's pen if you wanted to make the shiver a bit more organic you can add some randomness to it like this using invalidate and Carl's idea of passing the value back as a function return. I'd be interested to know if anyone has a suggestion how to do this using modifiers, I ran up against the issue of how would you have the modifiers change the value only on repeat.
  2. 2 points
    If I had to do it without CustomWiggle, I'd do it with a rapid repeat rather than a Rough ease. Maybe something like this.
  3. 1 point
    Hi @JacquieS Welcome to the forum. You said you don't want us to tell you how to do it so I won't show you a demo, but the answer to your question is yes. It's quite easy with GSAP. I'll let you go through the docs to figure it out, but if you get stuck, we're here to help. Happy tweening.
  4. 1 point
    You can add them inside node_modules/gsap if that is fine for you. Adding them to a separate folder so you can track them will be a bit tricky. We had that discussion in following thread. Following is another thread with angular 2 that might help you.
  5. 1 point
    Hello @Spacefuel and Welcome to the GreenSock forum! This will be hard to debug without seeing your code in a live editable environment like codepen. Can you please create a reduced codepen demo showing us your issue, so we can test it live? But below are examples of animating fegaussianblur using the GSAP AttrPlugin to animate the fegaussianblur svg attribute. Another example animating fegaussianblur And adding fegaussianblur on an image Happy Tweening!
  6. 1 point
    The ZIP now includes src/bonus-files-for-npm-users/umd/CustomEase.js which you can put inside a local folder (/vendor/gsap/CustomEase in my example) and import that inside the component. import CustomEase from "../vendor/gsap/CustomEase"; And now works as intended.
  7. 1 point
    It works same in both versions to me in Firefox. In chrome it works as you are saying but that is incorrect behavior. It must be happening due to some quirk or incorrect values reported by Chrome. That's why it has been fixed, as 1.19 is 2 year old. You should group your all three parts together and animate that group instead. And use latest versions of files to get consistent behavior across all platforms.
  8. 1 point
    The bonus plugins are not hosted in any public repository. You will need to download them from your dashboard and add them manually to your project. Take a look at NPM usage page in the docs, that might help. https://greensock.com/docs/NPMUsage
  9. 1 point
    I'm not sure I followed all that, but hopefully this is what you needed. You can use jQuery's not() method to target all the elements except the one you clicked. http://api.jquery.com/not/ To remove the hover you can look into the off() method. http://api.jquery.com/off/ You don't necessarily need to reverse a timeline to make the elements exit. You can create a new timeline in the click handler to make them exit. You could also create multiple timelines outside of the click handler and just play() when needed. Lots of ways to make it happen really. Here's a fork of your demo. I'm not understanding the question about the close button. Your pen is targeting a variable called 'x' on line 23, but I don't know what that is. I'd need some more details about the desired outcome to be of any help on that part. Happy tweening.
  10. 1 point
    It's hard to say exactly because I can't see the whole SVG, but my guess is you are rotating the ellipse out of the SVG bounds. You're not specifying an x/y point for your rotation so the default origin is used. More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Rotate GSAP has no problem animating a relative rotation on an ellipse that has already been rotated. You should also look at SVG origin. https://greensock.com/gsap-1-16 Here's a quick demo. If you have other questions, please provide a demo rather than just a piece of your code. More info about that: Hopefully that helps. Happy tweening.
  11. 1 point
    You'll need to set the transformOrigin point. Please give this a try: Hopefully that helps. Happy tweening.
  12. 1 point
    Here's a quick clip-path version of your demo. I just eyeballed a polygon so it doesn't line up perfectly, but it should give you an idea how it works. Here are a couple good sources of info about masks and clip-paths. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking https://css-tricks.com/masking-vs-clipping-use/ Happy tweening.
  13. 1 point
    Hi @yulia , Again the hint: a CodePen would be very helpful. You may be able to try this: Everything you need can also be found in the docs. For example: .getLabelBefore () Happy tweening ... Mikel
  14. 1 point
    Hi @bcavenagh Welcome to the forum. You can target groups. I think scaleY is the effect you were looking for in your demo. But for a fill animation like that I think a clip-path or mask would yield a better animation. This is an answer to a different forum question, but shows the same concept. Hopefully that helps. Happy tweening.
  15. 1 point
    Hello @Daniel Eytan Schneider and welcome to the GreenSock forum! When i debug your code in Firefox I can see that it throws an error in the file sketch-3.js on line 131. TypeError: d is null TweenLite.set(noodle, { scale: scaleNoodles, transformOrigin: "center center" }); It seems that noodle variable might be null or other properties based on that null variable can be throwing other TypeErrors. noodle is declared on line 125, so something is happening with that. var noodle = document.createElementNS("http://www.w3.org/2000/svg", 'path'); You might want to insert or append your created SVG element in the DOM before tweening or setting any CSS properties, that might be causing your issue. But unfortunately like @GreenSock Jack advised its very difficult to debug minified code and especially code that is massively long to debug on a live site. You should reduce your code bit by bit, so you can eliminate the problem parts. This way you can narrow down your issue. Firefox is very picky when it comes to creating elements with createElementNS(). So try commenting out all your code, and slowly un-comment out different parts so you can find the problem. Happy Tweening
  16. 1 point
    Yeah, that's a good link from @Sahil to bookmark. Hand-coding is a good skill to have. Also keep in mind that you aren't limited to drawing the full line with DrawSVG. By drawing an interesting path and only showing a percentage of it you can add some style to the animation. Here's a quick example. Obviously that demo is just an 'x' to an 'x', but you could easily make a straight line animate into an icon using the same technique. If the paths are starting to get overly complex, you can also animate the start of one as the end of another completes. Using a Linear ease where the two meet will result in a smooth animation. That's what I did on my 'Need for Speed' demo. The line between the two text blocks draws itself to the beginning of the car outline and then the car outline draws into view. But with a Linear ease between the two, it looks like one continuous path. Hopefully that gives you some additional ideas. Happy tweening.
  17. 1 point
    That's due to how browsers handle text and inline-block elements. When you use SplitText, all text characters get split into div tags with their display set to inline-block so browser treats them as individual block. And if you use words as well to split, they are split into div tag and contain all the individual characters but an inline-block can't have more than 100% width. When you use revert method your text gets treated as block of words and text usually gets wrapped if it it can be wrapped or overflows the container. Check the following demo, to see how different length words get wrapped. I don't know what could be solution apart from ensuring that your words aren't longer than or equally wide as the container.
  18. 1 point
    Hello @smallio The only way to animate CSS :before and :after pseudo elements is to use the GSAP CSSRulePlugin like @Sahil advised. Below is an example of using the GSAP CSSRulePlugin to animate pseudo elements that are basically generated content that is not actually in the DOM. Please see the CSSRulePlugin docs: https://greensock.com/docs/Plugins/CSSRulePlugin Just keep in mind that when using the CSSRulePlugin you have to make sure you follow some guidelines: Only use the single colon syntax :before and :after. Do not use the new double syntax ::before and ::after Make sure that the CSS rule in your CSS is the same exact CSS rule used in your GSAP getRule() method so GSAP can find that same exact CSS rule in your stylesheet Happy Tweening
  19. 1 point
    The transformOrigin for html elements is at center. You can change it using percentage or by using left, right etc. For svg elements, by default smoothOrigin is true so lets say you change your transformOrigin your element will animate as if it already had that transformOrigin, in some cases you will want to disable that. On the other hand if you change transformOrigin for html elements, they will jump and smoothOrigin does not support html elements. To animate pseudo elements you could use CSSRulePlugin to select them and animate. But it can too tricky to work with them. For example if you define your rule as '.close span:after' then you will need to use that string to select pseudo element, you can't use 'span:after'. You would be a lot more comfortable using actual elements or SVG. https://greensock.com/docs/Plugins/CSSRulePlugin
  20. 1 point
    Fun!!! However I love bees, granted here in Chile we don't have those nasty killer ones, in fact you have to pester a bee quite a bit in order to get a sting, but still. Perhaps some trouble-making-looking wasps?
  21. 1 point
    Hi and welcome to the GreenSock forums. When starting up, using GSAP in a React app consist mostly in getting the DOM elements available for GSAP. The approach that React gives is using the ref callback to keep an instance of the DOM element available: https://reactjs.org/docs/refs-and-the-dom.html Here's a very simple example of that way to access an arrow and move it depending on the click target: The key is in this code: <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/arrow.png" className="arrow" ref={ e => this.arrow = e } /> The ref to the DOM element is stored in the component's constructor so it can be accessed to any method binded to the class instance, that's why we can use it in the click event handler of each box. Happy tweening!!!
  22. 1 point
    Well maybe start with something simple and then build on top of it. Simple examples are really good way to understand something more efficiently. Not sure if it will help but in first few minutes in following video I have explained how Draggable works.
  23. 1 point
    Do you remember this thread? I mainly showed the ModifiersPlugin, but there's nothing wrong with using rAF, particularly if you're managing a bunch of different events. If that's the case, you could use the ticker instead. https://greensock.com/docs/TweenLite/static.ticker The Pixi demo is using the ticker provided by Pixi, but it's the same concept.
  24. 1 point
    Hi @yulia, Here's an attempt to revise the slider variant for your purposes. The scroll function is only limited feasible: Best regards Mikel
  25. 1 point
    Hello alan0buchanan! Shameless plug here: I documented some of my pains and discoveries with React and GSAP in this thread. Although I am not using azazdeaz's library, you will see relevant gotcha's and solutions that you can adapt for you case. The solution to your problem is to use not ReactCSSTransitionGroup but ReactTransitionGroup - I'll refer again to my thread as there's some debate about when, why and shortfalls of it. Also, this CodePen might be of use. Happy Tweening!
  • Newsletter

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

    Sign Up