GreenSock last won the day on March 1

GreenSock had the most liked content!

GreenSock

Administrators
  • Content Count

    12,708
  • Joined

  • Last visited

  • Days Won

    381

Everything posted by GreenSock

  1. GreenSock

    Possible bug with reversed timeline, only with v2.1.2?

    Thanks for reporting this. I apologize for the hassle. I'm traveling at the moment but I'll look into it as soon as I return and get back to you. Thanks for your patience.
  2. GreenSock

    CSSPlugin Error on Class Change to HTML Element

    Sorry about the hassle you faced with the 2.1.x update. I'm sure it sucked to burn the better part of a day chasing that down. Ugh. I had no idea about the root HTML effect, but thanks for letting us know. It's not something we've added to the docs or anything - we've said it quite a bit in the forums but we're also not trying to actively scare people about. Honestly, in the vast majority of cases nobody is gonna notice a performance difference. If it helps your workflow, feel free to keep doing it. I'm just a performance nut and className animations bug me (personally). Perhaps I'm making too big a deal of it Anyway, thanks again for the input and sorry about the hassle.
  3. GreenSock

    CSSPlugin Error on Class Change to HTML Element

    Thanks for reporting this. I'm traveling at the moment, but I'll look into this as soon as I return. I'm curious - are you saying this is only a problem for animations that target the root "html" node and are class tweens? I've actually never heard of anyone even attempting that, so I'm also curious what your use case is. For the record, we generally recommend avoiding class tweens if possible because they require ripping through all the properties and doing a comparison (before & after), isolating the changed properties, and going from there. They also can be confusing for developers because the actual values are stored in a completely different place (in the CSS), making it cumbersome. It's certainly not "wrong" or anything - I'm just saying that typically we recommend avoiding those if at all possible. Perhaps you could share a practical use case that sheds light on what's going on and why it'd be important to accommodate class-based tweens on the root HTML element. Thanks!
  4. GreenSock

    Issue with building my site - ThrowPropsPlugin.js

    Hm, could you explain how exactly we'd make that "SSG-friendly"? I'm certainly open to suggestions. Also, is it not possible to use the ES Module flavor of the GSAP files?
  5. GreenSock

    Smooth scroll for large image(i tried the tricks)

    I'm curious why you're seeing jank when none of us are seeing it, but I'd definitely recommend using transforms (x) because you'll get sub-pixel rendering and better performance. Animating left forces it to snap to whole pixels (that's a browser thing, not GSAP). Here are a few other things to try: Just set() the rotation and/or z initially - there's no reason to tween those over 14 seconds. Waste of CPU cycles (though honestly I can't imagine that anyone would actually notice a performance difference) I wonder if you're on a Mac and you're looking at Chrome because that browser has a but that affects 3D transforms, so you could just set CSSPlugin.defaultForce3D = false to see if that helps at all. I kinda doubt it will, but it's worth a shot. What browser and platform are you looking at this in?
  6. GreenSock

    Custom Ease vs Bezier vs Bigger Timeline Performance Question

    Nice job, @elegantseagulls! Thanks for sharing. Keep up the good work.
  7. GreenSock

    Yoyo/repeat + Vue getting tree shaken?

    Nah, no need. It's fine, but thanks for asking! Happy tweening!
  8. GreenSock

    1 FPS with DrawSVG on Chrome + Mobile (FF works!?)

    I have also heard that <use> can be very slow for certain browsers to render. It looks like you're nesting <svg> elements and animating "x" and "y" attributes and using <use>, all of which are pretty bad for performance. I'd recommend animating transforms on those hearts, and avoid nesting them inside the <svg>. Instead, wrap each one in a <div> and animate the transforms of that so that the browser can GPU-accelerate the effect (most browsers cannot GPU-accelerate SVG sub-elements).
  9. GreenSock

    Yoyo/repeat + Vue getting tree shaken?

    Repeating/yoyoing are part of the "Max" stuff. You could try importing all those classes from "gsap/TweenMax" instead of "gsap/all" because TweenMax includes TimelineLite, TimelineMax, TweenLite, CSSPlugin, and several other tools. But depending on your bundler, that may not really help. Glad you got it working!
  10. GreenSock

    Yoyo/repeat + Vue getting tree shaken?

    Hm, try importing (and protecting) TweenMax: // import libraries import { TweenMax, TimelineMax, Bounce, Back, BezierPlugin, CSSPlugin } from 'gsap/all' // create a timeline const tl = new TimeLineMax({ paused: true }) // add a pulsing glow (uses a custom CSS variable) tl.to('div', 1, { '--some-var': '20px', repeat: -1, yoyo: true }) // fire it up! tl.resume() // eslint-disable-next-line no-unused-vars const dontTreeShakeBezierAndCSS = [TweenMax, BezierPlugin, CSSPlugin] Does that resolve things?
  11. GreenSock

    jQuery UI Resizable with GSAP Draggable

    Yep, I figured as much and I sure appreciate it!
  12. GreenSock

    GSAP expert available for freelance

    I can personally vouch for @creativeocean, as I have worked with him in the past. Very creative, personable, and passionate about what he does. And yeah, he has been using GSAP for a looong time
  13. GreenSock

    jQuery UI Resizable with GSAP Draggable

    Just for the record, we did switch to dragClickables being true by default in 2.1.0, but there was a regression that prevented that value from being set/read properly until 2.1.2, so please make sure you're using the latest version. Also, you said "it's my understanding that Draggable ignores anything with the attribute of 'data-clickable'" but I just want to clarify that the value matters. In other words, it's not just having that attribute that matters - it's that it's set to "true" or "false".
  14. GreenSock

    morphSVG

    It sounds like you just forgot to load MorphSVGPlugin.
  15. GreenSock

    Strange vertical lines between boxes on first play

    Yep, that's the calculation I typically use (I assume you got it from GreenSock source code), but beware that it's not a true rounding - it's more of a "chop off everything after a certain decimal value". For the vast majority of cases, it doesn't matter. Glad to hear you got everything figured out.
  16. GreenSock

    getChildren() on Timeline with stagger

    Yep, editing the prototype as @Rodrigo suggested should work. The checking instance stuff could be done like this: function animationType(obj) { return (obj instanceof TimelineMax) ? "TimelineMax" : (obj instanceof TimelineLite) ? "TimelineLite" : (obj instanceof TweenMax) ? "TweenMax" : (obj instanceof TweenLite) ? "TweenLite" : "undefined"; } Here's a quick function I whipped up that'll flatten the labels (find all labels in nested timelines and add them to the top level timeline that's passed into the function): function flattenLabels(tl) { var children = tl.getChildren(false, false, true), curTL, labels, p, i; for (i = 0; i < children.length; i++) { curTL = flattenLabels(children[i]); labels = curTL._labels; //undocumented for (p in labels) { tl.addLabel(p, curTL.startTime() + labels[p]); } } return tl; } Does that help?
  17. GreenSock

    Draggable drag and snap to new container

    I think the main problem with your approach there was that you were trying to live-edit a liveSnap array that was passed into the Draggable, but internally Draggable reads that upon creation and sets things up accordingly. In other words, it's not live-editable. You could just re-initialize a Draggable when necessary, like this: Does that help?
  18. GreenSock

    Creating a different ending in an animation

    I'm not sure I totally follow your question, but perhaps a cleaner approach would be to use a factory function that accepts a yoyo parameter, and then just string your animations together accordingly, kinda like: //a factory function for your slides that spits back a timeline function slide(panel, text, flowers, yoyo) { var tl = new TimelineLite(); //...build your animation accordingly return tl; } var master = new TimelineMax({delay:1, repeat:1}); master.add( slide(panel1, textMove_1, $("#flower_1, #flower_2, #flower_3, #flower_4, #flower_5"), true) ) .add( slide(..., true) ) .add( slide(..., true) ) // now for the last iteration, don't yoyo/repeat! .add( slide(..., false) ) ... So basically you can build out each iteration for each slide using a simple function, and tell it whether or not it should yoyo. I think you'll find that an approach like this makes your code much more maintainable, easier to tweak timings, and a pleasure to work with. After all, there was a large chunk of your code that seemed repetitive, meaning it could benefit from a function-based approach were you just feed in parameters for the differences/variables. I'd strongly recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/ - once you grasp the concept, it can revolutionize the way you build animations. I hope that helps.
  19. GreenSock

    Draggable drag and snap to new container

    Is there a reason you need to re-parent things mid-drag or can you just wait until onRelease? Perhaps it'd be simplest to get rid of all your onDrag logic and just add: liveSnap: { top: [0,42,84] } (or something like that).
  20. GreenSock

    getChildren() on Timeline with stagger

    @multivac, there are actually several ways I can think of to address this but before I jump into anything I'd like to understand WHY you want to get to the labels. What exactly are you trying to accomplish? And how/where are you setting the labels in the first place? Are you trying to add a different label wherever any stagger animation is inserted? What format would the labels use? The more details you can provide, the better.
  21. GreenSock

    Need help. Handle urls the right way

    We generally try to keep these forums focused on GSAP-specific questions, but I'd suggest Googling event.preventDefault() - that's generally how you'd stop the default behavior of a click event. It'd be a lot easier if you had a codepen demo that we could quickly edit for you, so if you still need some help, please provide one of those. To learn how, see: Happy tweening!
  22. GreenSock

    Animate a handwritten signature

    That's because your artwork is outlined - it's not a single stroke that goes through the center of each letter. For example, I added a copy with a red stroke here: See the problem? Animating that stroke isn't going to unveil the artwork underneath as you'd expect. You'll need to adjust your artwork accordingly, like draw a path over the top (NOT around the outline). Happy tweening!
  23. GreenSock

    Hide target by default when not being animated?

    Yeah, I think @Dipscom and I are on the same page. If I were you, I'd probably handle the positioning and the opacity/visibility with separate logic because positioning is frame-by-frame exact, but opacity/visibility is more gradual, like "fade in over 0.2 seconds...and wait until 5 frames elapse without any new instructions for the target object at which point we'll fade out over 0.2 seconds" (or something like that). So you could have logic that tracks just that piece - when instructions arrive for a new target, I shove an autoAlpha tween into the timeline and then I use a separate delayedCall() with a duration equivalent to whatever your timeout is (5 frames?) that, when completed, will shove a fade-out autoAlpha into the timeline. Then, every time I get a new set of instructions that does include that target, I restart() the corresponding delayedCall() so that it kinda resets the timer. Sorta like: var lookup = {}; //a lookup table so we can find elements by ID function getNewData(data) { var id, p, element; //I have no idea how your data is formatted, but basically loop through it... for (p in data) { id = data[p].id; element = lookup[id]; if (!element) { //there's no id in the lookup, so we need to start an overlay element = startOverlay(data[p]); } else { //we received data for this element, so restart its timeout element.timeout.restart(); } //animate the positional data. master.to(element, 0.04, {x:data.x, y:data.y}, master.time()); } } function startOverlay(data) { //I'm not sure how you're managing your elements, so I'm just creating a new one here but you'd probably grab one from a group of unused ones that you recycle (beyond the scope of this sample) var element = document.createElement("div"); document.body.appendChild(element); //add into the timeline at the current time. master.fromTo(element, 0.2, {autoAlpha:0}, {autoAlpha:1}, master.time()); //record the ID/element in the lookup table lookup[data.id] = element; //start a timeout and attach it to the element so we can easily find it. element.timeout = TweenLite.delayedCall(0.5, fadeOut, [data.id]); return element; } function fadeOut(id) { //find the element by ID var element = lookup[id]; //fade it out starting at the current time in the master timeline master.to(element, 0.2, {autoAlpha:0}, master.time()); //this is also where you could recycle things, remove them from the lookup if you want, and basically flag this thing as not on the screen anymore (well, after the autoAlpha animation is done, so maybe in an onComplete) } At least that's a rough sketch of what I had in my mind. Not sure if it's helpful or not. Happy tweening!
  24. GreenSock

    Laravel GSAP/ScrollMagic Import

    Excellent. Thanks for letting us know!
  25. GreenSock

    Hide target by default when not being animated?

    Absolutely. There are onStart and onComplete callbacks you can set for any tween or timeline (or both). They should be all over the docs, wherever the special properties are listed for the "vars" object (TweenLite, TweenMax, all the to(), from(), fromTo() methods, etc.) Are you saying that when you display an annotation (overlay), you have no idea how long it needs to stay there? Like...the duration is unknown because it's a live feed and decisions must be made on-the-fly? If so, what determines when they go away? I don't think I got an answer to my earlier question: "If these animations are up to an hour long, is your goal to allow users to scrub to any point on the timeline and have the DOM elements show up accordingly? " From what I can tell, this should be relatively simple to set up a reusable function that takes care of positioning, setting the text, and fading in an overlay, adding it to your timeline at the correct time, and then another function that handles fading it out at the right spot in the timeline. You could probably even reuse a small set of DOM elements for ALL the overlays (rather than having 500 of them, mostly sitting dormant). Like if you always have a maximum of 2 or 3 overlays on the screen at any given time, maybe you've got 5 <div>s that get cycled through over and over. It'd look the same, but be far less burdensome on the browser. Just a thought.