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. 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
  23. Yes! ?‍♀️?‍♀️?‍♀️ Thank you so much! @PointC
    1 point
  24. 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.
    1 point
  25. I don't understand. What is your expected behavior and what problem you are facing?
    1 point
  26. 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
  27. 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
  28. 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
  29. 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
  30. @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.
    1 point
  31. 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
  32. 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
  33. 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.
    1 point
  34. Check out CustomWiggle. It's great for that sort of thing. https://greensock.com/wiggle-bounce Happy tweening.
    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. 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
  40. 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.
    1 point
  41. 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
    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. 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.
    1 point
  44. 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
    1 point
  45. 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
  46. 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
    1 point
  47. 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!
    1 point
  48. 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
  49. 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
  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...