Jump to content

Robert Wildling

  • Posts

  • Joined

  • Last visited

Posts posted by Robert Wildling

  1. 3 minutes ago, ¯\_(ツ)_/¯ said:

    How far back do you need to provide support for browsers?


    Harvey was adopted from Paul’s matchMedia.js, while Harvey was updated 6 years ago, Pauls was updated 2 years ago … so can you just use Pauls? Certain things work regardless of needing updated solely based upon their intensions, is Harvey beginning to fail for you in some way?


    Here are some GSAP specific examples you may find interesting:


    No, Harvey is not failing at all! It works perfectly fine and I really do like the api it provides! 
    But unfortunately the developer and also the company he works/ed(?) for, do not respond. Honestly, I have no clue, what could be improved with Harvey, so an update might just simply not be necessary. On the other hand, there is so much going on in the JS universe, that I kind of got accustomed that libraries receive changes on a more or less regular basis...
    Anyway, I was just curious, which solutions other people use and therefore shouted out the question.
    Thanks a lot [no idea how to cite your name!] for the hint about Paul's update and for the examples! 

  2. Hi, dear Greensockers!

    My question is actually not totally GSAP-related, but since here are the best JS coders, I dare to ask anyway. I hope this is ok with you!


    I repeatedly come into the situation, where breakpoints require different parameter settings for a tween. My current solution is a settings object with some parameters for each breakpoint and `Harvey`, https://github.com/harvesthq/harvey, a - IMO - wonderful JS lib that takes care about breakpoints, but which unfortunately not supported anymore.


    That's why I wanted to ask you, how you approach the breakpoint problem, if you write your own script or if you can recommend another library. 

    Thank you!

  3. @GreenSock You just gotta have to LOVE Greensock! Thanks soooo much! I really wasn't expecting that! Hugs to the "guilty" person!


    May I comment on the collapse topic?

    I do not copy from the list, but the behaviour @OSUblake describes is familiar from other sites and admittedly not one that is welcome, if it is a source that needs to be used often.


    On the other hand, I am very much in the habit of using the browser search. And in the case of the collapsed vars, the search results are hidden, which is ... hmmm... well, not so useful, to be honest. Layout-wise, it also seems to be a bit unbalanced, when the left column with the list of all the methods is so very long that even the expanded list of vars won't surpass it in height.

    I suppose that documentation is just not the right place for having too much fancy animation stuff going on. As for myself, I like it to "just be there".

    • Like 1
  4. Thank you for you speed-light response, @GreenSock! i didn't even have time to brew a new cup of coffee... I guess you are the personified GSAP-principle: INCREDIBLY FAST! :-)


    Ad 1: So there is a popularity counter somewhere? :-) well, my personal favorite would still be alphabetically...


    Ad 2.1: I know this is wrong/weird/wanna-be-extra-smart/{fillInAsApproriate} thinking on my side. I had sth in mind that would "stringify" the reference input in case an error was thrown. So theirElementReference would indeed be that in the error console: Could not tween "theirElementReference"... maybe additionally passing along the reference as a string... well, that would be overhead. (That topic is definitely beyond my JS skills! So please forgive, if I do not make any sense and just forget about it...)


    Ad 2.3: I was actually thinking of the variable definition as in: `let myAnim = new Timelinemax(...)`, so "myAnim" could be thrown. But I wouldn't know what to do in anonymous cases, where only `TweenMax.to(...)` is used. 


    Ad 2.4: "keep is small": I am totally with you!

  5. Hi, dear GSAP community,


    two general questions bug me since quite some time and today I dare to ask (even though they are probably totally stupid):


    1. When opening the docs for, e.g., https://greensock.com/docs/TimelineMax/TimelineMax() to inspect the vars parameters, the params are actually not ordered alphabetically. And even though this is totally unimportant, I was wondering, if there is a reason for that. (In the tree on the left side, properties and methods are ordered alphabetically...)

    2. Sometimes a dom element for a tween is not found, which throws an error message in the console saying sth like this: `Cannot tween a null target.` I was wondering, if there is a chance to make GSAP be a bit more specific about which tween target it couldn't find, since the parameter should be given as string, anyway; or at least the tween name; or from where it was called?). Or am I missing something?

    (In my case, the error is thrown, when I forget to implement a `if (document.querySelector('.someClass')) { ... }`. At that time, the code already run through webpack and is implemented in some CMS. I know, I should do code splitting and deliver code only there, where it is needed. But that's a different story...)


    I did search the forums, but was not able to find proper resources. I hope you can help me understand! Thanks!

  6. God evening, all!


    I have a webpack 4 setup, where the ScrollPlugin loads in development mode, but not in production mode.


    The reason is that the plugin is not loaded in production mode, but is IS loaded in development mode.

    My setup looks like this


    import {  TweenMax } from 'gsap'
    import ScrollToPlugin from '../../node_modules/gsap/src/minified/plugins/ScrollToPlugin.min.js';
    import 'animation.gsap'
    import 'debug.addIndicators'


    (This solution is also from somewhere in the forums here.)

    Unfortunately, webpack's tree shaking remove the ScrollToPlugin, probably also, because it is never defined anywhere, which makes webpack (and also VSCode) think that it is never used – that at least is my assumption! Please feel free to correct me on that!


    However, if I use `require([path/to/scrolltoplugin])` things work fine in production mode, too. *Magic*

    This seems inconcise... irregular... wrong... incomplete... I am surely doing something wrong, misunderstanding a concept here... Could you set my head straight, please?


    Do you guys have a different solution to that problem?


    Or: @GreenSock Do you think this needs an implementation change on the ScrollToPlugin side?

  7. @OSUblake Thank you for your clear answer!! :-) And the slide!!


    To my knowledge, this is the first time that I ask about shadowDom... haven't done anything with it before.

    The "best practice" argument comes from many sources that say that an externally loaded svg can be cached. Which is a reasonable argument. And since I indeed use some of my svgs many, many times (and it is not just a straight line, but wild stuff), I went down that road...


    Well, I will look for a different approach now...


    PS: There are situations in this text editor, where the cursor keys won 't work. Any idea, what could cause that?

  8. Hi, fellow GSAPers!


    In my effort to adopt best SVG practices, I now switched to the "use" method of implementing SVGs. Unfortunately, it seems that I cannot access the implemented SVG to manipulate its path with GSAP. And google only spits out tutorials about how to add a shadowDom.


    My question: is there any way to access the shadowDom of <use> (which are of `mode: closed` according to the devConsole), get a path and animate it with GSAP?


    Things like this return null:
    `let pathConnectRoot = document.querySelector('.platine__info--connect use')  // null`
    `let pathConnectRoot = document.querySelector('.platine__info--connect use').shadowRoot.querySelector('path')  // error`


    (..which is given as an example here: `https://www.oreilly.com/library/view/modern-javascript/9781491971420/ch05.html`)


    Thank you!


    PS: I think this question does not require a codepen... right?

  9. Hi to all!


    I would need your advise on the given pen, which does not animate.

    The idea of this little exercise is to learn SVG animation and also to follow along the coding practices outlined in the famous "Star Wars" pen presented in this article:

    I am having trouble to understand, why my code is not working: This function 

    function def_animateParenthesisRight() {
      console.log("animate parens right")
      let tl = new TimelineMax()
      tl.to(pt, .35, { scaleX: 1 }, 0)
      tl.to(pm, .35, { y: 0, scaleX: 1, scaleY: 1 }, 0)
      tl.to(pb, .35, { y: 0, scaleX: 1 }, 0)
      return tl;


    encapsulates a timeline. It is then assigned to a masterTimeline:

    let masterTL = new TimelineMax({ paused: true })
    masterTL.add(def_animateParenthesisRight(), 0)


    And 2 buttons call the `masterTL.play()` or `masterTL.reverse()` function, which should shrink, respectively enlarge the right parenthesis.

    But nothing happens... Why?

    Thanks for your feedback!

    See the Pen dQYBqj by rowild (@rowild) on CodePen

  10. Hi, GSAP magicians,


    I am having trouble with animating a path of a SVG that is referenced as symbols.
    The codepen shows a left side, where the SVG is implemented "regularly" in the DOM flow. There, the intended animation works (the rectangle needs to be hovered).

    The same thing should happen on the right side, where the SVG is referencing a symbol instead.


    Does anybody of you guys know what I am doing wrong?

    The console shows that the original SVG is "copied" to a shadow-root - can "shadow DOM" be accessed anyway?


    Much appreciated!


    See the Pen mQyvrX by rowild (@rowild) on CodePen

  11. Aloha - the Green Sock has again provided fantastic help and insightful solutions! Millions and millions of thanks! 


    I am happy to say that I eventually found to a similar solution to what you did, @OSUblake. I am not so sure, if separate play and reverse functions are necessary, though, here is my thougth.

    Once this.logoAnimation is saved to Vue's method scope, I can call this.animation.play() and ...reverse() directly instead if this.play(). It saves some function definitions a la long... (pause() is great! I removed the play() method in the tween functions).


     Am I wrong? Or is this approach ugly? Or just a matter of taste?

    BTW: I put my methods (or the method call to the initAnims()) on enter and appear lifecycle hooks. Otherwise, my setup would throw an error, when called from a subpage directly...

    Good night! And millions of thanks again for your excellent help!!

  12. On 1/10/2014 at 9:05 PM, GreenSock said:

    We may actually alter the way the stagger methods work in a future version of GSAP so that when a negative stagger is used, it simply reverses the array internally, thus avoiding the "back-shift" timing thing. If anyone wants to chime in and vote for what they think is the most "intuitive" behavior, please do. 


    Sorry, I quoted from another post previously. Now I got the one i was actually referring to: @GreenSock  said in 2014 that they might change the way how potential -1s (or more) time problems are handled. I was just wondering, if this happened, since we have 2018 now... :-)

    Thank you!

  13. @OSUblake fantastic! Thanks a lot!

    But I wonder what would happen if I had to something like that for 50 timelines or so, in many more than just one child component? I followed your example and tried some variants, but either the `this` context gets messed up, or the new var gets reactive, or if a new var is defined during a life cycle method, then the DOM is not available...

    It is not easy to sync animations between and within child components from the root parent is, it seems to me.  
    It would be great to have a structure like this, where all animation methods are saved to: (fake code, not working)

    methods() {
      allAnims(refs) {
          logoAnimation = refs.Logo.animateLogo();
          sidebarAnimation = refs.Sidebar.animateSomething();
          navMainAnimation = refs.NavMain.animateMenues();
      play() {
      reverse() {
    mounted: {

    Or even call the method with


    But my attempts fail... 

    Any thoughts?

  14. 1 hour ago, Carl said:


     methods: {
        play() {
          console.log("Clicked play")
        reverse() {
          console.log("Clicked reverse")
          this.$refs.Logo.animateLogo().progress(1).reverse() //better


    demo here: https://codesandbox.io/s/lrzp0p817q


    @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!

    • Like 1
  15. On 1/10/2014 at 8:17 PM, GreenSock said:

    The negative stagger value technically works here, but I'd advise caution with that because it actually makes the startTimes go backwards, so for example, if you've got 10 elements in the array and you put the staggerTo() at the beginning of the timeline and the stagger is -0.1, the last tween would actually be positioned to start at a time of -1 which is before the timeline's start. Luckily there's code in place that senses that condition and literally picks up and moves all the tween forward because it knows that nothing is supposed to start before a time of 0. 


    That's why it works here, but let's say you had built a timeline that already had 10 seconds of animations in it, and you append a staggerTo() to the end with a negative stagger value - you'd end up getting an overlap. If we took the example above (10 elements, -0.1 stagger), the last element in the array would start animating 1 second before the end of that timeline. Of course you can use that to your advantage. And it's not a bug or anything - you're asking it to stagger the start times by a negative number after all. 


    The only other situation I can think of that might surprise you is if you've got a timeline that already has a bunch of tweens in it, and you put a staggerTo() at the very beginning of the timeline, and use a negative stagger - since that produces tweens with negative startTimes, the timeline would have to pick all the tweens up (including the existing ones in the timeline so that things remain synchronized properly) and move them forward, thus the startTimes of the old stuff would be affected. 


    In my opinion, if you want to reverse the order in the array, just do this and use a positive stagger:

    var reversedChars = mySplitText.chars.slice(0);
    tl.staggerFrom(reversedChars, 0.5, {opacity:0, y:50}, 0.2);

    Quick question: It is late 2018 - is this still valid? Or did GSAP come up with a different solution, as @GreenSock vaguely points out?

    • Like 1