Jump to content
Search Community

Leaderboard

Popular Content

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

  1. 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.
    6 points
  2. Check out demos in following thread, you can achieve it with little bit changes.
    5 points
  3. 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 points
  4. 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.
    3 points
  5. 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.
    3 points
  6. 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.
    3 points
  7. 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.
    3 points
  8. 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.
    3 points
  9. 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.
    3 points
  10. 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.
    2 points
  11. 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.
    2 points
  12. 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
    2 points
  13. 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.
    2 points
  14. 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
    2 points
  15. 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/
    2 points
  16. 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.
    2 points
  17. 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.
    2 points
  18. 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 points
  19. 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.
    2 points
  20. 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.
    1 point
  21. 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.
    1 point
  22. 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!
    1 point
  23. 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.
    1 point
  24. Yes! ?‍♀️?‍♀️?‍♀️ Thank you so much! @PointC
    1 point
  25. 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?)
    1 point
  26. I don't understand. What is your expected behavior and what problem you are facing?
    1 point
  27. 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.
    1 point
  28. 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.
    1 point
  29. 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.
    1 point
  30. 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.
    1 point
  31. 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!
    1 point
  32. 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.
    1 point
  33. 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.
    1 point
  34. 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
    1 point
  35. Is this what you needed? Happy tweening.
    1 point
  36. 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.
    1 point
  37. 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.
    1 point
  38. You'll need to set the transformOrigin point. Please give this a try: Hopefully that helps. Happy tweening.
    1 point
  39. 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.
    1 point
  40. 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
    1 point
  41. 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
    1 point
  42. 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.
    1 point
  43. 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.
    1 point
  44. 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
    1 point
  45. 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?
    1 point
  46. 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!!!
    1 point
  47. 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.
    1 point
  48. 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.
    1 point
  49. Hi @yulia, Here's an attempt to revise the slider variant for your purposes. The scroll function is only limited feasible: Best regards Mikel
    1 point
  50. 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!
    1 point
×
×
  • Create New...