Jump to content
GreenSock

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

Leaderboard

  1. GreenSock

    GreenSock

    Administrators


    • Points

      79

    • Content Count

      13,733


  2. OSUblake

    OSUblake

    Moderators


    • Points

      73

    • Content Count

      4,992


  3. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      60

    • Content Count

      1,213


  4. mikel

    mikel

    Moderators


    • Points

      12

    • Content Count

      1,025



Popular Content

Showing content with the highest reputation since 12/05/2019 in all areas

  1. 5 points
    When the browser resizes, the entire layout has to be recalculated, putting a lot of strain on the browser. Trying to have smooth transitions during a resize is a waste of time in my opinion. It adds nothing to the user experience, and normal users don't constantly resize their browsers like devs do. Can it be done? Sure, but it requires some careful programming.
  2. 4 points
    If your <svg> element has a viewBox attribute, then your SVG coordinates are probably transformed. Check out this demo. The <svg> element fills the entire screen. The gray box, a <rect> element, fills the svg 100%. Any white boxes around it are to preserve the aspect ratio. If you can resize the screen to be 1000x1000, the SVG and Screen coordinates will match, otherwise the svg coordinates will be transformed. Moving your mouse into the white area to the left or above the gray box will result in a negative value. https://codepen.io/osublake/pen/5d84dcad3edc6da20354948dbcdf6489 Study that demo carefully. The strange coordinates has nothing to do with gsap or Draggable. It's just how svg works.
  3. 4 points
    I forgot about computed property names. Here's another version of my animation using a single function. https://codepen.io/osublake/pen/a0eeae71974a4d17afdc41a7147576ee
  4. 4 points
    Hey @ninmorfeo, Please look at the GreenSock MotionPathHelper. Tools to Visualize and Edit SVG Paths: here And a converter path2bezier Kind regards Mikel
  5. 3 points
    For the record, I think you could even simplify it to this in GSAP 3: https://codepen.io/GreenSock/pen/47743f6ecbf4dd6f4023117e59441e58?editors=0010 gsap.to("#output", { duration: 5, innerHTML: 360, snap:{ innerHTML: 1 } });
  6. 3 points
    It works the same. The difference is the target property. function updateOutput() { const value = Math.round(this.targets()[0].degree); output.innerText = value; } // if you know the target, this is much simpler function updateOutput() { const value = Math.round(bar.degree); output.innerText = value; } To use interpolate, you can do this. https://codepen.io/osublake/pen/3761294853fef89c19b7ab856f2cf5fa I think the first way is better for a use case like this.
  7. 3 points
    That is what I would recommend. Or you could make a single file to do all the registering, and just export what you will actually reference from that file. It gives you a nice centralized place to register and keep track of what plugins you are using, and streamline your code a bit. my-gsap.js import { gsap } from "gsap"; import { Draggable } from "gsap/Draggable"; import { ScrollToPlugin } from "gsap/ScrollToPlugin"; import { TextPlugin } from "gsap/TextPlugin"; gsap.registerPlugin(Draggable, ScrollToPlugin, TextPlugin); // No need to export ScrollToPlugin or TextPlugin // as you probably won't need to reference them directly export { gsap, Draggable }; my-component.js import { gsap, Draggable } from "./my-gsap.js"; // Make sure you import from the file you created gsap.to("#foo", { text: "Some Text" }); // Works gsap.to(window, { scrollTo: 400 }); // Works Draggable.create("#bar");
  8. 3 points
    This has to do with the fact that you're loading in CSS from another domain, so the browser will not allow JS to manipulate it in any way (it's a security thing). <link href="https://fonts.googleapis.com/css?family=Merriweather:300,900&display=swap" rel="stylesheet"> https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property/49994161 https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64/49160760#49160760 Are you saying that GSAP v2 worked in this same scenario? According to what I've read, it shouldn't.
  9. 2 points
    Thanks so much for your superfast replies! That's a huge help. I guess you're right … I might as well go without those smooth transitions on layout change. The core idea behind all of this is that I will have variable typography in those menu-items and a timeline, that tweens font-stretch and font-weight. Progress is calculated in between certain aspect-ratios to make the the font fit whatever screen-size it is displayed on. This alone is actually working pretty well.
  10. 2 points
    I made some improvements to the next release that should sense this condition and adjust for it. Preview it here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  11. 2 points
    Function based values have been in gsap for a long time. I made this collection back in 2016. https://codepen.io/collection/nVjkaB You shouldn't include the animation for #target inside the loop. You're just creating the same animation 80 times, which is kind of wasteful. dots.to('#target', 0.5, {scale:0, autoAlpha:0}, 0); for (i = 0; i < qty; i++) { numX = Math.round(random(-10, 10)) * 100; numY = Math.round(random(-10, 10)) * 100; babyLogo = $("<img src='"+ homeLogo +"' class='baby-logo' />").appendTo(explodeContainer); dots.to(babyLogo, 1, {x:numX, y: numY, autoAlpha:0}, 0.2); }
  12. 2 points
    if i understand correctly I think tweenTo() and tweenFromTo() can help https://codepen.io/snorkltv/pen/JjoGMOy?editors=0010 docs: https://greensock.com/docs/v3/GSAP/Timeline/tweenFromTo()
  13. 2 points
    In GSAP 3 it's best to not use the old staggerTo methods. All tweens have the ability to stagger! This is the same thing that Blake posted in all-GSAP 3 recommended ways: gsap.to(List, { duration: 4, x: "random(4,-8)", y: "random(7,-10)", ease: "power1.inOut", repeat: -1, yoyo: true, stagger: 0.2 });
  14. 2 points
    I can't speak to how vue-cli works internally or why it may or may not drop v2 stuff but I can tell you that one of the reasons we encourage people to register plugins in v3 is exactly for this reason (tree shaking) - bundlers were dropping v2 plugins completely so that plugin-driven animations were breaking. We'd have to encourage people to reference the plugins somewhere in their code to prevent bundlers from dropping them, but a lot of people didn't do that. Another reason we encourage registering in v3 is because it allowed us to streamline things in the core - in v2 and earlier, we had to add various code to try to work around issues with people loading things in various orders (like what if they loaded a plugin and then the core?). It just solves a lot of issues. And again, the tree shaking issues have NOTHING to do with GSAP itself - it's not like there's a bug that's causing things to get dropped. It's the nature of tree shaking and what these bundlers do to try to "help" you. It's totally fine if you register a plugin multiple times (though it doesn't help at all). So if you prefer to registerPlugin() in each component, that's fine. Technically you only need to register a plugin once after GSAP loads.
  15. 2 points
    "auto" only works for elements. Use an array with the number of rows and cols in the grid. grid: [rows, cols]
  16. 2 points
    Is this what you're looking for? https://greensock.com/docs/v3/GSAP/gsap.getProperty()
  17. 2 points
    As of version 3.0.2 (just released), Draggable has type: "scroll" | "scrollTop" | "scrollLeft", so this should be much easier for you now. 🎉
  18. 2 points
    GSAP 3 now has official Typescript definitions!
  19. 2 points
    Wanted to add to the question above that this is a completely epic level of support. Really appreciate it. Thank you very much!
  20. 2 points
    Alright, I think I figured it out - Draggable was being loaded into an entirely different document than the element it was trying to control. So when it added pointermove listeners to the document, it wasn't the ownerDocument of that element. I've updated the beta Draggable and it seems to work fine now - https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js Does that work well for you now?
  21. 2 points
    I've solved that original issue you posted about (which was related to the fact that the element was in a DocumentFragment, not the actual DOM) but I'm noticing that the playground.xyz doesn't work with pointermove events! For example, try adding this code: document.addEventListener('pointermove', (event) => { console.log('Pointer moved'); }); Nothing gets logged. Same for mousemove events. I assume something is hijacking them on that site and preventing their bubbling?
  22. 1 point
    Hi, I've searched a bit but I didn't find a solution (bad search terms, probably). In this example, if I drag the div clicking outside the image (on the red background) everything is ok, but if I click on the contained image, I have this strange behaviour (image is like not part of the draggable div). What is wrong with my code? Thanks in advance
  23. 1 point
    Hey @Matthew Severin. I'm curious about why you'd want only positive values. Like...what effect are you going for exactly? A RoughEase without any doubling-back wouldn't end up looking rough at all But yeah, a CustomEase will give you whatever you're looking for. Again, I was just curious.
  24. 1 point
    Hm, I'll look into that - it looks like it's having a difficult time parsing the SVG data ("a" commands are notoriously tricky). I'll get back to you when I have more info.
  25. 1 point
    Make a demo showing the problem, and CLEARLY describe what should happen if you rapidly click on those buttons.
  26. 1 point
    And you don't have to write onUpdate: function() {}. This syntax makes it even shorter than an arrow function in most cases. gsap.to(foo, { onUpdate() { console.log(this.progress()); } });
  27. 1 point
    Buckle your seatbelt. You're in for a fun ride. I think you'll like it.
  28. 1 point
    GSAP has event listeners where you can set those properties: gsap.to(target, {onComplete: () => { // or whatever you need gsap.set(target, {display: "flex"}); });
  29. 1 point
    Unless you have a very compelling reason for using Flash / Animate, I'd recommend that you learn to hand-code banners vs relying on the often buggy Adobe software and the CreateJS plugin. Learning to hand-code is certainly daunting at first, but once you get the hang of it you'll wonder why you were relying on clunky software.
  30. 1 point
    Please do not save over previous demos. When you do, context is lost and the old version cannot be referenced to compare to. When creating new versions of the demo, please use the "fork" button on CodePen Changing it to y: e.clientY + $(window).scrollTop() seems to work fine: https://codepen.io/GreenSock/pen/povyyEN?editors=0010
  31. 1 point
    Hey Premium Funding and welcome to the forums. This is likely because the opacity is 1 to begin with. So when you're "animating" to a value of 1, there's nothing to do. You could use a fromTo instead like so if you want: https://codepen.io/GreenSock/pen/LYEGqVB?editors=0010
  32. 1 point
  33. 1 point
    So make the value smaller, like "-=1.3". It worked the same way as it does now: https://codepen.io/GreenSock/pen/RwNrMgK?editors=0010
  34. 1 point
    If this were true, which functions should this apply to? Should it apply to .seek()? .play()? Why not? They're control functions just like .reverse() is. You'd end up creating entirely new timelines affecting the same object that not only conflict but are increasing the amount of memory as well. We want people to be fully aware of what they're doing - if you tell the same timeline to reverse then it should reverse. We don't want to try to predict what their real intention is and force them to use our prediction instead of what they explicitly said to do. There would be way too many edge cases and it would bloat the size and runtime of GSAP immensely. Happy to help! Just provide a minimal demo please
  35. 1 point
    I thought @GreenSock fixed that, but it looks like this might be a separate issue. On my side the beta file worked well. If there is anything else i can see i will let you know ! Thanks a lot for your effort and update ! As Always, brilliant Support and Great Product ! Cheers, Krisztian
  36. 1 point
    It's easy to setup an animation, have it be paused on load, and run it using the Intersection Observer API: https://codepen.io/PointC/pen/aLxmJp These demos use GSAP 2, but can easily be converted to GSAP 3.
  37. 1 point
    Yep, it's been replaced by the cleaner gsap.getProperty() method. See the GSAP 3 release notes for other issues like this:
  38. 1 point
    Hey 7up and thanks for posting. GSAP 3 gives you additional control over how staggers work. Now you can (and should in this case) include the repeat and yoyo inside the staggers if you want them to repeat immediately and not wait for the others to finish: https://codepen.io/GreenSock/pen/qBEOqdg?editors=0010 Thanks a lot for the clear, minimal demo! I'm currently working on a video that explains staggers in more detail including this. P.S. It's generally best to use x instead of left because using left causes reflows. Also you don't have to manually include "px" - GSAP is smart enough to do that for you
  39. 1 point
    hey @ZachSaucier @Jack thanks so much for looking in to this, really appreciated. will update gsap version right now (or maybe after a tea and a shower). great stuff!
  40. 1 point
    I'm not sure if this covers all of your requirements, but I'd probably simplify the setup a little bit by doing this (not sure if you want the text to move down in the repeat animation or not - comment it out if not): https://codepen.io/GreenSock/pen/zYxGjpR?editors=0010
  41. 1 point
  42. 1 point
    The main issue is that you want the first iteration (the start) to be different than the other iterations (the repeats). Another alternative method, not explicitly setting the y: https://codepen.io/GreenSock/pen/rNaVppY
  43. 1 point
  44. 1 point
    Wow, yes, this helped. Thank you. We now can animate between string properties — that's cool!
  45. 1 point
    Oh @ZachSaucier. I was actually going to bring this up. Maybe remove the CodePen field? It seems like nobody uses it. And that link is correct, and was working the other day. Don't know what happened. 🤷‍♂️
  46. 1 point
    First of all, thanks for being a club member! Don't worry - we're committed to ensuring things are bug-free. Plus, if you're not 100% happy, we'll gladly give you a full refund. We're confident in the value we aim to deliver. I believe that issue is already fixed in the upcoming release, 3.0.2 which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js We hope to officially push that release out within the next 2 days, so you won't have to wait long at all. Of course you're welcome to use that beta file in the mean time. Also, my hat's off to you for being such a long-time user, all the way back to the Flash days! That's great!
  47. 1 point
    GSAP 3 is the most significant upgrade we have ever had. With 50+ new features, there's a lot to be excited about, but to keep this post manageable, we’ll cover only 5. You might also be interested in the GSAP 3 highlights video. See the release notes for all the juicy details. 1. Half the size of the old TweenMax! No kidding! GSAP retains almost all of its old functionality while adding 50+ features. We’ve learned a lot over the years and hopefully that shows. The core has been completely rebuilt from the ground up as modern ES modules. 2. Simplified API No more “Lite” and “Max” flavors. TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated into a single "gsap" object. So simple! For example: //simple tween like the old TweenMax.to(...) gsap.to(".class", {duration:2, x:100}); //create a timeline and add a tween var tl = gsap.timeline(); tl.to(".class", {duration:2, x:100}); Internally, there's one "Tween" class (replaces TweenLite/TweenMax) and one "Timeline" class (replaces TimelineLite/TimelineMax), and both have all of the features like repeat, yoyo, etc. When you call one of the gsap methods like .to(), .from(), etc., it returns an instance of the appropriate class with easily chainable methods. Duration is now defined in the vars object. This allows several benefits such as: Improved readability It fits much better with keyframes It allows default durations to be inherited (more on that below) You can use function-based values //OLD - duration was 2nd parameter TweenMax.to(".class", 1, {x:100}); //NEW - duration is now a property of the vars object gsap.to(".class", {duration:1, x:100}); All tweens are now stagger-able. There’s no need for the old staggerTo(), staggerFrom(), or staggerFromTo() methods because you can add staggers to regular tweens: //simple stagger gsap.to(".class", { x: "+=100", duration: 1, stagger: 0.5 //space each element's animation out by 0.5 seconds }); //advanced stagger gsap.to(".class", { x: "+=100", duration: 1, stagger: { amount: 2, from: "center", grid: "auto", onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween } }); See the Pen GSAP 3.0 Stagger demo by GreenSock (@GreenSock) on CodePen. For more information about GSAP’s advanced stagger functionality, see this codepen. New, more compact ease format. less typing, more readable, and zero import hassles. Here's the new convention for all of the standard eases: //old way Elastic.easeOut Elastic.easeIn Elastic.easeInOut Elastic.easeOut.config(1, 0.5) SteppedEase.config(5) //new way "elastic" //same as "elastic.out" "elastic.in" "elastic.inOut" "elastic(1, 0.5)" //same as "elastic.out(1, 0.5)" "steps(5)" Backwards compatible The new GSAP even adjusts itself to accommodate the old syntax! There's technically no more TweenMax, TweenLite, TimelineLite, or TimelineMax, but they're all aliased so that the vast majority of legacy code still works, untouched! You don't have to rewrite all your code for GSAP 3, but we'd recommend shifting to the new, more concise syntax for all your new projects. 3. Inheritance/Defaults You don't have to keep setting the same ease over and over again...or duration...or whatever. Just set defaults on the parent timeline and let them be inherited by all its children! For example this repetitive code can be shortened, saving you time. //old way, without timeline defaults var tl = new TimelineMax(); tl.to(obj1, 2, {ease: Power2.easeInOut, rotation: -180}) .to(obj2, 2, {ease: Power2.easeInOut, rotation: -360}) .to(obj3, 2, {ease: Power2.easeInOut, rotation: -180}); //new way, with timeline defaults var tl = gsap.timeline({defaults:{ease: "power2.inOut", duration: 2}}); tl.to(obj1, {rotation: -180}) //child tweens will inherit the duration and from the parent timeline! .to(obj2, {rotation: -360}) .to(obj1, {rotation: -180}); See the Pen GSAP 3.0 Cube Walk by Pete Barr (@petebarr) on CodePen. Any defaults you set this way will get pushed into every child tween - it’s not limited to a certain subset of properties. This can really save you some typing! Inherited defaults are easily overwritten anytime a property is declared on a child. 4. All new MotionPathPlugin The new MotionPathPlugin makes it very easy to move any element along an SVG <path>! For more information about the MotionPathPlugin, check out its documentation and the video below. See the Pen GSAP 3.0 Stagger demo by GreenSock (@GreenSock) on CodePen. Club GreenSock members also get access to the new MotionPathHelper utility that lets you EDIT the motion path interactively in the browser. It’s never been so easy to move elements along a path! 5. New utility methods GSAP 3 exposes some surprisingly useful utility methods that might save you time and hassle. Need values to snap to the closest one in an array? Use gsap.utils.snap(). Tired of trying to figure out how to pull a random element out of an array? Let gsap.utils.random() do it for you. Want to distribute any value among an array of elements, complete with easing? It’s a piece of cake with gsap.utils.distribute(). Here’s how to use the gsap.utils.interpolate() method: //numbers let value = gsap.utils.interpolate(0, 100, 0.5); // 50 //strings let value = gsap.utils.interpolate("20px", "40px", 0.5); // 30px //colors let value = gsap.utils.interpolate("red", "blue", 0.5); // rgba(128,0,128,1) //objects let value = gsap.utils.interpolate({a:0, b:10, c:"red"}, {a:100, b:20, c:"blue"}, 0.5); // {a: 50, b: 15, c: "rgba(128,0,128,1)"} There's also an explainer video about how to use it. Using GSAP's built in utility functions can make complex code simple. Check out the video below to learn more and see an example: For a full list of the utility functions, some demos, and how to use them, check out the docs. There's waaaaay more... We've only scratched the surface of all the improvements in GSAP 3. Check out the release notes for a full list of the features and changes. There's also an updated getting started page. Ready to play? GSAP 3 Starter Pen (a CodePen template that already has the GSAP 3 files loaded. Fork away and have a blast!) This pen allows you to copy the resource URLs easily. Or download the files to use locally. Using a build tool? npm install gsap will get you the files. If you're a Club GreenSock user, there's a gsap-bonus.tgz tarball file in the local download above that you can simply drop into your project's folder and then npm install ./gsap-bonus.tgz and BOOM, it'll be installed just like any other package! See the installation docs for more information. Questions? Bugs? Hit us up in the forums or contact us directly. We'd love to hear what you think of GSAP 3. Happy tweening!
  48. 1 point
    Keep in mind that if you have your custom GSAP script inside your child theme directory, then you have to use the below code instead: Reason being is that get_template_directory_uri() returns the path to your parent theme get_stylesheet_directory_uri() returns the path to your child theme <?php // The proper way to enqueue GSAP script // wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); function theme_gsap_script() { wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js', array(), false, true ); wp_enqueue_script( 'gsap-js-custom', get_stylesheet_directory_uri() . '/js/custom-gsap-scripts.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); ?> /js/ being the js folder in your child theme. Happy Tweening
  49. 1 point
    I don't know what you've been reading, but you can reverse TweenLite, TweenMax, TimelineLite and TimelineMax instances. It sounds like you might be expecting GSAP to behave more like a CSS animation. GSAP animations are not based on the original values of an element, like what's defined in a style sheet. When you create an animation, it will record the start and end values to animate between. Unless you're using something like a fromTo tween, the start values are going to be based on the object's current state. So if you create an animation and immediately reverse it, you're telling the animation to go back to the start values it just recorded, which is why it stops. The object is already at those starting values. So to reverse an animation, you should create it outside your event handler.
  50. 1 point
    pls use a local test server like Xampp ; some browsers like the Google Chrome will not load local file by default due to security reason .
×