Leaderboard


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
    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!
  4. 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.
  5. 1 point
    @Jonathan Strangely all three demos behave same as OP's demo on windows in both Chrome and Firefox. Only your demo with 'white-space' works as solution. We all are like Human Browsers at different levels. @GreenSock and @OSUblake(with Canvas) are 100% Human Browsers. @Jonathan is 100% Human Browser with all cross browser support plus he comes with quirk modes as well.
  6. 1 point
    If I understand your question correctly, I think you're seeing the easeOut at the end and then the timeline starts again which looks a bit off. Since you're looping infinitely, I'd recommend changing to a Linear ease as your default. Please try adding this to line 1 of your code. TweenLite.defaultEase = Linear.easeNone; Hopefully that looks better to you. Happy tweening.
  7. 1 point
    Check out CustomWiggle. It's great for that sort of thing. https://greensock.com/wiggle-bounce Happy tweening.
  8. 1 point
    Is this what you needed? Happy tweening.
  9. 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.
  10. 1 point
    You'll need to set the transformOrigin point. Please give this a try: Hopefully that helps. Happy tweening.
  11. 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.
  12. 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
  13. 1 point
    Another 5th option is to add the following: #message div { white-space: nowrap; } It looks like the child div tags of #message are inheriting the CSS white-space property (from the browser stylesheet), which has the white-space property default of normal which always wraps. Hope this helps Resources: CSS white-space property: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
  14. 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
  15. 1 point
    I'd recommend scaling the .icon group rather than the wrapper around the SVG. I think that should sharpen things up for you. Happy tweening.
  16. 1 point
    Try handcoding SVG you will save a lot of time when it comes to simple shapes and lines like these. https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368
  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
    Hello @Rager and welcome to the GreenSock forum! Its always best to only run your animation when the DOM (HTML and or SVG markup is loaded and ready) and the window is fully loaded (images, links, fonts, stylesheets, js, and other media assets) Try this so you only run your GSAP code when DOM and Window is loaded and ready: // wait until DOM is ready (html and svg markup) document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, external JS, external stylesheets, fonts, links, and other media assets) window.addEventListener("load", function(event) { // makes sure it runs after last render tick window.requestAnimationFrame(function() { // GSAP custom code goes here }); }); }); Happy Tweening!
  21. 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?
  22. 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!!!
  23. 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.
  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