Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

  1. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      77

    • Content Count

      287


  2. GreenSock

    GreenSock

    Administrators


    • Points

      68

    • Content Count

      13,196


  3. PointC

    PointC

    Moderators


    • Points

      67

    • Content Count

      3,344


  4. OSUblake

    OSUblake

    Moderators


    • Points

      65

    • Content Count

      4,286



Popular Content

Showing content with the highest reputation since 08/16/2019 in all areas

  1. 5 points
    I'm not trying to call you out, or anything like that. This is just a little FYI. event.pageX/pageY don't exist on touch events. They never have, and never will. To read the pageX/pageY property for a touch event, you will need to look in the event.changedTouches, event.targetTouches, or event.touches property of the event, which is an array. https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches Those properties are inside an array because you might have more than one pointer. Remember, the average human has 10 pointers on their hands. 🖐️🖐️ Some people love to hate on IE/Edge, but Microsoft did get one thing right with those browsers, PointerEvents. 🙌 https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent IE/Edge gives you the correct numerical value, because IE/Edge uses PointerEvents, which have an event.pageX/pageY property. Microsoft browsers don't use touch events, and thankfully, the other browsers have started to follow suit. For more information, here's a good article about how to work with touch and PointerEvents. https://developers.google.com/web/fundamentals/design-and-ux/input/touch/#add_event_listeners Again... that was just a little FYI about why event.pageX.pageY might be undefined in the event passed into a Draggable callback. I don't think there is a practical reason why you would ever need to use the event passed into a Draggable callback. If you stick to using the API provided by Draggable, you shouldn't encounter too many problems.
  2. 5 points
    Have you tried using the Draggable instance's pointerX and pointerY values? That's one of the ways it smooths out cross-browser differences. And to be clear, the docs don't indicate that the event will always have pageX/pageY values - it has no control over that. It simply passes along whatever it gets from the browser.
  3. 4 points
    Hey bromel, fun request Welcome back! Using your method, I'd make use of a counter and GSAP's .invalidate() to do this. https://codepen.io/GreenSock/pen/XWrNxgg?editors=0010 The above will be much easier to do in the next version of GSAP! But it likely doesn't look like what you imagined because it's animating from one color directly to the next, which isn't exactly what Blake's pen is doing. To fix this and make it as smooth as Blake's demo it'd be better to use translation instead of directly animating the color stop values. You can do that by doubling the color stops and animating their offsets like so: https://codepen.io/GreenSock/pen/qBWqJxY?editors=0010
  4. 3 points
    Well that's the problem. Your CSS transform transitions are conflicting with GSAP JavaScript animations. Get rid of that addClass/removeClass stuff and replace it with GSAP animations, and you should be good. BTW. There is no need to wrap stuff in a css object. TweenLite.to($circle, 0.3, { x: e.clientX, y: e.clientY });
  5. 3 points
    That's what we hope to do here at GSAP - do all the hard parts so that you guys can focus on the fun, exciting, and cool stuff
  6. 3 points
    Glad to hear you're enjoying the tools! What you're asking for isn't exactly a super simple case, but here's one approach: https://codepen.io/GreenSock/pen/vYByKZN?editors=1010 Is that what you're looking for? Hopefully it's easy to dissect. Happy tweening/dragging!
  7. 3 points
    This sounds like you're talking about a "medium" sized website which can be a little awkward to handle because there's definitely not a "right answer" and a lot of it boils down to preference. When I see this type of situation, I immediately think: what needs to be loaded on every page (the overall framework) and what is more so specific to certain pages. Then I personally would put the general stuff in its own JS file, etc. and load page-specific JS files as needed. I may or may not use a static site generator to do this (it depends on the nature of the site). Another person might do roughly the same thing but use a component based framework to do so (which is essentially a more complex static site generator). It boils down to 1) what are your needs, 2) what are you most comfortable using, and 3) what sort of timeline are you working on (because if time doesn't matter so much you can play around with different ways or teach yourself a new way, etc.).
  8. 3 points
    I'm in the process of redoing the docs for the new version anyway, so I will make sure to be more clear on this point.
  9. 3 points
    There are many ways to solve a problem, but what you have looks good!!! And thanks for the CodePen demo. It will be very helpful to Animate users who come across this post in the future. 🙌
  10. 3 points
    Hey, Not easy to say without seeing your markup. If your element is not part of the svg, you should not use value "all" but "auto". Read more here: https://tympanus.net/codrops/css_reference/pointer-events/
  11. 3 points
    Well this is pretty ambiguous because technically this is like defining two different color values that you're asking the tween to animate to at the same time - one from the className and one from the "color" you're defining in the tween itself. Like @ZachSaucier said, we really don't recommend className tweens because it requires literally analyzing every single property, finding the ones that are different and animating those. It's much cleaner to just tell GSAP the specific properties/values you want to animate (plus I think that makes your code more readable and direct - less ambiguity).
  12. 3 points
    You just have to change the offset of the image reveal tween. I think it would be best if you spent some time to understand mikel's approach and what it's doing. Then you can make changes yourself. We can't help you with each and every step of the way.
  13. 2 points
    Hi @Fakebook When you use the special advanced stagger property in the vars it will overrule the normal stagger parameter. Here's a fork of your pen in which you can see I just made the stagger parameter 100, but everything works as expected. You can put null in that spot too so your position parameter is correct. https://codepen.io/PointC/pen/xxKggye Does that help? Happy tweening.
  14. 2 points
    Yes, but it's very choppy because it can't animate the in-between values. To animate font weight using font-variation-settings, which can fill in the in-between values, you have to use a compatible font. Here's a good place to find some. https://v-fonts.com
  15. 2 points
    I'm a little confused - do you have what you need now or were you still looking for some help? I thought you were gonna post something of your own that you were trying to add anchors to, but it looks like you just copied one of our codepens that already had anchors showing. If you need some help with something of your own, just let us know and we'd be glad to take a peek. Otherwise if you're all set, even better!
  16. 2 points
    Hello sharik and welcome to the forums, There are a few different ways to do this. I would recommend looking at GSAP's SplitText and our timeline. The core of it is: have an array of words that you want to change out. Make sure the there are <span>s or something surrounding all words that you want to replace (and replace with). After a certain amount of time, fade out the old word, place the new one in the DOM (without being visible), get the width of the new word and adjust accordingly, then fade in and slide down the new word. Then repeat that process as needed. Does that makes sense? Let us know if you run into any issues and we can help with those. Here's some more information about SplitText and TimelineMax. P.S. Are you sure you want to make a direct copy of that group's website? It does not make your company stand out if you are just copying another company completely. I suggest that you change things up a bit more. Maybe include things from other site's designs so that the mix the sites becomes your own.
  17. 2 points
    Hey @sumith, One of my favorite magazines TheNewYorker uses this technique and has kindly provided the code on Github: uturn - detect scrolling behavior with a requestAnimationFrame debounce Happy debounced scrolling ... Mikel
  18. 2 points
    Not without a lot of work. @GreenSock what do you think about adding gestures to the next version of Draggable, to be more like hammer.js? http://hammerjs.github.io/ hammer.js is an awesome library, but it's really not maintained anymore, so GSAP could fill that void.
  19. 2 points
    Try this: https://codepen.io/mm00/pen/qBWRWKY
  20. 2 points
    @PointC aaaahh - thank you so much for that resource! 😅 Did not know about that page 🤭It is very helpful indeed. Best wishes.
  21. 2 points
    Hello Zach, I was able to arrive at a solution. Between your comments and OSUBlake's and Diaco's codepens for multiple drag objects and multiple targets I was able to piece together some code that worked. Thank you all for your time in helping all of us grateful GSAP users.
  22. 2 points
    You'd use this.x in the callback. this inside of Draggable callbacks returns the Drabble object itself unless you specifically set the scope using one of the on____Scrope (like onDragScrope) functions. Modifying your code from above, you could get the values like so: Draggable.create("#firstNamedQuanDragImage1", {type:"x,y", bounds:"#nQL_DragDropGrid1", edgeResistance:0.5, cursor: "pointer", onDragEnd: function(e) { console.log("x: " + this.x + ", y: " + this.y); } });
  23. 2 points
    Hi @jiggy1965, Have a look at labels and tweenTo There are a few ways to add labels to the timeline ... with add(), addLabel(), and right on the tween itself (to(), from(), staggerTo(), etc.) https://codepen.io/sgorneau/pen/LYPZgQv Happy tweening!
  24. 2 points
    I am using Draggable on a React component and managed to get this working correctly on IOS by wrapping the React component in double <NonPassiveTouchTarget /> from https://gist.github.com/xiaody/206c4168f9001671c0a374af4558f582 On android the "lockAxis: true" works, but on IOS it does not work unless i use the wrapper also. I would love to get rid of that boilerplate code, so hope this will be fixed in GSAP. I would expect lockAxis to work the same on both platforms.
  25. 2 points
    Hey @sumith, Some pointers: //create a timeline instance var tl = new TimelineMax() //the following two lines do the SAME thing: .add( TweenMax.to("#id", 2, {x:100}) ); .to("#id", 2, {x:100}); //shorter syntax! By default, animations are inserted one-after-the-other, but it's easy to control precisely where things go using the position-parameter. I still do not understand, what do you mean by 'scroll 5 time', but here's a fork of your case: https://codepen.io/mikeK/pen/NWKNQwW Happy tweening ... Mikel
  26. 1 point
    Happy to help. Sounds like you've got it now. 👍 You can also use each: instead of amount if you need exact staggering durations for each element. Stay tuned for the next release of GSAP 3.0 when advanced staggering adds some fun new features. Happy tweening.
  27. 1 point
    Hey, These two pens of Jack and Blake . of Jack and of Blake brought me to the following solution - but with a simple polyline: https://codepen.io/mikeK/pen/bGbBXOO
  28. 1 point
    If you strip it down to just the points it'd be helpful if you posted the demo back in this thread for others (like myself) to use I guess Jack may have a version like that somewhere in his chamber of secrets.
  29. 1 point
    Hey @knalle, I am not sure what you want to achieve exactly: that follows the vertices of the SVG path. If the distances are the same, then there is the possibility to operate with stroke-dasharray . https://codepen.io/mikeK/pen/rNBWwjZ Or hand coded ... https://codepen.io/mikeK/pen/ydppYJ Happy tweening ... Mikel
  30. 1 point
    In addition to the great advice from Craig, if you could post a minimal version of your issue online to a site that we could access we might be able to help more with debugging.
  31. 1 point
    Yeah, I totally get that. Makes sense. Hey, if GSAP 2.0.2 is working well for you and there really aren't any pain points, why risk the upgrade? I did put a fix in for the issue we're discussing here, so it may very well be worth the risk in this case. Let me know if there's anything else we can do. Happy tweening!
  32. 1 point
    What version of webpack are you using? v4 has problems mixing es modules with umd. v3 doesn't. Also, have you tried using require() instead of import for the umd? If you go back to using es modules, try letting babel transpile gsap in your node_modules folder. See if this post is any help. _gsTweenID is added to every object/element it animates. The only way I can see that error happening is if what you're trying to animate isn't an object, but a primitive like a string or number. Setting up build environments can be a real PITA sometimes. Have you considered using something pre-made, like Create React App? https://github.com/facebook/create-react-app
  33. 1 point
    @PointC and @GreenSock Worked like a charm! Thanks for all your help!
  34. 1 point
    The docs should provide that sort of information. Is there something in particular that you're not understanding after reading the docs?
  35. 1 point
    I have a new Draggable issue. I need to retrieve event.pageX and event.pageY in the Draggable.onDrag method. This works fine, and as expected, on my desktop, using a mouse. It is broken in my RCA Cambio Win 10 touchscreen device (Chrome), when using touch to drag the Draggable (it works if I use the device's mousepad). The issue is that event.pageX and pageY are both undefined. I have a demo page at my site. Draggable.onDrag docs indicate that event.pageX and pageY should be accessible and defined when dragging: onDrag: Function - a function that should be called every time the mouse (or touch) moves during the drag. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onDragScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent(last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc. So far, I'm having a lot of success switching over to use the Draggable.onClick method instead of the click handlers in my site's framework as mentioned in my previous post. Fixing this issue could be the last thing that I need to make it work. Advice? Am I missing something, or is this a bug?
  36. 1 point
    For this reason, also, I'd suggest reworking the documentation for Draggable to make it more clear that pointerX and pointerY are preferable, whereas event.pageX and pageY are to be avoided unless you really know what you're doing (which I did not).
  37. 1 point
    Well, as you can see in my previous post, I kinda developed a workaround. My slideshow has 3 squares of 300x300 next to each other. They will be moving from 0 to -300 to -600 and back again to -300 to 0. Those are three x locations it will go to. I simplified those to 0, 1 and 2 and used either of those values to calculate which x location the slider should move to during a click. Even when it's already sliding, so I could click when it's e.g. on -450 and it would either move to -600 or -300. And by using 0, 1 and 2 I'm making sure the slider doesn't slide past -600 or higher than 0 which would lead to empty slides. It does exactly what I was after now. See below example: Slider example
  38. 1 point
    Hey chester and welcome to the forums, Thanks for the code that you have provided, but what have you tried to animate the items as you describe using GSAP? What problems have you run into? I think it'd be best for you to provide a minimal example of the issue(s) that you're running into using GSAP in a CodePen like the thread below describes.
  39. 1 point
    I didn't have a lot of time to look at this, but there are some inherent challenges with scrolling on iOS. If you look at the scrollbar, you'll see that Draggable is indeed being responsive to your touch but iOS is counteracting it in certain cases (no doubt it's trying to be "helpful"). I'd probably avoid the whole scrollTop thing and just affect transforms instead, kinda like this: https://codepen.io/GreenSock/pen/mdbPaqv?editors=0010 Is that any better for you?
  40. 1 point
    Might want to check someone’s history, skill set, and experience before you accuse them of trolling.
  41. 1 point
    Heck, you could even keep the text in the SVG itself and not convert it to a path if you wanted to and had the font loaded (especially if you're going to use the same font somewhere else).
  42. 1 point
    Yep, very doable. In addition to Zach's excellent advice I'd offer the possibility of using the SVG clip-path too. Masks differ a bit and are great when you need strokes or gradients to be part of the mask. Here's a quick clip-path option. Maybe it'll give you some ideas. https://codepen.io/PointC/pen/xxKwZqQ Happy tweening and welcome aboard.
  43. 1 point
    Just about anything can be done if you put enough time and effort forth... It's called masking or clip-path and you can see a nice little video about it here: Regards
  44. 1 point
    Hey Doug and welcome to the forums, This is very doable! The first thing you need is the SVG mask (or clip path - I'd recommend a clip path for something like this). You should be able to export a mask like the one you're wanting from a vector editing software like Illustrator (or Inkscape). You could even generate it from a font file (if you have the font on your system, type the "N" using that font, then convert it to a path). Once you have the mask include the SVG with mask in your project and apply the mask to your images (I'd probably position the images with position: absolute). Then you just have to loop the image movement and opacity changes. There are a lot of ways to do this, but GSAP's timelines (like TweenMax.timeline) should make that part easy. Let us know if you have any other questions! We're happy to help, especially if you provide a CodePen of what you're stuck on. Happy tweening.
  45. 1 point
    Sorry, I meant animate the divs, not the SVGs. Right now your parent divs (.priv-key-div and .pub-key-div) have no height because the child SVG is set to position:absolute. That's why your z-index isn't working. Make sense? Happy tweening.
  46. 1 point
    Welcome! This forum is being provided as a free service to connect talented GSAP animators with those looking to hire them. Please read this entire post before participating. When Posting a Job: Describe the project's technical requirements and provide links to similar examples and/or storyboards (if available). List the start and end dates of the project (or at least a rough timeline). Provide an estimated compensation range. The more detailed you are in describing your needs, the better your odds of success. If you omit the budget, there's a high risk that qualified candidates will assume it isn’t worth their time. Remember that talented GSAP experts are typically in high demand. We encourage candidates to post public replies to show they're interested, but further coordination should be handled privately either through the forum’s private message system or email. It's probably best not to post your email address in a public forum. Once a candidate is found, please update the post to let others know that the job is no longer available. Freelancers Feel free to post your availability in this forum proactively. Include links to your own website, portfolio, CodePen profile, etc. so that people can get a feel for your style and skill level. It’s a great idea (though not necessary) to post a price range for each example as well. Please represent your skills accurately and include proper attribution for work that’s not yours. One of the keys to a successful working relationship is managing expectations (both sides)! Always under-promise and over-deliver. Pricing a project We generally recommend agreeing to an overall project price and timeline ahead of time rather than billing a flat hourly rate. Some developers work twice as fast as others, so an hourly rate isn’t an accurate gauge of overall cost. But for open-ended projects, we understand that hourly rates might be the best fit. Additional notes We are starting this service on a trial basis. Freelancers are NOT employees of GreenSock. Anyone on the Internet can post here. GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. If we receive complaints about your conduct (employers or developers), you may be banned from posting here. Again, we make no promises to investigate each and every claim or get into "he said, she said" back-and-forth, so it's in your best interest to keep things positive and exceed expectations. Make us proud. GreenSock does not research or endorse any of the parties posting here. Please let us know if you have any suggestions for making this service even better. Happy tweening!
  47. 1 point
    Let it never be said GSAP fourms isn't value for money. Wait for Black Friday, we'll be doing some crazy deals: Ask one question, get three answers, five jokes and a CorePen example snippet.
  48. 1 point
    I love SVG clip-paths or masks for this type of work. Pretty much the same thing I did in this demo except the text is linked to the timeline progress. Hopefully that helps or at least gives you some ideas. Happy tweening.
  49. 1 point
    . That's good. As I said earlier, the hardest part is keeping track of all the connections, so using something like React will work well as you can bind the data to your components. Drag events really don't work on SVG elements. But that's ok because GSAP has a draggable utility that works much better than native drag and drop. Here's a demo that allows you to drag points on a polygon around. Sure. I can make a demo for you later today that shows how to do this.
  50. 1 point
    Particle Animation To create a particle animation, we need to create some display objects for GSAP to work with. Here's what a very basic sprite object might look like. var sprite = { texture: texture, // Image or canvas to render width: texture.naturalWidth || texture.width, height: texture.naturalHeight || texture.height, originX: 0.5, // Transform origin, so 0.5 would be 50% originY: 0.5, alpha: 1, rotation: 0, scale: 1, x: 0, y: 0, }; Now you can animate that object just like you would if it were an HTML or SVG element. TweenMax.to(sprite, 2, { x: 100, y: 200, rotation: 180, scale: 0.5, alpha: 0.2, ease: Sine.easeInOut }); And on every animation frame, you would render the sprite like this. TweenLite.ticker.addEventListener("tick", render); function render() { context.clearRect(0, 0, canvas.width, canvas.height); var offsetX = sprite.originX * sprite.width; var offsetY = sprite.originY * sprite.height; context.save(); context.translate(sprite.x + offsetX, sprite.y + offsetY); context.rotate(sprite.rotation * Math.PI / 180); context.scale(sprite.scale, sprite.scale); context.globalAlpha = sprite.alpha; context.drawImage(sprite.texture, -offsetX, -offsetY); context.restore(); }
×