Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 09/19/2018 in all areas

  1. Hi @Robert Wildling I believe the negative value is the way to go. Similar recent question here and Jack's answer was a negative stagger value. Happy tweening.
    5 points
  2. By last image I guess you mean '#blackimg'? You are writing two tweens with delay of zero on same element and trying to animate same property. So whichever tween was executed last will overwrite previous tweens for same property. If that doesn't answer your question then post a codepen demo. Also, you should use timeline for that instead of trying to achieve it by using delays.
    5 points
  3. Here's some pens that you may find useful. These use a proxy element. These track velocity. I used the VelocityTracker.track() method because reasons, but it's the same thing as the ThrowPropsPlugin.track() method.
    5 points
  4. Sometimes you have to make sacrifices with animations. Google wrote an article about doing a crossfade blur for better performance. https://developers.google.com/web/updates/2017/10/animated-blur
    5 points
  5. Working with 50 timelines wouldn't be hard. I think the problem you might be having is wrapping your head around "this", and that's not uncommon. Everybody struggles with "this", and I do mean everybody. You should look at what "this" is in your component. Vue creates a flattened object from your component code. console.dir(this); You're not calling the allAnims method. A call will have parenthesis after it. It might help if you view your methods without the ES6 syntax. Methods are functions, and you can't add a dot (chaining) after calling a function unless something is returned. Adding your animations to "this" allows you to access them from other methods. methods: { allAnims: function(refs) { this.logoAnimation = refs.Logo.animateLogo().pause(); }, play: function() { this.logoAnimation.play(); }, reverse: function() { this.logoAnimation.reverse(); } }, mounted: function() { this.allAnims(this.$refs); // WORKS this.play(); } https://codesandbox.io/s/3vrnv37rvm
    4 points
  6. If you name that tween, you'll be good to go. var tween = TweenMax.to("#tile", 8, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone}); $("#pause").click(function() { tween.pause(0); }); Happy tweening.
    4 points
  7. I love a challenge, so I took a crack at it here: Notice that it skews in a more natural way based on where you grab it, so if you grab the top, it'll skew in the direction you pull and if you grab on the bottom, it skews the other way so that it feels like it's being pulled by the mouse similarly. It uses a proxy as well as velocity tracking. I made it stop immediately whenever the user presses down while it's moving too, killing that lerp stuff. Hopefully it feels pretty natural. Does that help?
    4 points
  8. I was actually considering hyperlinking VHS and VCR but figured those kids would just ask Siri or Alexa.
    4 points
  9. Love this analogy! I'm wondering if it would work with young people.
    4 points
  10. Here's a tip. Don't position stuff you're going to move where you initially want it. If you drew your tile at 0,0 or centered on 0,0 you could easily move it to a coordinate on your polyline without any issues.
    4 points
  11. If you use killAll, it will kill all your other animations from entire page. Can't you just pause your timeline like you do on mouseleave? The reduced test case you posted doesn't show why you will want to kill your animations. I would suggest posting another simple demo that shows why you need to kill animations.
    4 points
  12. Hi and welcome to the GreenSock forums, The easiest way to get something to follow a polyline would be to use MorphSVG to convert your path data from your polyline to an array of points and then pass those points to the BezierPlugin as explained here: https://greensock.com/path-animation I made a demo showing how that would work var path = MorphSVGPlugin.pathDataToBezier("#route", {align:"#tile"}); console.log(path); TweenMax.set("#tile", {xPercent:-50, yPercent:-50});// center tile on path TweenMax.to("#tile", 8, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone}) If you want to use MorphSVG you can upgrade your membership to a Shockingly Green via your account dashboard /// If you want to manually translate the coordinates of your #tile so that you can animate to coordinates on your line please read this post (especially blake's final demo) You'll see that each chicken animates from the center of the box.
    4 points
  13. It's being returned, but you're not saving it. Maybe like this. methods: { play() { if (!this.logoAnimation) { this.logoAnimation = this.$refs.Logo.animateLogo(); } else { this.logoAnimation.play(); } }, reverse() { if (this.logoAnimation) { this.logoAnimation.reverse(); } } } https://codesandbox.io/s/p7jj9k977x
    4 points
  14. Your animations aren't aware of your draggable. You can use the ModifiersPlugin if want to use the same function.
    4 points
  15. I like the stretchy animation you did. Reminds me of some stuff from Material Design. https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1-3y3zLHPlV3wg-v2CmlB44qg9nLmldet%2F04-elasticity-spectrum.mp4 https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1PONTdRB2Ywa5Meme5pqbV35bRKFrqHLO%2F04-elasticity-basil.mp4 I like this calendar. If you click in the same row or column, then it will stretch to it, otherwise it will fade out and then fade in to where you clicked. https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1KL_-_R_BNLknpF2PtR-z7999Yl1d3Zwk%2F04-elasticity.mp4
    4 points
  16. It's not a bonus file, so you should be able to import it from "gsap/all" or "gsap/ModifersPlugin".
    3 points
  17. Thanks guys, with your comments our customer could get convinced that it is not a good idea to blur a 500kb image. They still wanted it and I ended up doing it the dirtiest way I could imagine, but it works fine. What we do now is crossfading a blurred image and an unblurred version. No code example, because I think this should not reproduce. This comment is meant as a thank you. Keep up the good work!
    3 points
  18. You're actually right. I still have to dive into DrawSVG, so I might do that right now. Thanks a lot!
    3 points
  19. HI @WiljeOnline Welcome to the forum. Your SVG is centered in that block, but your path is drawn far outside the bounds. I added a simple rectangle to the second SVG to show that it is indeed centered as it should be. To solve the path problem I just added this line: TweenMax.set("#path3", {x:-348, y:-215}); Here's a fork of your pen. Hopefully that helps. Happy tweening and welcome aboard.
    3 points
  20. Keep in mind @emilychews, that under the hood GSAP uses document.querySelectorAll() for the tween target parameter. So this way you just simply put your CSS selector in your tween target. This way you have less code to write tl.from(target, duration, vars); The target can accept a string also to put your CSS selector: tl.from(".page-1", 1, { y: 10, opacity: 0.3 }) Taken from the GSAP from() Docs: https://greensock.com/docs/TweenMax/static.from() target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). Happy Tweening
    3 points
  21. Hi, You're not missing anything stupid at all. You're just the latest victim of the las update by React (starting in versions 16.5.x) that causes an issue when using GSAP's Draggable. Just add dragClickables: true in your Draggable instance and it will work: export default class App extends React.Component { componentDidMount() { this.draggable = new Draggable(this.draggableRef, { type: "x,y", dragClickables: True }); } render() { return ( <div ref={ref => {this.draggableRef = ref;}} style={{width: 100, height: 100, background: "#f00"}} /> ); } } Another alternative is roll-back to React 16.4.2 For more details and information about this issue, please refer to this post: And this issue in React's repo: https://github.com/facebook/react/issues/13654 The next release of GSAP will have this fixed. Happy Tweening!!!
    2 points
  22. That's odd. I've never once had any problems understanding "this". ? It is a weird thing to wrap your head around. I bumped into this post a few months ago and bookmarked it. It's a good read. https://tylermcginnis.com/this-keyword-call-apply-bind-javascript/
    2 points
  23. Yep, using a negative stagger is absolutely fine - it'll go through the array in reverse order.
    2 points
  24. Thank you very much PointC!! So helpful. Love learning about GSAP - it's amazing.
    2 points
  25. Welcome to to the forum. Your timelines have already played so an easy fix is to play(0) like this: $("#blue").click(function(){ Anim3.play(0) }) ; $("#red").click(function(){ Anim4.play(0) }) ; Happy tweening.
    2 points
  26. Thanks for the demo. I don't know much about vue so I can't address anything related to how things are set up, but I managed to find the issue. Each time you are calling this.$refs.Logo.animateLogo() you are creating and returning a new timeline. Calling reverse() on a newly created timeline only changes the direction of the playhead (reversing it). Your newly created timeline has its playhead at a progress of 0 (the beginning), so reversing it doesn't really do anything that you can see. Imagine going back in time a few years and opening up a fresh new VHS tape. If you put the VHS tape in the VCR and pushed the rewind button what would happen? nothing. You would need to play forward in order for it to rewind. Same thing applies to what you are doing. In your code you are doing this methods: { play() { console.log("Clicked play") this.$refs.Logo.animateLogo() }, reverse() { console.log("Clicked reverse") this.$refs.Logo.animateLogo().reverse() // not good } } but you can advance the playhead to the end before reversing by doing this methods: { play() { console.log("Clicked play") this.$refs.Logo.animateLogo() }, reverse() { console.log("Clicked reverse") this.$refs.Logo.animateLogo().progress(1).reverse() //better } } demo here: https://codesandbox.io/s/lrzp0p817q
    2 points
  27. Thanks @Sahil this is a very good demo for me to start! ?
    2 points
  28. Sure, it's totally doable but I don't have time right now to rebuild it all for you from scratch. You could just use an invisible <div> that's on top of the images as a proxy of sorts, and just tween the position of the "real" element(s) to match the proxy. And since you're a Club GreenSock member, you have access to ThrowPropsPlugin which can track (and report) velocity of anything, so you could tap into that inside of an onDrag or something. https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.track() Hopefully that gets you going in the right direction. Let us know if you need anything else.
    2 points
  29. 2 points
  30. PS Since you're a Club member, I'd also recommend using DrawSVG for this effect rather than calculating the path length and animating the dashoffset manually like that. It'll make your life a whole lot easier. Happy tweening.
    2 points
  31. Hm, it's very difficult to troubleshoot blind and it's odd that you can't replicate the issue in codepen, but it almost sounds like when the transformOrigin is being set, the element has a zero width/height. Have you tried using a TweenMax.fromTo() instead of two calls, a set() and from()? That'd give you the most flexibility to specify exactly what you want things to start and end at. If you still need some help, it'd be super incredibly helpful to see a demo of it not working somehow
    2 points
  32. Some browsers apply pixel snapping which makes scaling jerky - you can force the browser to avoid the snapping by rotating the image slightly, even like 0.1 degrees. And for the record, the SVG spec doesn't allow 3D, so setting z:0.01 doesn't do anything for you
    2 points
  33. I think @Sahil has found a way into the "Blaketrix". He grows more powerful every day. Excellent work! ?
    2 points
  34. Hi @emilychews If I understand your question correctly, you could do this: var page1; if(page1){tl.from("#box2", 1, {y:10, opacity: .3}, "start");} Does that help? Happy tweening.
    2 points
  35. @Carl Thank you for your excellent explanation. Could it be that your link leads to a wrong codeSandbox? The code you mention in the post is not in the example... Upon inserting it myself I of course see that it works like a charm!
    1 point
  36. @Carl @GreenSock Hi, thank you for the reply, and for the links, I'm just feeling confused by the code, you guys replies really helped a lot, thanks, and have a great day!
    1 point
  37. @GreenSock Hi, thank you so much for the reply and the help, thank you so much!
    1 point
  38. I had the same issue in Angular 6 with WebStorm showing that the 'gsap/Draggable' didn't exist. Drove me nuts. But after visiting here I just ran it anyway and the application works fine - doesn't throw an errors.
    1 point
  39. Hm, that's really tough to diagnose blind. Got a demo somewhere we can peek at? I'm having a really difficult time thinking of what'd be getting in the way unless you're targeting the wrong element or something(?) Or maybe you're using a really old version of CSSPlugin but a newer version of TimelineLite? I dunno. Once we see the problem in action, it'll be much easier to diagnose. Have you tried updating to 2.0.2?
    1 point
  40. Oh, sure, you can just animate it: TweenMax.to("#wheel", 1, {rotation:180}); Is that what you mean?
    1 point
  41. Hi again @emilychews If you try my above codepen again you should see its working, I guess codepen didn't save my pen correctly. You don't have to rework your code just wrap with if statement checking the length property or ... You can just have an if statement around the target element for your tween. If .page-1 exists that use that, if it doesn not exist then use .box-1 variable. Using ternary operator way: var page1; page1 = (page1.attributes.length === 0) ? document.getElementsByClassName("page-1")[0] : document.getElementsByClassName("box-1")[0]; tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Or using regular if statement block for better readability since ternary operator way is one long line. var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length === 0) { // use .box-1 if .page-1 class does not exist page1 = document.getElementsByClassName("box-1")[0]; } tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Like this: Does that help
    1 point
  42. Hello @emilychews and Welcome to the GreenSock Forum! To make your code run on just the page you want without throwing that error when it doesn't exist... You can do this by checking the length of the page1 var is greater than zero which i have below, or even check that it doesn't equal zero: var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length > 0) { // your gsap and other code goes here } And with all your code: Happy Tweening!
    1 point
  43. Hi @thepandalion, Welcome to the GreenSock FORUM. Maybe this will help you further: Happy tweening ... Mikel
    1 point
  44. 1 point
  45. Sure, all you need is one onUpdate. Here's some simplified code: let gradient = { valA: 0, valB: 0 } elem.tl .to(gradient, 1, { valB: 100, ease: Linear.easeNone, onUpdate: () => { TweenMax.set(elem.el, { webkitMaskSize: 'cover', webkitMaskImage: `linear-gradient(170deg, rgb(0, 0, 0) ${gradient.valA}%, rgba(255, 255, 255, 0) ${gradient.valB}%)`, }) } }, 0) .to(gradient, 0.5, { valA: 100, ease: Linear.easeNone }, "-=0.5"); You can have tweens update the raw "gradient.valA" and "gradient.valB" as much as you want, and just point their onUpdate to a common function if you'd rather - the point is simply to have that function apply ALL of the values to the final string. Is that what you're looking for?
    1 point
  46. Great job, Sahil. love the demos!
    1 point
  47. "t" can be named whatever you want. It represent the progress of the animation, so it can be thought of going from 0% to 100%. From Flubber's docs. var interpolator = flubber.interpolate(triangle, octagon); interpolator(0); // returns an SVG triangle path string interpolator(0.5); // returns something halfway between the triangle and the octagon interpolator(1); // returns an SVG octagon path string So you pass that progress value into flubber, and will figure out where the points on the shape should be.
    1 point
  48. You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value. Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value. The scroll based effect is a lot more simple as you don't need to use any predefined tween,
    1 point
  49. Once you grasp the concept of nesting timelines (which is actually quite easy) and modularizing your animation code into functions, it's a very powerful thing and can completely change your animation workflow. That's exactly technique I used to do the animation on the home page which you can see in a codepen here: http://codepen.io/GreenSock/pen/b9133e0af7101adb4d7517f10b34c3ed So it becomes kinda like: tl.add( firstPart() ) .add( secondPart(), "-=0.5") //overlap 0.5 seconds .add( thirdPart(), "+=1") //leave a 1-second gap .add( fourthPart()); //and then you can easily preview things during production by skipping to a particular part: tl.seek(5); Then updates are super easy. You can tweak things inside secondPart() and even if the duration changes, that's fine - everything in the master timeline adjusts. Again, very powerful once the light bulb goes on. Have fun!
    1 point
  50. Hi, Well this are always a good starting point: http://www.greensock.com/jump-start-js/ http://www.greensock.com/sequence-video/ In terms of nesting, my idea is that the more you nest the better it is. For example you have 10 different timelines, some of them might play in sequence and some others might overlap. Imagine setting the particular delays of each one in order to accommodate what you're doing and let us assume that you can get to that point, everything is working fine you show the stuff to your client and they tell you:"mhhh, you know what, why don't you make the logo animation a little bit longer", and the freaking logo animation is the second timeline, that'll mean that you have to adjust, BY HAND, the delays and durations of the other eight timelines and their particular delays, you're in for a nightmare. While if you work with nested timelines and you add every particular timeline into a label, that duration change in the second timeilne means nothing, because the timing and sequence of the rest of the animation is pushed by that amount of time automatically, in fact you can put a very cool face and said:"absolutely, just give one second", you open your code editor, adjust the timing, play the animation again and your client jaw drops to the floor (of course the jaw dropping part might not happen, but still you're going to look good). My advice is: 1.- Nest as much as you can, if you need to put a timeline, inside a second one and then nest the second one in a master, do it, because that also will allow you to isolate any issue you could find while writing your code. 2.- Always use labels, they are incredibly helpful, specially for the scenario you indicate, when some timelines will play at the same time. Like the sample I mentioned, if you put your timelines relative to a label position your life will be incredibly simple when you need to make changes. 3.- Bookmark both the Greensock collection in Codepen and the JS API docs, I can't tell you how helpful this could be. I hope this comes in handy. Happy Tweening!! Rodrigo
    1 point
×
×
  • Create New...