Jump to content


Popular Content

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

  1. 6 points
    That probably isn't the best use case for the ModifiersPlugin. It's ideal for stuff that might change on every animation frame. For a shiver effect, using scale and rotation might work better.
  2. 5 points
    Check out demos in following thread, you can achieve it with little bit changes.
  3. 4 points
    Sure. It's an animation so you can pause and play it whenever. However, if you want to stop it when the lerp is done, then using rAF might be the most straight forward way. Also, you can simplify your calculation like this. function render() { rAF = null dx += (sx - dx) * 0.1; dy += (sy - dy) * 0.1; cursor.style.transform = `translate3d(${dx}px, ${dy}px, 0)` rAF = window.requestAnimationFrame(render) } It's a shorter version of your lerp function. function lerp(a, b, n) { return a + (b - a) * n; }
  4. 3 points
    You can update Draggable using timeline's progress. You might want to tweak some calculations but this should get you started. The onDrag calculation assumes your page only contains the draggable. Maybe you will be able to use Scene's enter event and some element's height to do the calculation if you will have other content on page.
  5. 3 points
    Draggable has it's own x and y properties. So in situations where you animate element that is draggable, you might want to update draggable to reflect element's current x and y translate. You can do that using update method. Or you can apply bounds by passing first parameter to true. The second parameter is sticky which is useful when you change element's parent as you are dragging, if you set it to true then element will stick to pointer even if element's parent changes. I was creating a demo, but looks like @OSUblake responded already.
  6. 3 points
    It's not common, but you'll know when to use it. Click anywhere to start dragging. It will move the box to your cursor. Now comment out this.update() and see what happens.
  7. 3 points
    Hehe. But those are giant bees, with a stinger larger enough to impale a human. Bees usually aren't a problem where I live either. The main reason I used them is because I already had an animation for them in this post.
  8. 3 points
    The variable txt1 and the element #txt1 are not the same in this case. The variable txt1 is an {object}. Try a console.log(txt1) and you'll see the chars array, elements array and all the other properties that make up the SplitText. Does that make sense? Happy tweening.
  9. 3 points
    Hi @dada78 The reason it didn't work on the banner element is because it's not the parent. When you split the text into divs, the #txt1 element is the parent of all those new divs. If you set the perspective to 200 on the #txt1 div you'll see that it works without the extra CSS browser prefixes. Also note that's exactly what you were doing with your extra CSS. You added them to the #txt1 div and not to the banner. That's why it worked. Hopefully that makes sense. Happy tweening.
  10. 2 points
    If you want to watch it in slow motion and watch for the weird flicker you can set a slow timeScale. var modalCloseSurveyTl = new TimelineMax({ paused: true }).timeScale(0.1); You could also use GSDevTools to scrub the timeline and watch for anything odd. Edit: looks like we posted at the same time. Glad to hear you fixed it.
  11. 2 points
    hmmm... I didn't see anything odd on reverse so I'm not sure about that. Maybe someone else sees something weird and will jump in with an idea. Happy tweening.
  12. 2 points
    You're good. I really wasn't replying to your comment, which is good. I've noticed problems with ES6 imports too. I brought up the SSR because that causes problems with GSAP because window and document will be undefined. https://nuxtjs.org/faq/window-document-undefined
  13. 2 points
    I might have replied on the wrong thread, but saw multiple instances where people (including me) had difficulties with simply using the plugin in Nuxt. Not because of SSR, as such, but because Nuxt apparently doesn't allow ES6 imports. Just trying to help.
  14. 2 points
    Most of the problems people are having with nuxt is that it does Server Side Rendering (SSR), so client side scripts like GSAP may not run correctly. I think you have to setup your project as a Single Page Application, put client side scripts in the head, or create a vendor bundle. https://nuxtjs.org/api/configuration-build#vendor
  15. 2 points
    Looking good @makis2404. Here's some new techniques for you to study and practice. @Carl wrote this guide so you can learn to write modular code and not repeat yourself. I think you'll like it. Have fun. https://css-tricks.com/writing-smarter-animation-code/
  16. 2 points
    Hi Jaquie, Welcome to the forums. I commend you for wanting to try to figure this out for yourself. This definitely is a little bit of an advanced challenge for a beginner, especially with the viewport units, but you did a fantastic job. As always, wonderful assist by @PointC.
  17. 2 points
    Great job on finding all the info and getting this started. Thanks for the demo too. You can use kill() if you want, but in this case I'd probably just clear() the timeline. The only error I saw in your pen was using parentheses on your resetTimeLine() function. That will call that function immediately. For an onComplete callback you just use the function name without parentheses. // change this tl.add(TweenMax.to($('#redSquare'),1,{y:0,onComplete:resetTimeLine()})); // to this tl.to('#redSquare', 1, {y:0, onComplete:resetTimeLine}); You can also shorten up your tweens a bit by not using the add() method or the jQuery selector. // this can be shortened tl.add(TweenMax.to($('#redSquare'),1,{y:'+='+ toPX(2)})); // to this tl.to('#redSquare', 1, {y:'+='+ toPX(2)}); Not that what you did was wrong. It works perfectly fine. I'm just trying to save you some typing. In your if/else statement you are adding the tween back to y:0. With rapid clicks/presses that will add multiple duplicate child tweens to that timeline. In this case it won't matter since the first one added will trigger the onComplete function and clear() the timeline, but you could add some logic to prevent those duplicate tweens from being added if you like. Hopefully this info helps. Happy tweening.
  18. 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.
  19. 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.
  20. 1 point
    Yeah, its really hard to know exactly what you mean without seeing some sort of reduced test case. PointC is exactly right, you can add your tweenFromTo()s to a timeline and that might do the trick for you. Its important to note though that if you skip over a tween in a timeline it is still going to render in its end state. You sort of eluded to the fact that you understood this when you suggested "soft-removed" In other words if you have a timeline that tweens 3 colored elements like tl.to(red, 1, {x:100}) .to(blue, 1, {x:100}) .add("greenStart"); .to(green, 1, {x:100}) .add("greenEnd"); if you do a tween like tl.tweenFromTo("greenStart", "greenEnd") you are still going to see red and blue at an x of 100 because when the playhead jumps to "greenStart" those first 2 tweens will need to render in their end state. -- Without knowing more about your project I wouldn't put all my tweens in 1 timeline if I had to skip parts of it, I would create 3 different timelines and then build another timeline built of tweenFromTo()s of those timelines so imagine you had var blue = new TimelineMax() var red = new TimelineMax() var green = new TimelineMax() and each of those timelines had a label of "start" and "end" at the start and end respectively. I would then build a timeline like var master = new TimelineLite //play through blue, red, and green in direct succession master.add(blue.tweenFromTo("start", "end"); master.add(red.tweenFromTo("start", "end"); master.add(green.tweenFromTo("start", "end"); //play blue and then green BUT skip red master.add(blue.tweenFromTo("start", "end"); master.add(green.tweenFromTo("start", "end"); Hopefully that helps. Again its likely we might be misunderstanding something, so feel free to post a simple demo if you need more help.
  21. 1 point
    If I understand your question correctly, I'd probably use the tweenFromTo() method. You could add those to a master and play() it. Maybe something like this: master.add(tl.tweenFromTo(0, "skipStart")); master.add(tl.tweenFromTo("skipEnd", tl.duration())); I have no idea what you're animating, but that could result in harsh jump of your elements. Happy tweening.
  22. 1 point
    Oh wow, @Sahil, this totally makes sense now, with the use of scrollTo to trigger the scrollMagic with the nested timelines. Thanks so much for your help!
  23. 1 point
    A little trick I learned from Professor @Carl: Use a set() tween to set the height to auto and then immediately start a from() tween than animates from your desired starting value. (40px in your case) More info in this thread: Happy tweening.
  24. 1 point
    Yes! 🤸‍♀️🤸‍♀️🤸‍♀️ Thank you so much! @PointC
  25. 1 point
    Hi @nino-la Welcome to the forum. I'm not following your question completely. I don't see any scale tweens in your code. All I see are opacity tweens. Scaling an SVG element shouldn't move other elements around it. You'd need to set the transformOrigin to center, but it should work fine. I don't understand the part about 0.2 seconds. Are you wanting all those tweens to start at the same time? If you added a class to all those groups you're tweening you could shorten your code quite a bit and use a simple stagger. It would give you a lot more control. Any more details you could provide would be most helpful. Happy tweening.
  26. 1 point
    Thank you so much, this is really helpful! Also, love GSAP and the forum!! - I'd spent a day getting the animations just right with CSS animations only and it just didn't work; and it's so easy with GSAP. [I'm using this for a research study; experimental psychology] I have one more question; I don't quite understand what you're saying here about the problem with the if/else statements and rapid button presses. Do you mean that I could be adding too many tweens somehow if the person presses the button before an animation has finished? (It looks like it's running ok - what is the best way to see what I have in my timeline after a few button presses? I've tried 'tl' in the console, but there is a lot of information, i can't quite figure out where the timeline elements are?)
  27. 1 point
    I don't understand. What is your expected behavior and what problem you are facing?
  28. 1 point
    Agreed. That's awesome and a great way to learn. 👍 I nearly fell out of my chair when I read that you didn't want to have the answer given to you right away. Happy tweening.
  29. 1 point
    This is a good one to bookmark for all the notes, changes, fixes and improvements for each version. https://github.com/greensock/GreenSock-JS/releases Happy tweening.
  30. 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!
  31. 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.
  32. 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.
  33. 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
  34. 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.
  35. 1 point
    Check out CustomWiggle. It's great for that sort of thing. https://greensock.com/wiggle-bounce Happy tweening.
  36. 1 point
    Is this what you needed? Happy tweening.
  37. 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.
  38. 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.
  39. 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.
  40. 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
  41. 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
  42. 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.
  43. 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.
  44. 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
  45. 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.
  46. 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
  47. 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!
  48. 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?
  49. 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.
  50. 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
  • Newsletter

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