Jump to content

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

Robert Wildling

  • Content Count

  • Joined

  • Last visited

Community Reputation

19 Newbie

About Robert Wildling

  • Rank
    Advanced Member
  • Birthday 12/11/1972

Profile Information

  • Gender
  • Location
  • Interests
    PHP, JavaSrcipt

Recent Profile Visitors

1,342 profile views
  1. Thank you for your gsap-ly-fast answer, @ZachSaucier! I didn't think of the attr plugin – awesome!!! (I should have mentioned, that I am aware of the other solutions, and I also know how to do it with native JS. I was just wondering, how GSAP approaches that topic. Now I know! Very much appreciated!)
  2. Hi, dear GSAP afficionados! I was trying to find a way to set the value of a dataset attribute? But so far I failed, because I do not know, how to set something that does not have a key-value pair. The idea is to get the height of an element before hiding it. That height value should be saved to a `data-original-height` attribute, so that at a later point, another animation can pick up that value and create an exact "show" animation tweening to its exact height. (Of course the has to be updated on media queries and probably window.resize...) Thank you!
  3. @PointC Thank you very much! That was very help- and insightful! (And thanks for the restart advice! I keep that in mind! Currently, though, there is no user interaction, just onload and onunload animations.)
  4. Thank you, guys, for kicking my few lonesome little gray brain cells! You are awesome! May I just ask for a professional feedback at what I came up with now. it seems I can get the code working, when I define the variable for the timeline to be created beforehand, as an empty timeline, so-to-say. Then, a call to the "buildsecondTimeline" function would setup all the gsap needed. Fantasy code: // Define empty timeline beforehand: const timelineToBeBuild = gsap.timeline() // the onComplete of this function calls buildTimeline to create the second timeline. const firstTimeline = gsap.timeline({ onComplete: buildSecondTimeline }) // second timeline needs to be "wrapped" into another function, // otherwise it is executed right away const buildSecondTimeline = () => { timelineToBeBuild.to([...]) .add([...]) // This return is not necessary... // return timelineToBeBuild } // Call `timelineToBeBuild` directly btn.addEventListener('click', (e) => { timelineToBeBuild.progress(1).reverse }) I edited the codepen accordingly: https://codepen.io/rowild/pen/abvMWpx?editors=1010 It seems to work. I just wonder, if that is the way to go? Or are there still pitfalls I am not aware of?
  5. @PointC Thank you! The fact that the timeline is created after a click on a button here is only due to the fact that this is a reduced example. In my scenario, the timeline is build after an onComplete call from another timeline, which is necessary, because beforehand DOM elements are added that are not available right away. Of course: if there is a better solution I am all ears!
  6. Thank you, @ZachSaucier , for your quick and helpful response! The reason, why I setup the timeline within a function, is that there is stuff going on before this timeline is build (like text is wrapped in spans...). Elements are simply not available before this process is finished. So I put everything into a function and into another script (also to save space). This very function is then called from an onComplete event of another timeline. I only need it during page build-up. Well... that's what I thought. Now I would also like to use it in its reverse manner before unloading the page... hmm... I am also confused about the "(0)": It is clear to me that a timeline jumps to the beginning, when a zero is passed to the `play()` function. But I consequently thought that, when passing a 0 to the `reverse()` function, it would automagically jump to the end of the timeline. But that does not exist, right? (I am aware of the `progress(1)` function and also tried it - honestly! But since my whole setup doesn't work, I tried reverse(0), too...) Any idea how to build a timeline from an `onComplete` call? Without using a function? Or maybe better: with using a function properly?
  7. I am quite a bit embarrassed to have to ask this question again, but I am so totally stuck that I hope you find some patience with me... hopefully! it is about reversing an existing timeline that is saved to a variable, quite like this: ```js const mainTl = () => { const tl = gsap.timeline({ paused: true }) [...] return tl } ``` While this works, when called directly within the flow of the code: ```js mainTl().play(0) ``` the same function as well as `mainTl().reverse(0)` won't work, when called from a button. I did read the documentation and search through the forum here, but my light hasn't gone on so far. Can someone please switch it on? Thank you in advance!
  8. No way - look at that! Never seen that before! It's a miracle!!!
  9. Hi! I have to admit that I am not familiar with what ends up in a cheatsheet or not. I just found out today that `clearProps`is missing and simply wanted to ask, whether that property would be something to mention in the gsap 3 cheatsheet (if so, then probably under "Miscellaneous", right under `getProperty`) or not? Thank you!
  10. Thank you both for your answers and support! CSS variables is indeed something I didn't think about! Great idea!
  11. Dear GSAP community, I would like to ask for your advice concerning the CSSRulePlugin's usage in a for loop. From what I found out, it seems to be required, that the css rule, that the CSSRulePlugin is supposed to access, needs to be present in the stylesheet in exactly the same way. So writing something like let rule = CSSRulePlugin.getRule("slide0 .headline:before") requires .slide0 .headline:before to present in the CSS stylesheets. It will not work, when the style is defined differently, like .slides .headline:before . But in a slider the amount of slides is various (and they are usually generated via a for loop using data coming from a CMS), so I cannot predefine each and every .slide0, .slide1, .slide2 ... (well, I could, but I would guess that this wouldn't be considered the best approach). I did think about just using ".headline:before", which would give me an array of all available headlines, but that would also mean that the border width of all those elements would be animated, even though only one slider is visible at the moment. How can such a problem be solved? What is your approach? Or what would be your recommendation for me?
  12. 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!
  13. For some totally unexplainable reason it just did not at all come to my mind that I actually could search for the topic! **headshake** Ashamed, but still very grateful I'll hunt down the links you share, @PointC! Thanks a lot!
  14. 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!
  15. @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".